LAST UPDATE   | Posted by Takumi Hirashima

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

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

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

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

タイムラインウィジェットをサイト内へ埋め込む場合、以下のコードを表示したい場所に追加します。
コード内の xxxxx は、表示したい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>

実際の表示はこちら。

サイズの変更

埋め込みタイムラインは、自動的に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で文字サイズを調整しましょう。

カスタマイズ

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

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