bloggerのtips。「共有ボタン」が表示されない場合の対処方法

bloggerにはエントリーをツィッターやフェイスブックで共有できる「共有ボタン」が用意されています。通常は以下に示す手順どおりに設定すれば、チェックボックスにチェックを入れるだけでこれが表示されるのですが、うちのブログを含め、テンプレートによってはこれが表示されないようです。その対処方法を英語のページで見つけたので紹介したいと思います。

※元ネタはこのページ　Official Sharing Buttons on Blogger




ダッシュボードの「デザイン」タブを選択すると、デフォルトでは「ページ要素」が表示されていると思います。この画面で「ブログの投稿」の右下にある編集ボタンをクリックして表示される設定画面から設定が可能です。

「[共有]ボタンを表示する」にチェックを入れると、テンプレート上でどのように「共有ボタン」が表示されるのかが分かります。これで通常は、設定が正常に終わったことが分かります。

ところが使用するテンプレートによって、この「共有ボタン」が表示されない事があるようです。実際にこのブログで使用している現在のテンプレートに変更した際に、うまく表示されなくなっていました。

その悩みを解決する方法があるので紹介します。

まず、ダッシュボードの「デザイン」タブから「HTMLの編集」を選択。
「ウィジェットのテンプレートを展開」のチェックボックスにチェックを入れてください。

続いて以下のコードを探します。編集画面で検索をかければ簡単に見つかります。

<p class='post-footer-line post-footer-line-3'>

見つからなければ、これ。

<div class='post-footer-line post-footer-line-3'>

さらに見つからなければ、これ。

<data:post.body/>

見つけたこれらのコードの下のどこの場所でもOKなので、以下のコードを追加します。

<div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'/>
</div>

これで「共有ボタン」が表示されるようになります。
ちなみにうちのブログでは、何故だか共有ボタンがでこぼこして表示されます。また表示される場所も、変な場所になってしまいます。なんとか改善したいのですが、どうすればいいのか今のところ手がありません。

続いて、応用テクニックをお知らせします。

1　まずは「共有ボタン」の任意の要素を消したい場合です。
まず、ダッシュボードの「デザイン」タブから「HTMLの編集」を選択して、以下のコードを探します。

]]></b:skin>

※「ウィジェットのテンプレートを展開」のチェックボックスに関しては、チェックを入れても入れなくても同じようです。

このコードの上に、次のコードを挿入します。
例えば「bloggerで共有する」ボタンを消したい場合以下のコードになります。

.sb-blog{display:none}

これで「bloggerで共有する」のボタンを消すことができます。このブログで現在採用しているテンプレートでは、「bloggerで共有する」ボタンが少しだけ凹んで表示されていたので、これは好都合でした。

なお、これ以外のボタンを消す場合のコードは以下のとおり。
「メールで共有」sb-email{display:none}
「ツィッターで共有」sb-twitter{display:none}
「Facebookで共有」sb-facebook{display:none}
「buzzで共有」 sb-buzz{display:none}

2　このボタンの前にテキストを入れたい場合。
例えば「Share this : 」とのテキストを入れたい場合です。

まず、ダッシュボードの「デザイン」タブから「HTMLの編集」を選択。

「ウィジェットのテンプレートを展開」のチェックボックスにチェックを入れます。

続いて、このコードを探します。

<b:if cond='data:post.sharePostUrl'>

このコードの直下に、次のコードを挿入します。

<table border='0'><tr><td><b>Share this : </b></td><td>

続いてこのコードを探します。

</b:if>

このコードの上に次のコードを挿入します。

</td></tr></table>

ちなみにうちのブログでは、このコード<b:if cond='data:post.sharePostUrl'>が見つからず、検証できていません。テンプレートによってコードが違うようです。