ネットの海の渚にて

私の好きなものを紹介したり日々のあれやこれやを書いたりします

Google+のバッジ(フォローボタン)をはてなブログに設置する方法を解説します

Google+ バッジ というものがある。

こういうの↑

ツイッターでいうところのフォローボタンなんだけど、はてなブログにはそれをワンタッチで表示させるような機能は今のところ無い。
しかもこのバッジを付けているブログをほぼ見たことがない。
Googleに身も心も捧げてしまった俺としてはもうちょっとGoogle+には頑張ってもらいたい。
なので応援の意味も込めてGoogle+ バッジの設置方法を紹介する。



まずここにアクセスする
Google+ Badge - Google+ Platform — Google Developers


バッジを作りたいアカウントでログインする。(既にログイン済みなら関係ない)

するとこういう画面に切り替わる。
f:id:dobonkai:20140917082500p:plain




サイドバー用おすすめセッティング

f:id:dobonkai:20140917082651p:plain
今回は俺のブログのセッティングを例にしているので自分のブログに合わせてカスタマイズしていただきたい。
俺のブログのサイドバーの幅は300なのでバッジの設定もそれに合わせる。ここは自由に数字を入力することができる。

スマホ用おすすめセッティング

f:id:dobonkai:20140917082708p:plain
幅はiPhoneに合わせてやはり320が良いと思う。
レイアウトは横向きが合うと思うがこのへんはお好み。


はてなブログへの導入方法

バッジのセッティングが終わるとその下にある窓にタグが表示される。
これをコピーしてとりあえずメモ帳にでも貼り付けておく。

<!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ja'}
</script>

<!-- ウィジェット を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-person" data-href="//plus.google.com/u/0/*********************" data-layout="landscape" data-rel="author"></div>

こんな感じのタグになると思う。
このタグの上半分をヘッダに埋め込む。



最初にヘッダにタグを埋め込む

デザイン設定→カスタマイズ→ヘッダ→タイトル下
ここにさっきメモ帳にコピペした上半分の

<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ja'}
</script>

これをコピペする。
で変更を保存。


サイドバー用バッジの設置方法

デザイン設定→カスタマイズ→サイドバー→モジュールを追加→HTML
タイトルは入れてもいいし入れなくてもいい。
さっきの残りの下半分をここにコピペする。

<!-- ウィジェット を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-person" data-href="//plus.google.com/u/0/*********************" data-layout="landscape" data-rel="author"></div>

コピペできたら変更を保存。

これでサイドバーに設置は完了。


スマートフォン表示用のバッジの設置方法

デザイン設定→スマートフォン→フッタ
「スマートフォン用にHTMLを設定する」にチェックを入れてその窓に下半分をコピペする。

<!-- ウィジェット を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-person" data-width="320" data-href="//plus.google.com/u/0/*********************" data-layout="landscape" data-rel="author"></div>

コピペができたら変更を保存する。

注意点

解説ではスマホ用バッジの貼り付け場所をフッタにしているが、これはブログを有料プランのPro化していないといじれないので注意してほしい。
無料プランの場合は「記事下」に設置するのがおすすめだ。
それと記事内にあるタグはそのままコピペしても使えない。
必ず自分でセッティングしたタグを使用してください


Google+はイマイチ活用されていないような気がするけれど、逆に言えば伸びしろがあるとも言える。
とりあえず一人でも多くのブロガーさんが気軽にバッジを設置して少しでもGoogle+が活気づいたら嬉しい。