【Web】TwitterのタイムラインをブログやWebサイトに埋め込む方法と、表示ツイート数の設定

投稿日:2020年6月22日
最終更新日:2020年6月23日

TwitterのタイムラインをWebサイトに埋め込む方法

最近、Bloggerで新しいブログをつくっているのだが、TwitterのつぶやきをWebサイトに表示させたときの方法をメモ。

まず、埋め込みたい自分のTwitterアカウントのホーム画面を開き、アドレスをコピーする。

次に、こちらのTwitter Pualishのサイトを開き、先ほどコピーしたTwitterアカウントのアドレスを入力して矢印ボタンを押す。

埋め込み形式を選べるので、左のEmbedded Timelineを選択。

これでブログやWebサイトに埋め込むことができるHTMLのコードが生成される。Copy Codeをクリックすればコードをコピーできるので、あとは自分のブログやWebサイトにペーストして埋め込むだけ。

ちなみに、Bloggerでコードを組み込む方法はこちらの記事で紹介しているので、Bloggerを使っている人は参考にしてみてください。

 

タイムライン表示の長さ(ツイート数)を調整する方法

上記のコードをBloggerに埋め込んでみたのだが、表示されるツイート数が多すぎて、ブログの下までずら~っとツイートが表示されてしまうようになってしまった。

これだと少し読みにくいので、表示されるツイート数を制限することにした。ググったところ、こちらのTwitter公式の英語サイトに方法が書いてあった。以下のように、組み込みコードにdata-tweet-limitという属性を設定し、そこに表示させたいツイート数を入れてやれば良いとのこと。以下の例だと表示ツイート数を3にしている。

<a class=”twitter-timeline” href=”https://twitter.com/TwitterDev” data-tweet-limit=”3″> Tweets by @TwitterDev </a>

私のブログにもツイート数を3にして埋め込んだところ、以下のようにちゃんと3つのツイートだけ表示されるようになった。

ツイートを埋め込んでおけば、ブログからツイッターを見てフォローしてくれる人もいると思うので、有効に活用したい。


投稿者: wakky

映画と旅行が大好きなエンジニア。お酒、ゲーム、読書も好き。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください