@niftyのブログサービス・ココログ「プロ」の個別ページに「忍者おまとめボタン」でSNSの各種ソーシャルボタンを設置してみた

別ブログで、@niftyのブログサービス「ココログ」を結構長いこと使っているのですが、先日、プランをココログ「プロ」に変更したので、「忍者おまとめボタン」という便利なサービスを利用して、SNSの各種ソーシャルボタンを設置しました。

HTMLを編集できるのは有料のココログ「プロ」のみ

そもそもココログにおいて、上級テンプレートと呼ばれるHTMLをカスタマイズできるのが、@nifty接続会員の場合は最上位コースのココログ「プロ」のみなんですよね(@nifty接続会員以外だとオプションパックアドバンス)。

プランをココログ「プロ」に変更した話はこちらの記事で。
@niftyのブログサービス「ココログ」のプランを「プロ」に変更したお話【雑記プラスα】

もちろん有料なんですが、そこまでしてプランを「プロ」に変更してやりたかったうちの一つが、このSNSの各種ソーシャルボタンの設置だったんです。

元々ココログはSNS対応がかなり遅れていて、デフォルトの機能ではTwitterボタンしか設置対応してなかったと思うんですよね。

その上、通常プランではHTMLをカスタマイズできないので、(何か方法はあるのかもしれないですが)一般ユーザーは我慢するしかない状況なんです。

というわけで、思い切ってココログ「プロ」にした運営中のブログ「小梅太郎の「小樽日記」」に、SNSの各種ソーシャルボタンを設置してみたので、その方法を備忘録として書き留めておきます。

今回は、個別記事に設置しました。

※ココログ「プロ」における、上級テンプレートへの変換方法について、詳しくはこちらの記事をどうぞ。
@niftyのブログサービス「ココログ・プロ」の上級テンプレートへの変換方法及び、記事下にAdSense広告を設置する方法

SNSの各種ボタンを設置には「忍者おまとめボタン」を利用

ninjaomatome_2014-12-11_18_19_35

で、コードとかが苦手な私のようなユーザーには、各SNS一つ一つのコードを取得して設置していくのは至難の業なのですが、今回は「忍者おまとめボタン」という便利なサービスがあったので、利用してみました。

「忍者おまとめボタン」は、様々な種類のソーシャルボタンを、手軽に簡単に設置できるサービスですね。
ツイートボタン、いいねボタンなどをまとめて簡単設置|忍者おまとめボタン

「忍者おまとめボタン」のサイトでのコード取得までの操作方法については、こちらの記事を参照してください。
「忍者おまとめボタン」でSNSの各種ソーシャルボタンを設置してみた

ちなみに、「忍者おまとめボタン」でコードを取得する際、サイトのタイプ(ブログ・サービス)を一覧から選ぶのですが、その中に「ココログ」がないんですよね。

ninjaomatome_2014-12-11_18_19_06

なので、今回は「その他のブログ」を選択しました。
(実は、ココログの場合は、MovableTypeでいけそうですが、未確認)

個別ページの上下にSNSの各種ボタンを設置

さて、それでは「忍者おまとめボタン」で好みの各種ソーシャルボタンを設定して、コードを取得した上で、ココログ・プロに設置していきます。

今回は個別記事の、記事タイトル下と記事本文下の2カ所に設置したいと思います。

個別記事ページの編集は、「Individual Archives」で行います。

管理画面の「デザイン」→「現在のテンプレートを編集」画面で、下の方のバックナンバーテンプレート欄に「Individual Archives」があります。

cocolog-nifty_2014-12-13_2_09_10

「Individual Archives」をクリックして表示されるソースの次の箇所に、 コードを貼付けました。

まずは、記事タイトル下。

<div class="entry-body-top"></div>
←(ここに上部に表示させたい、SNSの各種ボタンのコード)
<div class="entry-body">
<div class="entry-body-text">
<$MTEntryBody$>
</div>
</div>

cocolog-nifty_2014-12-13_1_53_15

つづいて、記事本文下ですが、こちらは、

<div class="entry-body-bottom"></div>

このソースの直前に、SNSの各種ボタンのコードを貼付けました。
(現在、AdSense広告が貼ってあるので、そのすぐ上)

cocolog-nifty_2014-12-13_1_53_47

これで、個別ページの上下に希望のソーシャルボタンを設置できました。

おわりに

いや〜、やっと設置できました。

有料のココログ・プロにプラン変更するほどの効果があるのかといわれれば、なんとも心もとないですが、これまでのココログのプランでは、ソーシャルボタンを設置すらできなかったので、何だか嬉しいですね。

実際、どのくらいこのボタンを利用してもらえるかは分かりませんが、少しでも活用してもらえると、さらに嬉しいですね。