「ツイートする」ボタンと「Tweet数」表示サービスまとめ＋(FC2)ブログへの設置方法

先日Facebookの「いいね！」ボタンを追加したので、ついでにブログに設置してるTwitterの「Tweet（ツイートする）」ボタンも更新しようと調べてみたところ、今更ながら色々とサービスがあることを知った。まあせっかくの機会だと思ったので、各種ブログサービスに設置できる「Tweet（ツイートする）」ボタンと「Tweet数」を表示できるツールをまとめてみた。

ブログのテンプレートなどに貼り付けるコードの凡例も紹介しているので、各種ブログサービスの変数に書き換えれば使えるはず。ただFC2ブログだけはここで使用しているブログなので、そのままテンプレートにコピーして使えるコードを併記しておきます。よろしければどうぞ。（利用方法はテンプレートの<!--topentry--> と <!--/topentry-->の間の好きな場所にコードを貼り付けすればOK。）

汎用「Tweet（ツイートする）ボタン」コード

どこのサービスも使わず、HTMLのリンクタグだけでTweetする機能を実現したもの。あくまで設置したブログやサイトのHTMLで完結しているため、外部サービスのサーバダウンなどで利用できなくなったり重くなったりする可能性がないのがメリット。

画像版

表示サンプル

tweet

コード例
<a href="http://twitter.com/home?status=[記事のタイトル]%20[記事のURL]" title="tweetする"><img src="[画像URL]" alt="tweet" style="border: none;" /></a>
FC2版コード例
<a href="http://twitter.com/home?status=<%topentry_enc_utftitle>%20<%topentry_enc_link>" title="tweetする"><img src="[画像URL]" alt="tweet" style="border: none;" /></a>

テキスト版

表示サンプル

ツイートする

コード例
<a href="http://twitter.com/home?status=[記事のタイトル]%20[記事のURL]" title="Twitterに投稿する">ツイートする</a>
FC2版コード例
<a href="http://twitter.com/home?status=<%topentry_enc_utftitle>%20<%topentry_enc_link>" title="Twitterに投稿する">ツイートする</a>

注意点は記事のタイトルがUTF-8でエンコードされていないと文字化けすることで、FC2ブログのように「UTF-8でエンコードされた記事タイトルを表示できる変数」がない場合はそのままでは使えないかも知れないというところ。（記事というかブログサービス自体がUTF-8ならば、あるいはそのままいけるかもしれない。）そういうときは以下のようにJavaScriptでURLエンコードする必要がある。

<script type="text/javascript">
<!--
document.write('<a href="http://twitter.com/home?status=' + encodeURIComponent('[記事のタイトル]') + '%20[記事のURL]" title="tweetする"><img src="[画像URL]" alt="tweet" style="border: none;" /></a>'); 
// -->
</script>

公式Tweet（ツイートする）ボタン

Twitter公式で用意されているボタン。URLは投稿時に「t.co」で短縮される。また、おすすめユーザーを設定しておくことができ、例えば自分のアカウントを入れてフォローを促すこともできる。

Tweet数カウント機能も標準搭載しているものの、収集率があまり良くないらしくカウント数は少なめ。カウント数のリンク先はTwitterの標準検索機能でURLをサーチしたページになっているので、「発言が少し古くなるとすぐ出てこなくなる」という弱点もあり。

日本語+垂直タイプ（vertical）

表示サンプル
コード例
<a href="http://twitter.com/share" class="twitter-share-button" data-url="[記事のURL]" data-text="[記事のタイトル]" data-via="[Twitterアカウント名]" data-count="vertical" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>

Twitterアカウントがない、あるいは含めたくない場合は「data-via="[Twitterアカウント名]"」を削除する。

別バージョンコード例

URLにクエリを渡してXHTML 1.0などでもValidにできるタイプ。

<a href="http://twitter.com/share?url=[記事のURL]&amp;text=[記事のタイトル]&amp;via=[Twitterアカウント名]&amp;count=vertical&amp;lang=ja" class="twitter-share-button">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>

Twitterアカウントがない、あるいは含めたくない場合は「&amp;via=[Twitterアカウント名]」を削除。

FC2ブログ対応コード例
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>" data-text="<%topentry_title>" data-via="[Twitterアカウント名]" data-count="vertical" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
FC2ブログ対応別バージョンコード例
<a href="http://twitter.com/share?url=<%topentry_enc_link>&amp;text=<%topentry_enc_utftitle>&amp;via=[Twitterアカウント名]&amp;count=vertical&amp;lang=ja" class="twitter-share-button">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>

各種注意点は上の汎用コードと同じ。

英語+水平タイプ（horizontal）

表示サンプル
コード例
<a href="http://twitter.com/share" class="twitter-share-button" data-url="[記事のURL]" data-text="[記事のタイトル]" data-via="[Twitterアカウント名]" data-count="horizontal" data-lang="en">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>

各種注意点は上のverticalのコードと同じ。

別バージョンコード例

