Twitter埋め込みタイムライン（ウィジェット）のカスタマイズ方法まとめ
今更ながらTwitter埋め込みタイムラインについてまとめてみました。
ドキュメントに書いてありますが、実際に試してみたことをまとめておきます。
埋め込みタイムタイムラインのウィジェットを使うとブログやサイト内に手軽に自分のTweetを表示することができます。
また、多少のラグはあるもののリアルタイムで更新されるので便利です。
ウィジェットにはいくつか種類があって
- ユーザタイムライン
- 特定のユーザのツイートを表示
- お気に入り
- 特定のユーザのお気に入りツイートを表示
- リスト
- 自分で作成したリスト、もしくは保存したリストを表示
- 検索
- 特定ワード、特定ハッシュタグで検索した結果を表示
- 検索オペレータが使用できるのでORやANDを使った検索も可能
- コレクション
- TweetDeckの機能？
- 自分の環境では利用できず未検証
の5種類が使えます。
カスタマイズに関しては、ウィジェット作成画面ではカスタマイズできるのが高さとテーマとリンク色と少ないですが、発行されるhtmlを編集することで柔軟なカスタマイズができるようになっています。
ウィジェット作成
twitterログイン後、メニューの「設定」から「ウィジェット」を開き「新規作成」を選択
埋め込みたいウィジェットの設定をして「ウィジェットを作成」を選択
- htmlコードが発行されるので自分のサイトに貼り付け
ウィジェットカスタマイズ
ウィジェット作成をすると以下のようなhtmlが発行されます（scriptは省略してますが、サイト貼り付け時はscript部分も貼り付けてください）
<a class="twitter-timeline" href="https://twitter.com/hilotter" data-widget-id="ウィジェットID">@hilotter からのツイート</a>このhtmlをサンプルとして、よく使いそうなカスタマイズ方法をまとめておきます
- サイズ
- デフォルトは520x600px
- サイトのhtmlに応じて自動調整がかかる
- width, heightで指定することが可能
- width：最小180px、最大520px
- height：最小200px
- 以下はwidth 200, height 200を指定した場合
<a class="twitter-timeline" href="https://twitter.com/hilotter" data-widget-id="ウィジェットID" width="200" height="200">@hilotter</a>- インターフェース（レイアウト変更）
- data-chrome属性に値を指定
- 5種類の値が指定可能
- noheader: ヘッダーをなしに
- nofooter: フッターをなしに
- noborders: ボーダーをなしに
- noscrollbar: スクロールバーをなしに
- transparent: 背景を透明に
- 複数指定の場合はスペース区切りで指定
- 以下は全ての値を指定した場合
<a class="twitter-timeline" href="https://twitter.com/hilotter" data-widget-id="ウィジェットID" width="200" height="200" data-chrome="noheader nofooter noborders noscrollbar transparent">@hilotter</a>（実際にはボーダーなしになります）
- ツイート数の固定
- data-tweet-limitを指定することで表示数を固定
- 最小1、最大20
- 注意 ウィジェットのサイズが固定になるので、ツイートが自動的に更新されません
- 以下は表示件数を1に固定した場合
<a class="twitter-timeline" href="https://twitter.com/hilotter" data-widget-id="ウィジェットID" data-tweet-limit="1">@hilotter</a>- リストの場合、data-list-owner-screen-name属性（もしくはdata-list-owner-id属性）とdata-list-slug属性を指定することで、保存していないリストでも直接表示することが可能なようです
<a class="twitter-timeline" href="https://twitter.com/{screen-name}/lists/{list-name}" data-widget-id="ウィジェットID" data-list-owner-screen-name="{screen-name}" data-list-slug="{list-name}">list</a>その他のカスタマイズに関しては ドキュメントを参照してください。
以上、Twitter埋め込みタイムラインについておおまかにまとめてみました。
ドキュメントを読むだけだと細かい部分を見落としていた（data-tweet-limit指定時はリアルタイム更新ができなくなる）ので、実際に試してみるのは大事ですね。