いいねボタンとGoogle+1ボタンも付けたのでメモ

主旨:ソーシャルボタン的なものを付けてみたいが、ほとんどのページに反応がない泡沫サイトなので0のときはカウント数を表示せず、1以上の場合だけ表示するようにしたい。

(2012.4.4追記)Facebook公式のいいねボタンで “Layout Style” を “button_count” にした場合、希望する動作をしてくれるようになったみたいなので、いいねボタンは公式のものを設置することにしました。

social_button_style
サンプル

毎度のことですが私はシロウトですので、「とりあえず動くしFirefoxのエラーコンソールでエラーが出ないからOKかなぁ〜」という感じでやってますのでご了承ください。

Facebook いいね(Like)ボタン

Like Button – Facebook開発者でコード取得できるのですが、カウント表示しない設定がないみたいなのでHTMLとCSSだけで作るFacebookの「いいね!(like)」ボタン : web memo.Ver.2を参考にボタン設置しました。この方法だとFacebookとの連携が十分でないとか、Google Analyticsでいいね!ボタンのアクションを計測する方法が使えなかったりするみたいですが、とりあえずそこは考えません。

カウント数取得は後でまとめて書きます。

Google +1 ボタン

+1 ボタンをサイトに追加 – +1 button API – Google Codeにありますが、言語設定を英語にすると新しい非同期コードが取得できる(記事公開時点)のでそちらのほうがよさげ。カウント表示しないものを使います。

カウント数取得

Shared CountのAPIでFacebookとGoogle +1のカウント(ついでにTwitterとかDeliciousなども)が同時に取得できるので今回はこれを使わせてもらいました。

タグ設置して(下記はWordpressの場合)

<a class="fb-like" href="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>" onclick="javascript:window.open('http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>' ,null ,'width=450 ,height=250'); return false;" rel="nofollow">いいね!</a><span id="fb_likes"></span>
<div class="g-plusone" data-size="medium" data-count="false"></div><span id="ggl_plusones"></span>

以下のJSファイルをどこかで読み込んで(注:現ページのURIはlink rel=canonicalから取ってきてます)

jQuery(document).ready(function($){
	$.getJSON("//sharedcount.appspot.com/?url="+jQuery("link[rel=canonical]").attr("href")+"&callback=?", function(data){
		if ( data.Facebook.like_count > 0 ) {
			$("#fb_likes").html('<span>' + data.Facebook.like_count + '</span>');
		}
		if ( data.GooglePlusOne > 0 ) {
			$("#ggl_plusones").html('<span>' + data.GooglePlusOne + '</span>');
		}
	});
});

カウント表示部分のCSSはこんな感じ。吹き出しデザインは枠線付きの吹き出し – Weblog – hail2u.netより。公式のデザインに近くなるようにはしてますがあまり厳密にやってません。Firefox6とChromeとIE9で確認。

span#fb_likes > span {
	display: inline-block;
	font-size: 12px;
	font-family:"lucida grande",tahoma,verdana,arial,'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif;
	position: relative;
	margin: 0 0 0 5px;
	padding: 0px 6px;
	background: #efefef;
	border: solid 1px #afafaf;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	height: 16px;
	line-height: 16px;
	text-decoration: none;
	color: #333;
}
span#fb_likes > span:before {
	content: "";
	border-top: 4px solid transparent;
	border-right: 4px solid #afafaf; 
	position: absolute;
	display: inline-block;
	top: 4px;
	left: -5px;
	width: 0;
	height: 0; 
}
span#fb_likes > span:after {
	content: "";
	border-top: 4px solid transparent;
	border-right: 4px solid #efefef; 
	position: absolute;
	display: inline-block;
	top: 4px;
	left: -4px;
	width: 0;
	height: 0; 
}
div.g-plusone {display: inline-block;}
span#ggl_plusones > span {
	display: inline-block;
	font-size: 14px;
	position: relative;
	margin: 1px 0 1px 5px;
	padding: 0px 6px;
	background: #ffffff;
	border: solid 1px #cfcfcf;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	height: 20px;
	line-height: 20px;
	text-decoration: none;
	color: #333;
}
span#ggl_plusones > span:before {
	content: "";
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-right: 6px solid #cfcfcf; 
	position: absolute;
	display: inline-block;
	top: 5px;
	left: -6px;
	width: 0;
	height: 0; 
}
span#ggl_plusones > span:after {
	content: "";
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-right: 6px solid #ffffff; 
	position: absolute;
	display: inline-block;
	top: 5px;
	left: -4px;
	width: 0;
	height: 0; 
}

もっとスマートなやり方があったら教えて!

コメント

  1. keigo より:

    Shared Count の方が動いてないみたいですね。
    mixiのイイネボタンのカウント数の取得方法も探していたのですが、見つからないですね・・・。

  2. むーむー より:

    このページでは動いてる(Facebookのいいねが1ついてます)みたいですけどそういう意味ではないですかね…?

    mixiのほう軽く探してみましたが、カウント取得のみのAPIは確かに見つからないですね。
    公式のボタン使うしかないのかも。

%d人のブロガーが「いいね」をつけました。