blogger

Bloggerに「いいね」やtwitterのソーシャルボタンを設置するには

このブログでも使っているBloggerでもともと用意されているソーシャルボタン（「いいね」やツイートができるボタン）は、下のようなデザインでちょっとわかりにくいです。


そこで、「忍者おまとめボタン」というのを利用してみました。

これなら、一つひとつのボタンを個別に組み込まなくても、まとめて簡単に設置することが可能です。（下のようなデザインの中から好みのボタンを選べます）


「忍者おまとめボタン」のサイトにアクセスし、そこで順を追って登録すれば設置できますが、Bloggerに設置する際、ちょっと苦労したので書いておきます。

記事下にボタンを設置するには

Bloggerの管理画面から、「テンプレート」→「HTML の編集」をクリックします。

htmlソースの中から



<data:post .body=""></data:post>



を検索します。複数出てくるので、それぞれの真下に、忍者おまとめボタンで指定されたコードを追加します。


トップページにボタンを表示させないようにするには

このブログでは、トップページでは投稿の途中までしか表示されない設定にしており、記事の下に「続きを読む」と表示されています。ところが、上の方法でソーシャルボタンを設置すると、「続きを読む」というのがソーシャルボタンの下に来てしまい、続きがあることが分かりづらくなってしまうので、トップページではソーシャルボタンを表示させないようにしました。

その方法は、忍者おまとめボタンで指定されたコードを上で説明した場所に設置する際、コードの上下を次のように囲むだけです。

<b:if cond='data:blog.pageType == "item"'>
コード
</b:if>


これで完成！


【関連記事】


by 硲 允（about me）
twitter (@HazamaMakoto)
instagram（@makoto.hazama）