◉このブログ（Blogger）の共有ボタンがいつの間にか消えてしまっていたので、復活させてみた。ついでに「+1」ボタンも追加。

共有ボタン（シェアボタン）とは右画像の小さなアイコンボタン。左からgamil、blogger、twitter、facebook、buzz。以前はブログポストの下に表示させていたが、ふと気がついたら消えてしまって、そのあたりにぽっかりと意味のない空間ができていた。

共有ボタンの機能はあまり期待していないが、デザイン的に間が抜けて、カッコ悪い！

Bloggerに新しい機能が加わる度に、デフォルトのウィジェットテンプレートの仕様が変更される。しかし、このブログは、他のブログの多くがそうであるように、テンプレートをカスタマイズして使っているため、仕様は以前のままで変更は反映されない。

ウィジェットテンプレートをデフォルトに戻せば、共有ボタンも表示されるはずだけど、そんなことをしたらレイアウトデザインがぐちゃぐちゃに…。

ちなみにBloggerの「ダッシュボード」→「デザイン」→「ブログの投稿」の「編集」→「ブログの投稿の設定」ダイアログでは、ちゃんと共有ボタンを表示させるようにチェックを入れてある。

とりあえず、カッコ悪さをなんとかしないと。現在のテンプレートを編集することにした。

Bloggerの「ダッシュボード」→「デザイン」→「htmlの編集」へ。

「テンプレートをすべてダウンロード」をクリックして、バックアップをとり、「ウィジェットのテンプレートを展開」をチェック。

自分の場合は、テンプレートを編集するとき、ブラウザ上ではいろいろ不都合があるので、ソースを外部エディターにコピーペーストして変更している。

変更箇所は「 <b:includable id='shareButtons' var='post'> 」で検索。

ボタンのaタグが５つ並んでいるので、それぞれのaタグのclass=''に不足しているclass名「goog-inline-block」を追加。class=''の先頭部分に追加したので、「goog-inline-block」の後に半角スペースを入れて、以下のように。

<a class='goog-inline-block share-button sb-email' …

５つのaタグのclass=''すべてに同様のclass名「goog-inline-block」を追加して保存、ブラウザの編集テキストエリアに戻して[テンプレートを保存]をクリックして、ブログを表示してみると、共有ボタンが表示されたが、４つ目のボタンの後で改行されたようになり、5つ目のボタンが一つだけ下にとび出してしまう。

他の人の共有ボタンが正しく表示されているBloggerのソースを眺めるなどして、修正。

どうも「 <b:if cond='data:post.sharePostUrl'> 」が邪魔をしている模様なので、これを削除、対になる閉じタグの</b:if>も削除。

同様に保存して、デザインを確認。変化無し。再度調べてみると、

「 <b:if cond='data:post.sharePostUrl'> 」のかわりに

<b:if cond='data:top.showDummy'>

<div class='goog-inline-block dummy-container'>

>>

</b:if>

が必要らしいので、追加してみると今度はうまくいった。以前のように共有ボタンが表示され、意味の無い空白がなくなった。

変更・追加箇所は下画像のとおり。赤が削除、緑が追加。なお画像の右側にもソースが続くがその部分の変更は無し。

「ブログの投稿の設定」ダイアログを見ると、「+1」ボタンも表示される設定になっている（最初の画像参照）。ということは、そのスクリプトを足してやれば表示されるはずなので、ついでに「+1」ボタンも表示させることにした。

こちらは簡単、以下のソースをheadタグの間か、bodyの閉じタグの前に追加するだけ（Bloggerの場合）。

<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>

{lang: 'ja'} </script>

分かりやすいbodyの閉じタグの前に追加してみた。

結果、右図のように。