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

twitterの埋め込みウィジェット、前のウィジェットほどカスタマイズはできないんだなーと思って調べてみたら、結構出来るみたいですね。
コード
1 2 |
<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行目の
1 |
<a class="twitter-timeline" □ href="xxx"> |
□部分にコードを入れることでオプションが設定できます。
1 |
width="300" |
例えば、幅を300pxにするときはこんな感じ。
1 |
height="500" |
高さを500pxにするには、こんな感じ。
1 |
data-chrome="noheader" |
ヘッダーを非表示にするには、こんなふうに。
詳しくはコチラをご参照ください。
例
当ブログのフッターにあるウィジェットで試してみたキャプチャです。

取得コードを貼り付けただけの状態です。
1 |
data-chrome="noheader" |

ヘッダーを非表示にした状態。
1 |
data-chrome="noheader nofooter" |

半角スペースにプラスしていくと、複数の条件を実装できます。フッターも非表示にしてみました。
1 |
data-chrome="noheader nofooter noborders" |

ボーダー(境界線)も非表示に。
1 |
data-chrome="noheader nofooter noborders transparent" |

背景色を透明にすることもできます。
私は今のところデフォルトで使っていますが、思ったよりいろいろできるんですねー!
2件のピンバック
[…] 手動 […]
[…] twitterの新ウィジェット(埋め込みタイムライン)をカスタマイズ *Ateitexe ヘッダー・フッターと装飾部分の削除まで。 […]
コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)