先日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