Own products

  • 新規事業のアイディア創造機

Material

オリジナルの自作画像でGoogle+1ボタンを実装する方法

この記事の読了時間:約655

  • このエントリーをはてなブックマークに追加
(12.02/21 16:00 追記)以前掲載していた「Google+1の実装方法」は、正しくは「Google+ Shareの実装方法」でした。改めて「Google+1の実装方法」を追加するとともに、謝意を表します。

今ちょっと新作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]の4種類が提供されています。

(12.04/08 15:00 追記)なんか見つけた!

<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の場合

(12.09/03 13:00 追記)以前掲載していた方法が古くなり、新しい方法が公式公開されているとご教示頂きました。改めて書きなおすともに、謝意を表します。
<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!

うーし、コレで集中できるっ!

ちょこっと便利系webサービス、近日中に公開予定☆

  • このエントリーをはてなブックマークに追加

コメント一覧

6 Responses to [オリジナルの自作画像でGoogle+1ボタンを実装する方法]

ななし より:

2012/02/13 10:32 AM

Google+1のソース間違ってないですか?

smkn より:

2012/02/14 1:43 AM

>ななし 様
うーんと、多分だいじょぶだと思うんですが。。。
もしどこがおかしいかご存知でしたら、ご教示いただけませんか?

なかた より:

2012/02/21 1:45 PM

Google+1ボタンのソースですが、設定したリンク経由で、共有ボタンを押すと、プロフィールの投稿には表示されますが、+1には表示されていない感じでした。。。何か+1側にも表示する方法はないでしょうか?

smkn より:

2012/02/21 4:47 PM

>なかた 様
そのコメントで自分の勘違いに気付きました!ありがとーございますっ!

掲載してたのは Google +1 じゃなくて Google + でシェアする方法でした。

改めて Google +1 で当該方法を調べたんですが、APIも提供されてないので、国内はおろか海外でも困ってるみたいです。。。

んで、海外の方々が使ってる解決方法を掲載しました。使いにくさは否めませんが、お力になれれば幸いです☆

通りすがり より:

2012/09/03 12:50 PM

google+シェアのコードが変更になったようです。
https://developers.google.com/+/plugins/share/#sharelink

smkn より:

2012/09/03 1:02 PM

> 通りすがり さん
ご教示ありがとーございます!さっそく書きなおしておきました。
今後とも何卒よろしくお願い致しますです m(_ _)m

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

CAPTCHA


  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須

    CAPTCHA

    captcha

    Blog parts

    Affiliate