Twitterの「ツイート」ボタンをオリジナルデザインに変更する

Publish:

Category:PHP, JavaScript

Tag:,

  • Hatena Bookmark:
  • Twitter:
Twitterの「ツイート」ボタンをオリジナルで作る

Webサイトをデザインするときに、デザインに合わせて、ツイート数取得したり、ツイートしたりと「Twitter」公式ボタンと同じような機能を持ちつつ、自前のボタン画像で「ツイート」ボタンを自作したいなーと思ったときに調べた事のメモを兼ねて。

ちなみに、公式ボタンは「Twitter / ツイートボタン」から取得できます。

※「人力検索はてな」で質問解決されていた事項があったので2011年11月8日に加筆・修正しています。

ページ内見出し一覧

「ツイート」ボタンをつくる

Twitterの「ツイート」ボタン

公式ボタンでいう「ツイートする」の部分。

オリジナルのボタン画像を用意して、その画像にツイートしたいページの情報を含んだリンクを貼る。ツイート数の表示はいらないよという場合はこの作業だけ。
以下、見易いように改行してます。実際は1行でOK。

<a href="http://twitter.com/share?text=該当ページのタイトル(挿入するテキストなど)&url=ツイートしたいWebページのURL">
<img src="用意した画像のパス">
</a>

ページのタイトルやURLは、URLエンコードする。
他にもツイートの最後に「via @アカウント名」をつけることができます。
つける場合は以下の通り。見易いように改行してます。実際は1行でOK。

<a href="http://twitter.com/share?text=該当ページのタイトル(挿入するテキストなど)&amp;url=ツイートしたいWebページのURL&via=Twitterアカウント名">
<img src="用意した画像のパス">
</a>

結果、デフォルトのツイート欄は以下のようになる。(下記はこのページをツイートした場合)

ツイート送信画面

ツイート数取得方法

TwitterのAPIを使えば、JavaScriptやPHPでツイート数のみを取得することができる。

ツイート数取得API

http://urls.api.twitter.com/1/urls/count.json?url=ツイート数を取得したいWebページのURL

取得データ形式

上記APIでデータを取得するとJSON形式でデータが返ってくる。
以下は現在indigonote.comのツイート数を取得した時に返ってきたデータ。

{"count":12,"url":"http://indigonote.com/"}

サンプル/JavaScriptを使った「ツイート」ボタン

JavaScriptを使って取得。jQueryで取得する場合はjQuery版を参照。

JavaScript用関数

var tweetCount = function(_id ,_url) {
	if(!_id)	return;
	var pageURL = (_url) ? _url : location.href;
	pageURL = encodeURI(pageURL);
	var callback_name = 'jsonp_' + _id;
	var url = 'http://urls.api.twitter.com/1/urls/count.json?url=' + pageURL + '&callback=' + callback_name  + '&noncache=' + new Date();
	//JSONの読み込み
	var target = document.createElement('script');
	target.charset = 'utf-8';
	target.src = url;
	document.body.appendChild(target);
	window[callback_name] = function(data){
		//読み込み結果
		document.getElementById(_id).innerHTML = data.count;
	};
}

関数の引数について

tweetCount( 'ツイート数表示エレメントのID名', 'ツイート数を取得したいページのURL' );
ツイート数表示エレメントのID名
取得したツイート数を表示するエレメントのIDの名前を入力(必須)。
ツイート数を取得したいページのURL
省略可能。
省略した場合は実行ページの数を取得する。

JavaScriptを使ったツイート数取得デモ

デモでページでツイート数が取得できているかどうか確認。

Javascript版デモページを別ウィンドウで開く

サンプル/jQueryを使った「ツイート」ボタン

jQueryを使って取得。

jQuery用関数

var tweetCount = function (_id, _url) {
	if(!_id)	return;
	var pageURL = (_url) ? _url : location.href;
	//JSONの読み込み
	$.ajax({
		type: 'GET',
		url: 'http://urls.api.twitter.com/1/urls/count.json',
		data: {
			url : encodeURI(pageURL),
			noncache: new Date()
		},
		dataType: 'jsonp',
		success: function(data) {
			//読み込み結果
			$('#' + _id).text(data.count);
		}
	});
}

関数の引数について

tweetCount( 'ツイート数表示エレメントのID名', 'ツイート数を取得したいページのURL' );
ツイート数表示エレメントのID名
取得したツイート数を表示するエレメントのIDの名前を入力(必須)。
ツイート数を取得したいページのURL
省略可能。
省略した場合は実行ページの数を取得する。

jQueryを使ったツイート数取得デモ

デモでページでツイート数が取得できているかどうか確認。

jQuery版デモページを別ウィンドウで開く

サンプル/PHPを使った「ツイート」ボタン

PHP用関数

function tweetCount($str = null) {
	if($str)	$url = $str;
	else	$url = ((!empty($_SERVER['HTTPS']))? "https://" : "http://").$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
	$json = file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url=' . rawurlencode($url), true). '&noncache=' . mktime();
	$data = json_decode($json, true);
	return $data[count];
}

関数の引数について

tweetCount('ツイート数を取得したいページのURL' );
ツイート数を取得したいページのURL
省略可能。
省略した場合は実行ページの数を取得する。

PHPを使ったツイート数取得デモ

デモでページでツイート数が取得できているかどうか確認。

PHP版デモページを別ウィンドウで開く

おまけ:「○○tweets」の画像でツイート数を表示したい

「ツイート」ボタンは要らない。それでもってJavaScriptもjQueryもPHPもよくわからんけどツイート数は表示したい場合は普通にイメージを呼び出すだけなのでこっちの方が簡単。
TweetBuzzのTweetカウンターを使います。
画像の大きさは1サイズ用意されていて、下部の赤い方である、はてブカウンターの中サイズとだいたい同じくらい。

6314 6314

以下コードは、見易いように改行してます。実際は1行でOK。

<a href="http://tweetbuzz.jp/redirect?url=ツイート数を取得したいページのURL">
<img src="http://tools.tweetbuzz.jp/imgcount?url=ツイート数を取得したいページのURL"/>
</a>

Comment [3]

はじめてコメントします。
javascript版を参考にさせていただいたのですが、
IEだとエラーがでてしまい、カウントも表示されません。
確認したブラウザはIE8です。他のブラウザは大丈夫でした。

自分で修正しようかと思ったのですが、いまいち解決法がよくわからなく
報告させていただきました。
わかりましたら、ぜひご教授いただければありがたいです^^。

アラン

>アランさん
お返事遅くなりました!
自分のIE8だと動いているのですが、オリジナルサイトへJS導入後のことでしょうか?
もし、導入後にエラーが出ている場合は導入の仕方にもよりけりなので何とも言えません…。
ですが、IE8からJavaScriptのデバッガーがブラウザに追加されていますので、一度そちらでエラーの原因を調べてみてくださいっ。

indigo

自分の作った画像で作るという事を簡単に出来ると考えていたのですが、思いのほか苦戦しており、困っていたところに、この記事へとたどり着きました。
おかげさまで理想のものが出来ました。有難うございました

藤太郎

Post Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Return to page top