Twitterからのアクセス数とRTを表示するボタン

公開日:2009/10/30
執筆者:sugane

以前の記事で、ブログ記事に Retweet ボタンを設置する方法を紹介しました。

最近ぼくが自分のブログに設置しているのは、Twitter からのアクセス数とRT 数を表示させるボタン。かなり気に入っています。

Twitter からのアクセス数を表示させる

Twitter からのアクセス数を表示させるにはJohn Resig さん作の、Easy Retweet Button というのを使います。

このボタンはTwitter全体からボタンが設置されているページへ、どのくらいのアクセスがこれまでにあったのかを表示してくれます。

使い方はまず、以下のソースをヘッダー内に入れます。

<script src="http://ejohn.org/files/retweet.js"></script>

次に、ボタンを表示させたい箇所に、以下のいずれかのコードを入れます。

数字とボタンを横並びにする場合
<a class="retweet self" href=""></a>

こんな感じになります。
John Resig - Easy Retweet Button side

数字とボタンを縦に並べる場合
<a class="retweet vert self" href=""></a>

こんな感じです。
John Resig - Easy Retweet Button vertical

href の後には当然、ボタンを設置するページのURLを、a タグ内にはアンカーテキストを記入します。

WordPressの場合は、以下のようなソースを記事ソース内に入れると良いでしょう。

<a class="retweet" href="<?php the_permalink() ?>" class="retweet"><?php the_title(); ?> by @あなたのTwitterアカウント名</a>

RTの数を表示させる

ぼくのブログでは BackType というサイトの RT ボタンを使っています。

この RT ボタンの良いところは、RTの数を表示してくれるだけでなく、ボタンをクリックすると、その記事をRTしてくれたつぶやきの一覧を表示してくれることです。だれが、どんなコメントをつけてつぶやいてくれたかを知ることが出来ます。こんな感じ。

設置方法は簡単。以下のソースをボタンを表示させたい場所に入れるだけ。

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

もしくは、パラメターを細かく設定することも可能です。ぼくのWordPressブログでは以下のようなソースを使っています。

<script type="text/javascript">
tweetcount_url = '<?php the_permalink() ?>';
tweetcount_title = '<?php the_title(); ?>';
tweetcount_src = 'RT @suganeseo:';
tweetcount_via = false;
tweetcount_links = true;
tweetcount_size = 'small';
tweetcount_background = 'FFFFFF';
tweetcount_border = 'CCCCCC';
tweetcount_api_key = '5c3bba3f5d77a46a13453091e36dc1cde4335e9299a1edeeaa3c31d193b33fda';
</script>
<script type="text/javascript" src="http://widgets.backtype.com/tweetcount.js"></script>

こんな感じで表示されます。
backtype rt

パラメターの詳細は本家ページを参照してください。

この記事が良かったと思ったらSphinn Japanへ投稿/投票お願いします。

この記事へのコメント

2 Comments »
    Comment by AWHITELAND
    2010/6/3@10:19 AM

    すごく勉強になりました。
    ありがとうございます!

    Comment by daoki
    2010/8/2@12:40 PM

    大変勉強になりました。
    早速自分で初めてみたWordPressを使ったブログに設置してみました。
    http://daoki.me/2010/07/digg-button-in-wordpress/

    WordPressの場合でも、class=”retweet vert self” とすれば、縦に並べる方法ができますね。
    これからも参考にささせていただきます、ありがとうございます!

Leave a comment