WordPressにGoogle +1 ボタンを設置

いやー、ボタンブームですね…。 Twitterも新たにフォローボタンの提供を開始した様です。

WebOS Goodiesさんで紹介されていて、あまりにも簡単そうだったのでこのブログにも設置してみました。 元々、はてブやTwitterのボタン設置はWEBLEさんで紹介されてるものを参考にしていたので、+1の追加はものすごく簡単でした!

以下、手順などなど。

Googleにてボタン用タグを作成

Googleの+1ページにてタグを作成します。 pluse-one-gen

設定する項目は以下2つだけ!

  • Size:(Small,Medium,Standard,Tall)の4種類から選択可能。# 僕はMediumにしました。
  • Language:アノテーション機能なるものに関係するようです。(現在は英語のみ対応)

ここで作られるタグは2つ。

  • <script>:ボタン機能の核
  • <g:pluseone>:ボタンのプレースホルダ

ボタンリストにタグを追加

ソーシャル系ボタンをいれているリストに上記で作成したタグを追加します。 ※WordPressのpermalinkを指定する為、href属性を追加しています。

こんなコードになります。 [code lang=“html” highlight=“13,14,15,16”] <ul class="social-buttons"> <li class="hatebu"> <!– hatena –> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエント
リーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="
20" height="20" style="border: none;" /></a> </li> <li class="twitter-share"> <!– Twitter share –> <a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink();?>" data-text="<?php the_title();?>" data-count="horizon
tal" data-lang="ja">Tweet</a> </li> <li class="plusone"> <!– Google Plusone –> <g:plusone size="medium" href="<?php the_permalink();?>"></g:plusone> </li> <li> <!– FB like –> <iframe src="http://www.facebook.com/plugins/like.php?locale=en_US&href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=buttoncount&amp;show
faces=true&amp;width=120&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; w
idth:120px; height:21px;" allowTransparency="true"></iframe> </li> </ul> [/code]

<script>を読み込む

僕はフッターにScriptをまとめていたのでフッター部分に追加しました。


&lt;script type=&quot;text/javascript&quot; src=&quot;http://apis.google.com/js/plusone.js&quot;&gt;{lang: 'ja'}&lt;/script&gt;

気になった事など

右側のマージンがうざい。 設置してみたところ、+1ボタンの右側にできる余白が若干デカイ。 恐らくカウンターが3桁以上になる事を踏まえ、余白をとっているのだろうけど…このブログには必要ないww

ということでマイナスマージンを使った突貫工事で済ませました。

+1って、結局何がおいしいの?

設置した後になって疑問に…。 +1ボタンを設置する事で、どこにどんな事が表示されるのか。 FacebookのlikeボタンならFacebookのウォールだったり、Twitterならタイムラインに表示される。 じゃぁ+1はどこに???

などなど、そんな疑問は+1 ボタンについて に紹介されてました

要するに良くわかってないす。笑

+1 しちゃってください!

SHOTA

I'm WEB developer

Tokyo, Japan http://senta.me/