共有ボタン設置に「忍者おまとめボタン」を使ってみた

2012年4月29日日曜日

共有ボタン設置に「忍者おまとめボタン」を使ってみた

20110313-NodeXL-Twitter-msrtf11 OR techfest graph single region layout

Original Updated by Marc_Smith

みなさま、お元気ですか。アベ(@brAin_1980)です。

このたび、このブログにもSNSなどへ共有するボタンを設置しました。

参考にしたのは、@447lifeさんの以下の記事。

447ブログ: 統一感が決め手！ブログに設置するSNSボタンは「忍者おまとめボタン」にまかせておけばいいかも

ブログをもっと色んな方に見てもらうには口コミが一番！ということで、先週SNSへの共有ボタンを設置しました。いや〜これは思ったより難しい！サービス毎にボタンを作るだけでも大変なのに、ブログに設置して並び ...
いつも参考にさせてもらっています！

どうやら更新が簡単とのコトです。
やっぱりこうやって楽チンなのを使いたいですよね！

しかし、ブログに設置するには、HTMLの知識が必要です。私はそれほど詳しくないので、Google先生にお世話になって、何とか設置できました。

今回はBloggerに設置するためにいじるHTMLを、備忘録的に残しておくことにします。

コードの入力箇所を押さえればOK

今回お世話になったのは、「忍者ツールズ」というサービスの1つ。

忍者ツールズ｜ホームページブログアクセス解析カウンターメールフォーム

いろいろあります

各サービスは会員登録すると、使えるようになります。
今回はこの中の「忍者おまとめボタン」を利用します。

詳細は、@447lifeさんの記事を見てもらったり、公式ページを見てもらうとして…。

私が悩んだのは生成したコードをどこに入力(こぴぺ)するか。

今回、私は2ヶ所に設置しました。

タイトルの下
記事の下

それぞれ、見ていくコトにします。

1. タイトルの下

もしかしたら使っているテンプレートによって異なるかもしれませんが、とりあえず私が見つけた答えを記しておきます。

タイトルの下の場合
→<div class=’post-header’>の下に入力

HTMLのコード表示の際には「ウィジェットのテンプレートを展開」にチェックを入れるのを忘れずに。

2. 記事の下

記事の下の場合
→<div class=’post-footer’>の下に入力
ただし、複数ある場合には、最初に引っかかったdivセクションの下

分かってしまえば、簡単ですね。コードをこぴぺして終わりです。

私は、上と下とで異なるまとめツールを設置しました。そして下には「いいね！と思ったら、みんなにシェアしよう！」という文字を追加しました。

この文字は、<div class=’post-footer’>の下に以下コードを追加しています。

<span style='color: red; font-style: bold; font-size: 150%;'>いいね！と思ったら、みんなにシェアしよう！</span>

これも@447lifeさんのサイトを~~パクった~~参考にしました。

まとめ

自分のブログにこうやって手を入れようとするとき、だいたい2，3度壁にぶつかります。そのたびに、いつも見ているブロガーさんのサイトを見ながら、そしてGoogle先生にお世話になりながら、追加しています。

今回のコトで、ざっくりどこにどーすれば、このあたりが変わる！というのが分かるようになりました。
やっぱり手を動かさないとダメですよね。

最後まで読んでいただき、ありがとうございました。