2013.03.19 追記)jQueryを使用しないでもカスタマイズできるようになりました。

タイムラインを表示するウィジェットの設置

タイムラインを表示したいときはこんな感じに設置しますね。

html

  1. <a class="twitter-timeline" href="https://twitter.com/xxxxxxxxxxxx" data-widget-id="xxxxxxxxxxxxxxxxxx" lang="JA" width="600">@xxxxxxxxxxxxx からのツイート</a>
  2. <script>
  3. !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");
  4. </script>

横幅(width)のカスタマイズ

横幅はwidthオプションで設定しますがこれだと最大で「520px」までしか広くなりません。
サイズの変更だけならcssで変更できます。

css

  1. iframe.twitter-timeline {
  2. width: 800px;
  3. }

ウィジェットのJSが実行されるとiframeに置き換わるので、その部分にcssを割り当てるだけですね。

Twitterウィジェットのiframe内にアクセスする

widthはiframe自体のサイズの変更だったので、呼び出し元のcssで変更できましたが、iframe内部の要素の変更は外側からでは変更できません。
そこでjQueryを使用してiframe内にアクセスできるようにしてみます。

JavaScript

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. $(window).load(function() {
  4. function changeWidget() {
  5. var twFrame = $('iframe.twitter-timeline');
  6. if (twFrame.length > 0) {
  7. alert(twFrame.contents());
  8. } else {
  9. setTimeout(changeWidget, 500);
  10. }
  11. }
  12. changeWidget();
  13. });
  14. </script>

ChromeやFirefoxなら「$(window).load」だけでiframe読み込み後に実行してくれますが、ieだと動的に追加したiframeはだめなようです。
なので「$(‘iframe.twitter-timeline’).length > 0)」という分岐をいれてiframeがなかったら再度実行ということをすればいいみたいです。
iframeは「$(‘iframe.twitter-timeline’).contents()」でアクセスできます。

タイトルを変更する

タイムラインのタイトルは標準で「ツイート」になってますので変更してみます。

JavaScript

  1. $(window).load(function() {
  2. function changeWidget() {
  3. var twFrame = $('iframe.twitter-timeline');
  4. if (twFrame.length > 0) {
  5. twFrame.contents()
  6. .find('h1').text('俺のつぶやき');
  7. } else {
  8. setTimeout(changeWidget, 500);
  9. }
  10. }
  11. changeWidget();
  12. });

iframe内で外部cssを読み込む

jQueryのcssAPIでカスタマイズしてもいいですが、cssで編集できた方がスマートですね。
iframeから外部cssを読み込むというのをやってみます。
あらかじめ下記cssファイルをサーバーにアップしておきます。

tw.css

  1. div.twitter-timeline div.timeline-footer {
  2. display: none;
  3. }

あとはhead要素などにappendでアップロードしたcssファイルを指定します。

JavaScript

  1. twFrame.contents()
  2. .find('h1').text('俺のつぶやき')
  3. .end()
  4. .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 対応版]」を参考にしていただければ。

参考サイト: Twitterの新しいウィジェットをカスタマイズする – 侍ズム #samuraism

2013.03.19 追記)jQueryを使用しないでもカスタマイズできるようになりました。

a タグに data 属性を指定することでカスタマイズできるようになりました。
ただカスタマイズできる項目はあまり多くないようです。
インターフェイスのカスタマイズは「data-chrome」を設定します。

html

  1. <a class="twitter-timeline" href="https://twitter.com/xxxxxxxxxxxx" data-widget-id="xxxxxxxxxxxxxxxxx" data-chrome="noheader nofooter">

その他「data-chrome」でカスタマイズできる設定は下記になります。

noheader タイムラインのヘッダーをなくします。
nofooter タイムラインのフッターやツイートボックスをなくします。
noborders ウィジェットの周りやツイートの間のボーダー(境界線)をなくします。
transparent タイムラインの背景を透明にします。

ヘッダー&フッターを非表示するとこんな感じに表示できます。

Twitterタイムライン、タイトルとリプライ部分の非表示

「data-chrome」以外は「data-border-color」で境界線の色の変更が可能です。
詳しくは公式サイトを確認してください。

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