エンジニアブログ

RSS

自由にデザインできるカウンタ付ツイートボタンを作ってみた

tweets admin PHPTwitterWordPress

最近流行ってるツイッターのカウンター付のツイートボタン・・・。
コーディング工房のエンジニアブログにも実装してみました!

ツイート数カウンタ

しかし、実装したとは言っても、公式のツイートボタンTOPSYなどはデザインを自由に変えられるものでは無かったので、公式のツイートボタンのJavascriptを軽く覗いて自分で作ってみました。

今回はその作り方をご紹介。
とりあえずWordpress用の作り方です。ちょっと応用するだけで何にでも利用できますが。


まず、function.phpに引数に指定されたURLが何回ツイートされているかを調べる関数を作ります。
Twitter公式のAPIにアクセスして取得するだけなのでとっても簡単。


function.php :
function get_twitter_count($url) {
	$json = file_get_contents("http://urls.api.twitter.com/1/urls/count.json?url=".urlencode($url));
	$data = json_decode($json, true);
	return $data[count];
}

テンプレート内からこの関数get_twitter_count($url)を呼び出すだけで、$urlに指定したページが何回つぶやかれているかが返り値として戻ってきます。
あとはそのカウンターにツイートのためのリンクを張るだけ。


テンプレート:
<?php $tweet_url = "http://twitter.com/share?url=".get_permalink()."&text=".urlencode(get_the_title()."|".get_option('blogname')); ?>
<a href="javascript:void(0);" onclick="window.open(
	'<?php echo $tweet_url ?>',
	'twitter_tweet',
	'left='+Math.round((screen.width/2)-225)+',
	top=100,
	width=550,
	height=450,
	personalbar=0,
	toolbar=0,
	scrollbars=1,
	resizable=1'
	)"><?php echo get_twitter_count(get_permalink()) ?> tweets</a>

ループ内であれば、このソースを表示させたい箇所に記述するだけで完成です。
一応、新設設計としてJavascriptのwindow.open関数を利用してツイート画面が出るようなコードにしています。
表示位置や高さなどはご自由に調節して下さい。(hrefに直接指定でも良いかと)

ポイントは、a要素内の<?php echo get_twitter_count(get_permalink()) ?> tweets$tweet_urlという変数です。
この記述でツイート数が表示され、$tweet_urlにTwitter公式の共有機能(つぶやき)へのURLが格納されます。

URL中のtextという引数に、つぶやく時に自動的に入力される文字列を設定できます。
ここでは、「記事タイトル|ブログ名」という書式で設定しています。

Twitterで共有

応用次第でWordpressに限らず利用できますし、CSSを使ったりしていくらでも自由にデザインが変えられるので是非お試しを!