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

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"

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

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

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

130617-1

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

data-chrome="noheader"
130617-2

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

data-chrome="noheader nofooter"
130617-3

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

data-chrome="noheader nofooter noborders"
130617-4

ボーダー(境界線)も非表示に。

data-chrome="noheader nofooter noborders transparent"
130617-5

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

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

公開日:2013/06/17
更新日:2014/05/07

2件のピンバック

  1. […] twitterの新ウィジェット(埋め込みタイムライン)をカスタマイズ *Ateitexe ヘッダー・フッターと装飾部分の削除まで。 […]


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)