twitterの新ウィジェット（埋め込みタイムライン）をカスタマイズ

twitterの埋め込みウィジェット、前のウィジェットほどカスタマイズはできないんだなーと思って調べてみたら、結構出来るみたいですね。

コード

<a class="twitter-timeline" href="https://twitter.com/xxxxxx" data-widget-id="xxxxxxxxxxxxxxxxxx">＠xxxxxx からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

twitter上の[設定]→[ウィジェット]からコピーしてくると、こんな感じ。この、1行目の

<a class="twitter-timeline" □ href="xxx">

□部分にコードを入れることでオプションが設定できます。

width="300"

例えば、幅を300pxにするときはこんな感じ。

height="500"

高さを500pxにするには、こんな感じ。

data-chrome="noheader"

ヘッダーを非表示にするには、こんなふうに。

• 埋め込みタイムライン | Twitter Developers

詳しくはコチラをご参照ください。

例

当ブログのフッターにあるウィジェットで試してみたキャプチャです。

取得コードを貼り付けただけの状態です。

data-chrome="noheader"

ヘッダーを非表示にした状態。

data-chrome="noheader nofooter"

半角スペースにプラスしていくと、複数の条件を実装できます。フッターも非表示にしてみました。

data-chrome="noheader nofooter noborders"

ボーダー（境界線）も非表示に。

data-chrome="noheader nofooter noborders transparent"

背景色を透明にすることもできます。

私は今のところデフォルトで使っていますが、思ったよりいろいろできるんですねー！