ページ

2010年11月30日

Tweetボタンを動的に作る

最近は至る所でTweetボタンを見かけます。Tweetボタンってこれね。


こんな感じのボタンはよく見かけます。で、今しこしこ作っているものはこの、Tweetボタンが憑いています。そして、WebSocketとかAJAXで動的にごりごりこのTweetボタンをつけたいのであります。Tweetボタン自体の説明は、公式サイトに事細かに書かれていています。基本はhtmlのaタグにクラス名をtwiiter-share-buttonってつけてhttp://platform.twitter.com/widgets.jsをロードしてあげれば、aタグがかっこいい(?)ボタンに生まれ変わります。これって、ドキュメントをロード後のこのクラスのaタグの要素に対して操作しています。ということは、AJAXとか、ドキュメントをロード後に追加したAタグは残念ながら今時のボタンにはなってくれません。

Google先生にお伺いすると、Creating Tweet Buttons Dynamicallyという記事に動的に追加する方法が書いてあります。jQueryを使っていますが、僕の作っているものもjQueryを使っているので、同じようなものです。記事のコードをそのままのせるのも悲しいので、AJAXでHTMLの断片がとれてきたものを加工することにします。

コードはこんな感じ。fragmentはAJAXで取得した断片をinsert_pointというIDの要素に追加しています。
var newelem = $("#insert_point").append(fragment);
newelem.find('a.twitter-share-button').each(function(i) {
    var thisTweetButton = new twttr.TweetButton($(this).get(0));
    thisTweetButton.render();
});

このfragmentの中にAタグの要素があります。こんな感じ。

<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="liris" data-lang="ja">Tweet</a>

それから

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

はヘッダーの中に一回書いとけばいいです。これで、動的にTweetボタンが追加されていきます。めでたし、めでたし。
まあ、こんな感じになるだけです。まだ、よく止まります。それから止めます。もし見るんだったらChromeかSafariの最新版かFirefox4.0ベータでプロキシのない環境だとちょっと楽しいかもよ。

でわでわ。

0 件のコメント: