Twitter のウィジェットを任意のタイミングでロードする方法

技術 (Javascript) のお話です。

Twitter が公式サイトで配布しているウィジェットを使うと、自分のブログやサイトにタイムラインや検索結果を表示させることができます。

http://twitter.com/goodies/widgets

たとえばこんな感じ。

ですがこのウィジェット、Javascript が読み込まれたタイミングでタグを出力している(document.writeしている) ため、任意のタイミングで (非同期に) ロードすることができません。

で、なんかいい方法はないかなと思ってソースコードを眺めてみたら(*)、オプションに任意の id を文字列として指定してやることで、タグの出力をせずに指定された id に埋め込むようになっていました。

具体的には、

widget.js はあらかじめ読み込んでおく。 (<script src="http://widgets.twimg.com/j/2/widget.js"></script> は先に読み込まれるようにする)

埋め込みコードを任意のタイミングで実行する。このとき、 TWTR.widget()の引数に埋め込み先となる id を文字列で指定する。

/*
たとえば、 に埋め込む場合
*/
function loadTweets(){
  new TWTR.Widget({
    id: "tweets", // ← id パラメーターを追加する
    version: 2,
    type: 'profile',
    rpp: 4,
    interval: 6000,
    width: 250,
    height: 300,
    theme: {
      shell: {
        background: '#333333',
        color: '#ffffff'
      },
      tweets: {
        background: '#000000',
        color: '#ffffff',
        links: '#4aed05'
      }
    },
    features: {
      scrollbar: false,
      loop: false,
      live: false,
      hashtags: true,
      timestamp: true,
      avatars: false,
      behavior: 'all'
    }
  }).render().setUser('hajime').start();
}

以上で、任意のタイミングでウィジェットを実行させることができるようになります。

たとえば、動的に作成したノードにウィジェットを表示させたり、ウィジェットの作成を遅延実行させてページの読み込みを早くさせたい場合なんかに使えると思います。試してみてください。

であ、また。

(*) どっかにドキュメントがありそうですが、見当たらなかったので・・・

Yaks