HTML

Twitter タイムラインウィジェットの埋め込みとカスタマイズの方法

Twitter タイムラインウィジェットの埋め込みとカスタマイズの方法

Twitterのタイムラインウィジェットの埋め込みとカスタマイズの方法を紹介します。
例えば、サイトのお知らせ代わりに Twitter のタイムラインウィジェットを入れたいときに便利な方法です。

  1. Twitter のタイムラインウィジェットの埋め込み方法
  2. Twitter のタイムラインウィジェットの表示サイズの変更方法
  3. Twitter のタイムラインウィジェットのカスタマイズ方法
  4. ツイートの表示件数を指定

Twitter のタイムラインウィジェットの埋め込み方法

Twitter のタイムラインウィジェットをサイト内へ埋め込む場合、次のコードを表示したい場所に追加します。

<a class="twitter-timeline"
href="https://twitter.com/xxxxx">
Tweets by xxxxx
</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

コード内の xxxxx は、表示したい Twitter アカウントのユーザー名に変更してください。
実際に埋め込んだ場合の表示はこちらになります。

Twitter のタイムラインウィジェットの表示サイズの変更方法

埋め込みタイムラインは自動的に180ピクセルの最小幅と、520ピクセルの最大幅とその親要素の幅に合わせて調整されます。
グリッドテンプレートは220ピクセルの最小幅が設定されています。
例えばタイムラインのサイズを 300 x 300ピクセルにしたい場合は、アンカータグに width と height の指定を追加します。

<a class="twitter-timeline"
href="https://twitter.com/xxxxx"
width="300"
height="300">
Tweets by xxxxx
</a>
〜 script 省略 〜

横幅が520ピクセルを越えると、スマホ対応のためか文字サイズが極端に大きくなってしまいます。
文字サイズが気になる場合は、ページに合わせて CSS などで文字サイズを調整する必要があります。

Twitter のタイムラインウィジェットのカスタマイズ方法

タイムラインに表示される、ヘッダー、フッター、ボーダー、スクロールバーの表示・非表示を指定することができます。
例えば、フッターとボーダーを非表示にする場合は、アンカータグに data-chrome="nofooter noborders" を追加します。
変更でき要素は次の通りです。

noheader
ヘッダーを非表示にします。Twitter アカウントへのリンクが非表示になるため、アクセシビリティを考えてオリジナルのヘッダーなどを追加するのもよいでしょう。
nofooter
フッターを非表示にします。Twitter アカウントへのリンクが非表示になるため、アクセシビリティを考えてオリジナルのフッターやフォローボタンを追加するのもよいでしょう。
noborders
ウィジェット領域とツイートを分離する境界線を含むウィジェット内のすべての罫線を削除します。
noscrollbar
スクロールバーを非表示にします。
transparent
ウィジェットの背景色を削除します。

Twitter のタイムラインウィジェットのフッターを非表示にする場合は次のように調整します。

<a class="twitter-timeline"
href="https://twitter.com/xxxxx"
data-chrome="nofooter noborders">
Tweets by xxxxx
</a>
〜 script 省略 〜

ツイートの表示件数を指定

タイムラインウィジェットのツイートの表示件数を1から20の間で調整することができます。
例えばツイートを3件表示したい場合は、アンカータグに data-tweet-limit="3" を追加します。

<a class="twitter-timeline"
href="https://twitter.com/xxxxx"
data-tweet-limit="3">
Tweets by xxxxx
</a>
〜 script 省略 〜

まとめ

Twitterのタイムラインウィジェットの埋め込みとカスタマイズの方法を紹介しました。

合わせて読みたい関連記事