PLUS1WORLD

Blogger にソーシャルボタンを設置する際に参考になったページとノウハウ

blogger-social-button-0005

当ブログはBlogger標準の「共有」ボタンを使用していません。

Blogger には標準でソーシャルネットワーク用のボタンがついていますが、見た目が通常のものと違うのでイマイチでした。

blogger-social-button-0003

正直、この標準の共有ボタンは分かりにくいと思います。

自前でボタンを設置する際に色々つまづいたので、つまづきやすいポイントを今回記事にしてみました。なので、Facebook 「いいね!」ボタン、Twitterボタン、Google +1ボタン、はてなブックマークボタン、そしてEvernote サイトメモリーボタンを自前で設定しました。

広告

Blogger標準の共有ボタンを消す

まずは、標準のボタンの表示を消す(削除)ところから説明します。

ブログの管理画面から、レイアウト(ブログのガジェットを追加、削除、編集出来るページ)を選び、

blogger-social-button-0001

ブログの投稿の「編集」をクリック。

blogger-social-button-0002

「共有」ボタンを表示するのチェックを外す。

私のテンプレートでは、これだけではなぜか全部消えなかったので、テンプレートから

を見つけ出してコメントアウトしました。

次にボタンの設置です。

SNSボタンの設置

参考になったページ

MEMO 4 ME: Bloggerへ各種ソーシャルボタンを各記事ごとに設置する方法

上記ページを参考に、ボタンを設置するコードを、ブログのテンプレートのボタンを表示したい位置に貼り付けて下さい。

ボタンの細かい設定部分は各自で調整、設定して下さい。

私は、 <div class=’post-footer’> の後にボタンを設置しました。ボタンを設置するだけなら、ここまででOKだと思います。

ただ、Facebook 「いいね!」ボタンやGoogle +1ボタンで共有された際に、適切なタイトルやサムネイルを設定したい場合はさらにOGPの設定が必要になります。

Facebook 向けOGPの設定

参考になったページ

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記

知っておきたいFacebookのOGPをBloggerに対応させる活用法 | Will feel Tips

上記ページを参考にOGPを設定して下さい。

設定したOGPが問題なく動いているかを以下のページでチェックできます。

Debugger – Facebook開発者

【▼ここからGoogle +1ボタンを設置する人向け情報】

Google +1ボタン押された際に、サムネイルを表示させたい場合、表示を設定する画像の縦横どちらか一片が120pxを越えていなければなりません。画像が小さいとサムネイルが表示されません。

【▲ここまでGoogle +1ボタンを設置する人向け情報】

以上がOGP設定の説明です。ちなみに、OGPは設定してもすぐに反映されない場合があります。設定した後は時間を置いてみましょう。

以上、結構細かい部分は端折りましたが、これで「共有」ボタンの設置は出来ると思います。私のブログではボタンを各記事の下に表示しています。

設置した後は、問題なく動いているかどうかのチェックも忘れないようにしておきましょう。