URLにクエリを渡してXHTML 1.0などでもValidにできるタイプ。

<a href="http://twitter.com/share?url=[記事のURL]&amp;text=[記事のタイトル]&amp;via=[Twitterアカウント名]&amp;count=horizontal&amp;lang=en" class="twitter-share-button">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
FC2ブログ対応コード例
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>" data-text="<%topentry_title>" data-via="[Twitterアカウント名]" data-count="horizontal" data-lang="en">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
FC2ブログ対応別バージョンコード例
<a href="http://twitter.com/share?url=<%topentry_enc_link>&amp;text=<%topentry_enc_utftitle>&amp;via=[Twitterアカウント名]&amp;count=horizontal&amp;lang=en" class="twitter-share-button">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>

任意の画像や文字列をTweetボタンにしたい場合

公式Tweetボタンはカスタマイズにも対応していて、標準のボタンを使わずに好きな画像や文字をボタンにすることも可能になっている。この場合は標準タイプボタンの表示に使われている「widgets.js」をScriptタグで呼び出す必要すらなく、「http://twitter.com/share」に直接URLやタイトルをクエリとして渡してしまえばいい。（そもそもボタンが書き換わるのは「twitter-share-button」というクラスをリンクに当てているため。）

表示サンプル

好きなテキストや画像でツイートボタンを作る

コード例
<a href="http://twitter.com/share?url=[記事のURL]&amp;text=[記事のタイトル]&amp;via=[Twitterアカウント名]" target="_blank">[任意のテキスト or 画像タグ]</a>

Twitterアカウント表示が不要な場合は、上の標準タイプボタンと同じように「&amp;via～」を消してしまえばいい。また記事のURLはどの文字コードでも関係ないものの、記事のタイトルはページがUTF-8でない場合はURLエスケープ（UTF-8でエンコード）しないと、エラーが発生して正常に動作しないので注意。

FC2ブログ対応コード例
<a href="http://twitter.com/share?url=<%topentry_enc_link>&amp;text=<%topentry_enc_utftitle>&amp;via=[Twitterアカウント名]" target="_blank">[任意のテキスト or 画像タグ]</a>

このカスタマイズボタンでTweetした場合でも「t.co」の短縮URLが使用できるため、最初に紹介した「http://twitter.com/home?status～」を使ったHTMLタグのみのボタンより使い勝手がいいかもしれない。

tweetbuzz

Tweet数の表示とそのURLが含まれるTweetを検索できるサービスのひとつ。日本のサービスなので当然リンク先も日本語。Tweet機能はなし。

収集率はそこそこと感じるものの、一定期間で古いTweetは表示されなくなるらしく「カウント数はあるがリンク先に飛ぶとTweetがまったく表示されない」という事態が特に古めの記事だと起こりがち。ページや画像自体は軽く、落ちていることもあまりないのは利点。

表示サンプル

コード例

<a href="http://tweetbuzz.jp/redirect?url=[記事のURL]"><img src="http://tools.tweetbuzz.jp/imgcount?url=[記事のURL]" style="border: none;" /></a>

FC2ブログ対応コード例

<a href="http://tweetbuzz.jp/redirect?url=<%topentry_link>"><img src="http://tools.tweetbuzz.jp/imgcount?url=<%topentry_link>" style="border: none;" /></a>

tweetmeme

サービスが終了した模様。意味がなくなったのでサンプル等は削除。

TOPSY

サイト自体は運営しているものの、Tweet数を表示するボタンのサービスは終了してしまった。意味がなくなったのでサンプル等は削除。

backtype

Twitter社に買収されたとのことで、サービスが終了した模様。意味がなくなったのでサンプル等は削除。

つぶやきボタン

Tweetボタン + Tweet数が表示できる日本のサービス。ボタン自体も「つぶやく」と標準で日本語表示されている。Tweetボタンは「記事タイトル - bit.lyで短縮されたURL」という形で投稿され、最後にそのURLが含まれるPOST一覧へのページリンクが「2bu.in」という短縮URLで付加される。ただTweet数カウントの基準がいまいち不明で、かなり少なく表示されるのが気になるところかもしれない。

メリットとしては貼り付けコードにJavaScriptが含まれていないので、JavaScriptの貼り付けを禁止してるブログサービスなどでも使用できる点。公式でもセールスポイントが「ブログ１年生でも設置できる」と書かれているし、日本のブログサービスの多くが動作確認されているので「ブログサービスに制限が多い」「初心者で他のサービスの利用方法がよくわからない」という人に向いているのでは。

表示サンプル

Twitter「つぶやく」ボタン

コード例は「登録時に固有のIDが割り当てられる」「貼り付けコードも登録時にそのままコピーすればいいものが表示される」という点からなし。いちおうFC2ブログについてだけ書いておくと、登録した後に表示されるコードのブログURL（http://[ユーザID].blogXX.fc2.com/）をすべて「<%topentry_link>」に置き換えるだけで正常に動くはず。