Twitter Follow Badge を付けてみました

一昨年あたりからよく見かけるようになった Twitter Follow Badge を周回遅れになりながらもこのブログに導入してみました。今は雑多な内容しかありませんが、ぜひサイト右側のバッジから飛んでフォローしていただければと思います。

ところでこちらの Follow Badge ですが、ブログに埋め込む際、懐かしい感じの罠に引っかかったので備忘録的にどのような対処で乗り越えたかを残しておきます。

自分はいつも JavaScript のコードを head タグ内に書いていることもあって、自動生成された以下のコードも慣例通り head タグ内にそのまま書いてしまいました。

<!-- twitter follow badge by go2web20 -->
<script src='http://www.go2web20.net/twitterfollowbadge/1.0/badge.js' type='text/javascript'></script><script type='text/javascript' charset='utf-8'><!--
tfb.account = 'UnibaRD';
tfb.label = 'follow-us';
tfb.color = '#FF9e26';
tfb.side = 'r';
tfb.top = 136;
tfb.showbadge();
--></script>
<!-- end of twitter follow badge -->

そうしたらなんと動きません。デバッガで調べてみると DOM のロードが終わる前に JavaScript のコードが先に走ってしまって動作していないことがわかりました。jQuery ばかり使っているとつい忘れてしまいがちですね。こういう時の解決方法は何種類かあって

  1. DOM の構築が終わっているであろう body タグの終端に JavaScript のコードを置く
    → 大抵のブラウザでも動作する古めかしい方法だがモダンでない。(つまりダサい!)
  2. load イベントを使ってコードを実行する
    → ブラウザによっては画像を含むすべてのコンテンツがロードし終わるまで load イベントが着火しない。
  3. DOMContentLoad イベントを使ってコードを実行する
    → DOM の構築が終了した瞬間イベントが着火するが IE が対応していない。 (IE9 で対応予定)

1, 2 あたりが正攻法になると思います。自分は jQuery が大好きで仕方がないので jQuery.ready メソッド (動作的には DOMContentLoad とほぼ等価でクロスブラウザ対応) で解決することにしました。イベントの実行タイミング以外にも HTML 的に invalid なところもあったので最終的に以下のようなコードに修正して無事完了!

<!-- twitter follow badge by go2web20 -->
<script src="http://www.go2web20.net/twitterfollowbadge/1.0/badge.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function()
{
    tfb.account = 'UnibaRD';
    tfb.label = 'follow-us';
    tfb.color = '#FF9e26';
    tfb.side = 'r';
    tfb.top = 136;
    tfb.showbadge();
});
</script>
<!-- end of twitter follow badge -->

長々と書いてしまいましたが UnibaRD の Twitter を宜しくお願いしまーす。

@anywhere [サイトにtwit機能を追加出来るAPI]

初めましてこんにちは!
主にフロントのデザインやコーディングをやっている清水と申します。
宜しくお願いします!

ということで一つ目の記事は先日発表された@anywhereについての投稿です。
@anywhereを使用すればサイト上にtwitterの機能が追加できる便利なAPI。

機能としては
・usernameをオートリンク
・usernameの情報をカードで表示
・フォローボタン
・つぶやけるボックス
・ログイン/ログアウト機能
となっています。

詳しい仕様はこちら -> http://dev.twitter.com/anywhere/begin

というわけでUnibaRDのtwitterアカウントの紹介を含めて実装してみました。

@UnibaRD

DOMでセレクターを指定してあげれば後は自動的にリンクやフォローボタンが実装出来ます。

まずは@anywhereでStart using it nowから登録。
項目に沿って情報を入力して登録完了するとAPIキーが発行されます。
後はそれをコピーして埋め込むだけです。

<script src="http://platform.twitter.com/anywhere.js?id=某APIキー"></script>
 

usernameにオートリンクさせたい場合は以下のように記述します。
usernameの頭に@がついていないと実行されないので注意が必要です。

 <script type="text/javascript">
	twttr.anywhere(function(twitter) {
		twitter("某セレクター").linkifyUsers();
	});

アカウントの情報を表示させるには以下のように記述します。

	twttr.anywhere(function(twitter) {
		twitter.hovercards();
		twitter("某セレクター").hovercards();
	});
<div id="某セレクター">@某</div>

フォローボタンは以下のように記述します。

	twttr.anywhere(function(twitter) {
		twitter("某セレクター").followButton("@某");
	});
<div id="某セレクター"></div>

これだけで簡単に機能が追加出来るようになりました。
twitterのAPIにあまり明るくないのですが非常に簡単に実装出来ました!
ログイン/ログアウトとツイートボックスは時間がある時に実装してみたいと思います。

UstreamやATND等でこの機能を活用すれば、アカウント一覧のフォローボタンリスト等が作れるのではないかと思います。
アイディア次第で色々出来そうです!
こういったものを利用して何か作りたいですね。

末筆になりますが@UnibaRDを宜しくお願い致します!

※2010.04.22 スクリプトが記事以外にも影響を与えているため一時的にスクリプトを外しております。

preload preload preload