「Google +1 Button」のカンタン設置方法

スポンサーリンク

Web業界で働く人たちなら既知のものかもしれませんが、それ以外の方々にはまだ馴染みの薄いものじゃないかと思う「Google +1 Button」。

かみ砕くとGoogle版の「いいね!」ボタンみたいなものだと言えますかね。
まぁ似たようなものだと考えてもらえると解りやすいかなと。

で。このGoogle +1 Buttonを設置する方法がGoogleから公開されていますので、設置方法をば。

設置方法

最も簡単に設置するのであれば、Googleが用意しているジェネレータを使うのがいいですね。

Google +1 Buttonhttp://www.google.com/webmasters/+1/button/index.html

ここにアクセスして、ボタンのサイズや言語を選んで、生成されたコードを、+1 Buttonを表示したいページに加えればOKです。

一応コードも記載しておきましょう。
まず、以下のコードをbodyの閉じタグ直前に挿入します。

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

日本語で利用したい場合は、

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'ja'} </script>

とすればいいのですが、今のところ、英語だろうと日本語だろうと基本的に何も変わりませんので、どっちゃでもいいっちゃいいと思います。

次に+1 Buttonを表示したい場所に以下のコードを挿入します。

<g:plusone></g:plusone>

ちなみにこのコードはボタンのサイズは標準で高さ24pxになるので、その他のTweet ButtonやLike Buttonなどに合わせるということであれば、高さ20pxのmediumサイズを選ぶか、大きなボタンを使っているなら高さ60pxのtallサイズを選ぶといいですね。

<g:plusone size="medium"></g:plusone> <g:plusone size="tall"></g:plusone>

また、ブログでこのボタンを利用する場合は、記事ごとに設置したいということになると思うので、その場合はURLを指定しましょう。

<g:plusone href="[指定のURL]"></g:plusone>

これで問題なく表示されると思います。

一応、当ブログでもTweet ButtonやTumblr Button、Like Buttonの並びに追加してみましたが、現状まだこの+1 Buttonの情報はGoogle.comの検索でしか表示されないということなので、どこまで意味があるのかちと微妙な感じです。

まぁそのうち日本版にも出てくるのは間違いないので、今のうちから対応しておくといいかもしれませんね。

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく