ブログに貼り付けているTwitter ウィジェットが使えなくなるらしい「埋め込みタイムライン」に変更してみる

スポンサードリンク

ブログに貼り付けているTwitter ウィジェットが使えなくなるらしい「埋め込みタイムライン」に変更してみる

Posted by 管理人 on 2013年4月7日 Leave a comment (0) Go to comments

ブログに貼り付けているTwitter ウィジェットが使えなくなるらしい・・・・・えーーーーー。

ソースの張替えめんどい。これだから使うのイヤだったんですが、あちこち貼り付けてしまっているので探し出して張替え。

さて「埋め込みタイムライン」の制限ですが、通常のTwitter API制限を受けず、サイトへのトラフィックや閲覧者の増加につれ自動的に調整されます。・・・・とのこと。（参照）

twitter.comへログインし、設定のウィジェットページからタイムラインを作成します。

高さは設定できるのですが、幅が設定できないので直接コードをいじります。100%にしたのですが広がらないのであれ？

<a class="twitter-timeline" data-chrome="nofooter transparent" width="100%" height="500" href="https://twitter.com/search?q=%E5%9C%B0%E5%9B%B3" data-widget-id="326322699708276740">地図 に関するツイート</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>

タイムラインのサイズは幅は最小180px、最大で520px、高さは最小200pxでした。

次に埋め込み用のコードでカスタマイズできるオプション

リンクの色: data-link-color=”#cc0000″
幅: 上記に書いてあった通りwidth属性で幅を設定できる(単位はpixels)
高さ: 上記に書いてあった通りheight属性で高さを設定できる(単位はpixels)
インターフェース: data-chrome属性を使ってウィジェットのレイアウトやインターフェースをカスタマイズできる。スペース区切りで以下のオプションを指定してください。

noheader: タイムラインのヘッダーをなくす。
nofooter: タイムラインのフッターやツイートボックスをなくす。
noborders: ウィジェットの周りやツイートの間のボーダー(境界線)をなくす。
transparent: タイムラインの背景を透明にします。例えばdata-chrome=”nofooter transparent”でフッターやツイートボックスのない透明背景タイムラインになる。