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. タイトルの下
  2. 記事の下
それぞれ、見ていくコトにします。

1. タイトルの下

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

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

Blogger HTMLの編集(忍者おまとめボタンをタイトルの下に置く)

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

2. 記事の下

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

Blogger HTMLの編集(忍者おまとめボタンを記事の下に置く)

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

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

この文字は、<div class=’post-footer’>の下に以下コードを追加しています。
<span style='color: red; font-style: bold; font-size: 150%;'>いいね!と思ったら、みんなにシェアしよう!</span>
これも@447lifeさんのサイトをパクった参考にしました。

まとめ

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

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

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




シェア <共有>からビジネスを生みだす新戦略
レイチェル・ボッツマン ルー・ロジャース
日本放送出版協会
売り上げランキング: 3091


ツイッターノミクス TwitterNomics
タラ・ハント 津田 大介(解説)
文藝春秋
売り上げランキング: 97412
0 コメント :
コメントを投稿

Related Posts Plugin for WordPress, Blogger...