Twitterのタイムラインを埋め込む方法【カスタマイズ方法も解説】

Twitterのタイムラインを埋め込むにはどうしたらいいんだろう？

タイムラインは常に最新のツイートから表示されるので、Twitterをよく更新しているサイトであればお知らせ代わりとしても使えますね。

効率よくコーディングしたい人はこちら

タイムラインのコードを取得

まずはこちらのTwitter公式ページに行きます。

Twitter Publish

そしたら次のような画面が表示されるので、ここにTwitterのURLを入力してEnterキーを押します。

TwitterのURLはプロフィール画面のURLですね。

Enterキーを押すと自動で下にスクロールして次の表示が出てくるので、左のタイムラインの方をクリックします。

するとまた少し下にスクロールして次の表示が出てくるので、右のCopy Codeをクリックします（コードの色が薄いですが気にしなくてOKです）

ちなみに枠内をクリックしてもコピーできます。

そしたらそのコードをHTMLの表示させたい場所に貼り付ければ完了です。

ただしこのままだとデカいし長いのでそのまま使うのは現実的ではありません。

そこでカスタマイズをしていきます。

カスタマイズ

先ほどのCopy Codeをクリックする前に、その上にあるカスタマイズをクリックします。

するとこのような画面が表示されます。

全部で4か所設定することが出来ます。

背景色は一般的には初期値であるLightかなと思います。

言語の設定もAutomaticで大丈夫なので、後は幅と高さを設定したら右下のUpdateをクリックしてから再度コードをコピーしてHTMLに貼り付ければOKです。

さらにカスタマイズ

先ほど書いたカスタマイズ画面以外にも、直接コードを書いてカスタマイズ出来る項目があります。

実際これらのコードをどこに入れるかというと、最初の公式ページでカスタマイズしたコードが次だとします。

<a
  class="twitter-timeline"
  data-width="300"
  data-height="300"
  data-theme="light"
  href="https://twitter.com/junpei_sugiyama?ref_src=twsrc%5Etfw"
  >Tweets by junpei_sugiyama
</a>
<script
  async
  src="https://platform.twitter.com/widgets.js"
  charset="utf-8"
></script>

そしてこのaタグの中に入れればいいので、次のような感じになります。

<a
  class="twitter-timeline"
  data-width="300"
  data-height="300"
  data-chrome="noheader nofooter"
  data-border-color="#ff6347"
  data-theme="light"
  href="https://twitter.com/junpei_sugiyama?ref_src=twsrc%5Etfw"
  >Tweets by junpei_sugiyama</a
>
<script
  async
  src="https://platform.twitter.com/widgets.js"
  charset="utf-8"
></script>

以上です。

コーディング案件の単価と作業効率を上げる！

Brainランキング1位獲得 ＆ 3日で500部突破

クチコミ約300件
（平均スコア）

今だけ！5つの無料特典あり🎁

👇画像をクリック