BloggerにSNSのボタンを設置する際に参考になったページとノウハウ

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

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

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

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

Contents

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

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

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

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

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

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

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

次にボタンの設置です。

参考になったページ

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

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

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

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

参考になったページ

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

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

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

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

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

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

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

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

この記事を書いた人

当ブログ『PLUS1WORLD』の記事執筆、編集、校正、プログラミング（一部）、管理を行っているのは今井阿見（いまいあみ）という個人のブロガーです。ブログは趣味と実益を兼ねて運営しています。

今井阿見は30年近くゲームを遊んでいるベテランのゲーマー。学生時代にゲーム作りや映像制作を行っていたので、ゲームだけでなく、映画やアニメなどの映像作品、スマートフォンやパソコン、ガジェットなどの分野にも深く関心があります。

このブログ記事を気に入ったら著者（今井阿見）を応援して下さい！　励みになります！