jQueryでTwitterの公式ウィジェットをカスタマイズする
Posted: 2013.02.08 / Category: javascript / Tag: jQuery, Twitter
以前のTwitterウィジェットは色とか色々とカスタマイズできたのですが、新しくなってほぼそのまま使うしかなくなってしまいました。
そこでjQueryを使用してカスタマイズしてみようと思います。今後、Twitterの仕様変更によって使えなくなる可能性もありますがご了承ください。
Sponsored Link
タイムラインを表示するウィジェットの設置
タイムラインを表示したいときはこんな感じに設置しますね。
html
<a class="twitter-timeline" href="https://twitter.com/xxxxxxxxxxxx" data-widget-id="xxxxxxxxxxxxxxxxxx" lang="JA" width="600">@xxxxxxxxxxxxx からのツイート</a> <script> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); </script>
横幅(width)のカスタマイズ
横幅はwidthオプションで設定しますがこれだと最大で「520px」までしか広くなりません。
サイズの変更だけならcssで変更できます。
css
iframe.twitter-timeline { width: 800px; }
ウィジェットのJSが実行されるとiframeに置き換わるので、その部分にcssを割り当てるだけですね。
Twitterウィジェットのiframe内にアクセスする
widthはiframe自体のサイズの変更だったので、呼び出し元のcssで変更できましたが、iframe内部の要素の変更は外側からでは変更できません。
そこでjQueryを使用してiframe内にアクセスできるようにしてみます。
JavaScript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(window).load(function() { function changeWidget() { var twFrame = $('iframe.twitter-timeline'); if (twFrame.length > 0) { alert(twFrame.contents()); } else { setTimeout(changeWidget, 500); } } changeWidget(); }); </script>
ChromeやFirefoxなら「$(window).load」だけでiframe読み込み後に実行してくれますが、ieだと動的に追加したiframeはだめなようです。
なので「$(‘iframe.twitter-timeline’).length > 0)」という分岐をいれてiframeがなかったら再度実行ということをすればいいみたいです。
iframeは「$(‘iframe.twitter-timeline’).contents()」でアクセスできます。
タイトルを変更する
タイムラインのタイトルは標準で「ツイート」になってますので変更してみます。
JavaScript
$(window).load(function() { function changeWidget() { var twFrame = $('iframe.twitter-timeline'); if (twFrame.length > 0) { twFrame.contents() .find('h1').text('俺のつぶやき'); } else { setTimeout(changeWidget, 500); } } changeWidget(); });
iframe内で外部cssを読み込む
jQueryのcssAPIでカスタマイズしてもいいですが、cssで編集できた方がスマートですね。
iframeから外部cssを読み込むというのをやってみます。
あらかじめ下記cssファイルをサーバーにアップしておきます。
tw.css
div.twitter-timeline div.timeline-footer { display: none; }
あとはhead要素などにappendでアップロードしたcssファイルを指定します。
JavaScript
twFrame.contents() .find('h1').text('俺のつぶやき') .end() .find('head').append('<link href="http://www.example.com/tw.css" rel="stylesheet" type="text/css" media="all" />');
このcssはウィジェットの下のリプライ欄を非表示にしてます。
以上、くどいようですがTwitterの仕様が変更された場合使えなくなる可能性があります。
また、がっつりカスタマイズしたいときは「PHPでOAuth認証して自分のつぶやきを表示する [Twitter API 1.1 対応版]」を参考にしていただければ。
2013.03.19 追記)jQueryを使用しないでもカスタマイズできるようになりました。
a タグに data 属性を指定することでカスタマイズできるようになりました。
ただカスタマイズできる項目はあまり多くないようです。
インターフェイスのカスタマイズは「data-chrome」を設定します。
html
<a class="twitter-timeline" href="https://twitter.com/xxxxxxxxxxxx" data-widget-id="xxxxxxxxxxxxxxxxx" data-chrome="noheader nofooter">
その他「data-chrome」でカスタマイズできる設定は下記になります。
noheader | タイムラインのヘッダーをなくします。 |
---|---|
nofooter | タイムラインのフッターやツイートボックスをなくします。 |
noborders | ウィジェットの周りやツイートの間のボーダー(境界線)をなくします。 |
transparent | タイムラインの背景を透明にします。 |
ヘッダー&フッターを非表示するとこんな感じに表示できます。
「data-chrome」以外は「data-border-color」で境界線の色の変更が可能です。
詳しくは公式サイトを確認してください。
埋め込みタイムライン | Twitter Developers
COMMENTS
さいとう 2015-05-14 14:01
とても参考になりました。ありがとうございます。
しかし疑問なのですが、JavaScriptでは別ドメインのDOMの取得・変更はできないような制約があったと思います。この場合なぜ出来たのでしょうか?動的に追加したiframeは同一ドメイン扱いになるということなんでしょうかねぇ。。。
webOpixel 2015-05-18 13:08
古い記事だったのですが使えてよかったです。
iframeはサイトによって編集が許可されていたり、だめだったりしていたと思います。
あまり詳しくはわからないのですが。