今ちょっと新作webサービス作ってるんですが、自分で作ったオリジナル画像やフリー素材などで「Google+1ボタン」を実装する場合、どこにリンク張ればいいのか分からんくて。

いろいろ情報を探してみたところ、さっきやっとこさ判明したので、イキオイでシェアしまーす！

んで、それだけじゃアレだから、ついでに「twitter」と「facebook」と「はてなブックマーク」でも同様の方法をメモメモしときます。

オリジナルの自作画像で各SNSのシェア系ボタンを実装する方法

Google+1の場合

2012年2月21日現在、Google+1へ追加するためには、正規の方法（ココからスクリプト取って張る方法）しか提供されていないようです。

業を煮やした海外の方々が考えた方法は、「正規のスクリプトで生成されたリンクボタンを、position:absoluteを使って自作画像の真上に配置して、正規ボタンをopacity:0で透過する」という豪快なチカラワザ。

以下にサンプルコードを記しますが、ブラウザの仕様や使われるトコのCSS次第では上手くいかない場合も十分考えられますので、その辺はご容赦下さいまし。

<div class="google_plus">
	<div class="hide_box">
		<g:plusone annotation="none"></g:plusone>
		<script type="text/javascript">
		(function() {
			var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
			po.src = 'https://apis.google.com/js/plusone.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
		})();
		</script>
	</div>
	<img src="オリジナル画像のパス" alt="ココはお好きにどぞ" class="my_google_plus_image" />
</div>

.google_plus {
	position:relative;
}
.google_plus .hide_box {
	// 表示位置の固定
	position:absolute;
	top:0;
	left:0;

	// 重なりの順番
	z-index:3;

	// 透過
	opacity:0;
	filter:alpha(opacity=0);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

	// 読み出す正規画像のサイズ（下記例は標準サイズ）
	height:32px;
	width:20px;
}
.google_plus .my_google_plus_image {
	// 表示位置の固定
	position:absolute;
	top:0;
	left:0;

	// 重なりの順番
	z-index:2;
}

こんな感じで正規の画像を透過して使うので、自作画像を作る際には、もし可能なら正規画像と適度にサイズを合わせた方が吉。

ちなみに現在の正規画像は［H:24px W:15］［H:32px W:20］［H:38px W:24］［H:50px W:24］の４種類が提供されています。

<a href="javascript:(function(){window.open('https://plusone.google.com/_/+1/confirm?hl=ja&amp;url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title),'_blank');})();">画像</a>

Google+ Shareの場合

<a href="https://plus.google.com/share?url=ゆーあーるえる" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
	<img src="オリジナル画像のパス" alt="ココはお好きにどぞ" />
</a>

「ゆーあーるえる」の部分に、シェアしたいサイトのURLを記述すればOK！

twitterの場合

<a href="http://twitter.com/home?status=投稿する文章">
	<img src="オリジナル画像のパス" alt="ココはお好きにどぞ" />
</a>

「投稿する文章」は、URLエンコーディングとかしない素のままの文章でOK！

facebookの場合

<a href="http://www.facebook.com/share.php?u=ゆーあーるえる&amp;t=投稿するURLエンコード済みの文章">
	<img src="オリジナル画像のパス" alt="ココはお好きにどぞ" />
</a>

「ゆーあーるえる」の部分にはシェアしたいサイトのURLを記述、「投稿するURLエンコード済みの文章」には投稿したい文章をURLエンコーディングしたモノ（%e8%a6%8b%e3%81%a1%e3%82%83%e3%82%a4%e3%83%a4%2f%2f%2f みたいなの）を記述！

はてなブックマークの場合

<a href="http://b.hatena.ne.jp/append?ゆーあーるえる">
	<img src="オリジナル画像のパス" alt="ココはお好きにどぞ" />
</a>

「ゆーあーるえる」の部分に、シェアしたいサイトのURLを記述すればOK！