ブログにTwitterボタンを付ける方法
Webサイトの訪問者を増やすためには、ソーシャル機能の活用は欠かせません。そこで先週末に少しだけこのブログの機能追加をしました。日付欄の右に付いているように、はてなブックマーク、Del.icio.us、そしてTwitterに対応したボタンを追加したのです。
はてなブックマークやDel.icio.usのボタンは、それぞれのWebサイトにボタンの作り方が紹介されています。
はてなブックマークは、このページでブログ別にボタンの追加方法が紹介されています。
Del.icio.usでは、このページにボタンの追加方法が紹介されています。Del.icio.usの場合はどのブログでも共通の方法ですね。
追記：Yahoo！ブックマークとLivedoorクリップのボタン設置については、それぞれ以下のページで紹介されています。
追記ここまで。
ところがTwitterボタンの追加方法はTwitterのサイトには書いてありませんでした。いくつか参考になるサイトはあったのですが、いちばん分かりやすかったのが次のWebサイトの説明です。
Twitterボタンはこういう仕組みだそうです。
http://twitter.com/home?status=XXX
このXXXにURLエンコードした文字列を入れれば、その内容がTwitterのテキストエリアに表示される、というもの。URLエンコード処理が抜けたままTwitterボタンの作成方法を紹介しているWebサイトもありましたが、リンクとして表現するのですからURLエンコードは必要だと思います。
あとは、このブログで使っているMovableTypeのMTタグでこの機能を再現すればいいだけです。以下のように組んでみました。
<a href="http://twitter.com/home?status=
<$MTEntryTitle encode_url="1"$>%20
<$MTEntryLink encode_url="1"$>"
target="_blank">
<img title="この記事についてTwitterでつぶやく"
src="icon_twitter.png">
</a>
それからTwitterボタンの素材を探したのですが、ほかのボタンとサイズが揃ったいいものが見つからなかったで、自分でTwitterのアイコンを少し加工して作ってみました。もしご希望の方がいましたら、ご自由にコピペして使っていただいてかまいません。
Twitterボタンでこのブログのことをつぶやいてみてください！
Junichi Niino（jniino）
Trackbacks （TrackbackURL:http://www.publickey1.jp/mt/mt-tb.cgi/122）
Comments