Twitterウィジェットの設定。

• facebook

オフィス狛　技術部です。

先日6月11日に、Twitter API Version 1.0の提供が終了しました。
（2012年8月時点でアナウンスはされていて、今までは移行期間だったので、
そこまで話題にはなっていませんでしたが。）

弊社ホームページでは、API 1.1には移行せずに、
API 1.0提供終了時点でツイート表示も廃止する予定でした。
廃止する一番の理由としては、「ツイート、タイムライン表示の方式規定 *1」によるものです。

*1 公式ドキュメントのDeveloper Display Requirementsにある通りに表示する必要があり、
今まで独自レイアウトで表示していたものが、使用出来なくなるからです。

API 1.0終了に対する簡単な対応としては、ウィジェットがあります。
指定のURLを自分のサイトへ貼り付けるだけで、タイムライン表示が可能となります。

Twitterへログインし、「設定」 > 「ウィジェット」で作成可能です。



基本的には、上記で作成した後、コードを自分のサイトへ貼り付けるだけなのですが、
コードに手を加える事で、細かい設定を行う事が可能です。

カスタマイズするのは以下の部分です。

<a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="xxxxxx">

幅と高さについて

width、heightを指定する事で、自由に変更する事が可能です。

<a class="twitter-timeline" width="520" height="200" href="https://twitter.com/username" data-widget-id="xxxxxx">

ちなみに、指定出来る最小の幅は180px、最大の幅は520pxです。
最小の高さは200pxです。

表示ツイート数について

data-tweet-limitで、、表示するツイート数を指定できます。
以下の例では、ツイート数を1件に指定しています。

<a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/username" data-widget-id="xxxxxx">

表示UIについて

data-chrome属性に以下のオプションを指定する事で、UIを変更出来ます。
オプションは、複数同時に設定する事が可能です。

noheader
　ヘッダー（フォローボタンがある部分）を非表示にします。
nofooter
　フッター（ツイート用テキストボックスがある部分）を非表示にします。
noborders
　ウィジェットの枠線、ツイート毎の境界線を非表示にします。
transparent
　ウィジェットの背景を透明にします。

全て設定した場合の例は以下の通りです。

<a class="twitter-timeline" data-chrome="noheader nofooter noborders transparent" href="https://twitter.com/username" data-widget-id="xxxxxx">

その他

上記設定の他にも、「data-theme」でタイムラインのテーマ、
「data-link-color」でリンクの文字色、「lang」で言語設定などが可能です。
※詳細は、公式ドキュメントに記載されています。

弊社ホームページでも、廃止予定だったツイートの表示をウィジェットで代替しています。

Twitter , Web API