いやー、ボタンブームですね…。 Twitterも新たにフォローボタンの提供を開始した様です。
WebOS Goodiesさんで紹介されていて、あまりにも簡単そうだったのでこのブログにも設置してみました。 元々、はてブやTwitterのボタン設置はWEBLEさんで紹介されてるものを参考にしていたので、+1の追加はものすごく簡単でした!
以下、手順などなど。
Googleにてボタン用タグを作成
Googleの+1ページにてタグを作成します。
設定する項目は以下2つだけ!
ここで作られるタグは2つ。
ボタンリストにタグを追加
ソーシャル系ボタンをいれているリストに上記で作成したタグを追加します。 ※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=button_count&show_
faces=true&width=120&action=like&font&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; w
idth:120px; height:21px;" allowTransparency="true"></iframe>
</li>
</ul>
[/code]
<script>を読み込む
僕はフッターにScriptをまとめていたのでフッター部分に追加しました。
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">{lang: 'ja'}</script>
気になった事など
右側のマージンがうざい。 設置してみたところ、+1ボタンの右側にできる余白が若干デカイ。 恐らくカウンターが3桁以上になる事を踏まえ、余白をとっているのだろうけど…このブログには必要ないww
ということでマイナスマージンを使った突貫工事で済ませました。
+1って、結局何がおいしいの?
設置した後になって疑問に…。 +1ボタンを設置する事で、どこにどんな事が表示されるのか。 FacebookのlikeボタンならFacebookのウォールだったり、Twitterならタイムラインに表示される。 じゃぁ+1はどこに???
などなど、そんな疑問は+1 ボタンについて に紹介されてました
要するに良くわかってないす。笑
+1 しちゃってください!