1. まとめトップ

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

Twitterの公式ウィジェットが「埋め込みタイムライン」に変わりますが、カスタマイズ方法がわかりにくいためまとめてみました。

更新日: 2013年03月04日

13 お気に入り 55911 view
お気に入り追加

この記事は私がまとめました

ihassenさん

Twitterの公式ウィジェット「Join the conversation」をサイトやブログに貼り付けている人は多いと思いますが、実はこのウィジェットが2013年3月以降使用できなくなります。

代替として、すでに新しい公式ウィジェットである「埋め込みタイムライン」が使用できるようになっていますが、
デフォルトでは高さやリンク色などほんの少しの項目しかカスタマイズすることができません。
しかも、iframeを使用して表示されているため、CSSを使ってカスタマイズすることも難しくなっています。

幅・高さのカスタマイズ

ウィジェットの管理画面では高さしか設定できませんが、
aタグに直接幅・高さを指定することができます。

<a class="twitter-timeline" width="300" height="500" href="https://twitter.com/twj_dev" data-widget-id="XXXXXXXXXXXXXXXXX">

横幅を220px以下に変更する

上記の方法で指定できるサイズは幅最小220px、最大520px、高さは最小350pxです。
ブログやサイトのサイドバーに設置したい場合、幅220pxでは大きすぎる場合があります。
その場合は、iframeのmin-width指定をCSSで上書きすることで、220px以下の値を指定することができます。

.twitter-timeline {
 min-width: 180px !important;
}

※追記(2013/3/19)
公式の最小幅が変更されたようです。180pxまでは普通に設定できるようになりました。
> タイムラインのサイズは幅最小180px、最大520px、高さは最小200pxです。
https://dev.twitter.com/ja/docs/embedded-timelines

背景色や文字色、ヘッダ・フッタなどをもっと細かくカスタマイズしたい

タイムラインはiframe内に表示されているので、CSSを直接指定することはできません。
そこで、javascriptを用いて、iframeの読み込みが終わるのを待ってからiframe内の要素にスタイルを指定する方法を用います。

埋め込みタイムラインが表示されない場合

今回の埋め込みタイムラインはIDごとに管理され、ウィジェット作成時に指定したドメイン内でしか表示されないような仕組みになっています。
そのため、別サイトで同じウィジェットを使いまわそうとしてタグをコピー&ペーストすると、ウィジェットが表示されずテキストリンクのみが表示されてしまいます。
なお、ひとつのウィジェットに複数のドメインを指定することは可能なので、複数サイトに設置すること自体は問題ないようです。

----

以上をくみあわせることで、以前のウィジェットと同じように、お好きなデザインでTwitterウィジェットを設置することができます。

ただし、最初に書いた幅・高さ指定以外は公式に推奨されている方法ではないので、APIの仕様変更などで使えなくなる可能性もあることは注意しておきましょう。

1