Subscribe Twitter

2011年8月4日木曜日

このエントリーをはてなブックマークに追加

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


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

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

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

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

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

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

Bloggerの「ダッシュボード」→「デザイン」→「htmlの編集」へ。
「テンプレートをすべてダウンロード」をクリックして、バックアップをとり、「ウィジェットのテンプレートを展開」をチェック。

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

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

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

5つのaタグのclass=''すべてに同様のclass名「goog-inline-block」を追加して保存、ブラウザの編集テキストエリアに戻して[テンプレートを保存]をクリックして、ブログを表示してみると、共有ボタンが表示されたが、4つ目のボタンの後で改行されたようになり、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の閉じタグの前に追加してみた。

結果、右図のように。


Related Post:


0 コメント: