2013年2月17日日曜日

『Blogger』でFacebookの「いいね!」ボタンを設置するときに引っかかったポイント



マイナーを謳ってるだけあって訪問者も少ない当ブログ。
でも・・・・それでも・・・・・・・「いいね!」ボタンってやつ? 
つけてみたいじゃない?

そんなわけで調べてやってみた。

が、思いのほか手こずったので、引っかかったポイントをメモ。

まずググって最初に参考にさせて頂いたのがこちらのブログ。

clmemo@aka: Blogger に Facebook の「いいね!」ボタンを設置する


ふむ、ふむ、なるほど。

で、書いてある通りにやってみた。

が、が、がががが・・・

そもそも「bodyタグ」やら「data:post.body~」というものが見つからない。


ここで最初の引っかかったポイント。

BloggerのテンプレートのHTML編集画面で「ウィジェットのテンプレートを展開」というチェックボックスがある。
ここは最初はチェックが入っていないのだが、ここにチェックを入れないと「bodyタグ」やら必要なコード部分が表示されないようだ。



で、ようやくそれに気付いて「bodyタグ」等を見つけてコードを挿し込み、確認のためにプレビューボタンを押すのだが。

が、が、がががが・・・



なんでやねん!!!

先ほどのブログに書いてある通りにやってみて、何度も何度も何度も確認したけど「Bad Request Error 400」

いったんはここで諦めたのだが、時間を置いてまたチャレンジ。
再びググってたらこんなブログ記事が。

blogger に facebook の Like(いいね)ボタン - kaze-kaoruの日記



おぉ?もしかしてコードを挿し込む位置が違ってたのかぁ~?

と、このブログに書いてある位置にコードを差し込んで、いざプレビューボタンを押すと・・・・。



なんでやねん(再)!!!


その後もいろいろ試行錯誤してやってみて、この形になり、


今度こそはと祈りつつプレビューボタンを押してみるが・・・・



なんでやねん(再々)!!!

諦めかけたが、あまりに腹が立ったので、もう「プレビューボタン」じゃなく、「テンプレートを保存」ボタンでコード修正を確定させてやった。

そ、そ、そしたら、ナント!・・・・出来てるっぽいじゃないですか!


ということで、プレビューボタンは無視!が正解だった。
これが2つ目の引っかかったポイント。


あ、当たり前のことだけど、修正を確定させる前に、元コードのコピーはしっかり保存しておくこと!


以上。

ま、いいね!ボタンをつけたからどうしたって感じもするけど・・・・・。

※<2015/07/02追記>
忍者ツールズのおまとめボタンとやらを設置してみた。


↓ せっかくだから誰か押してみて下さい。せっかくだから。

8 件のコメント:

  1. いきなりぶしつけにすいません。投稿参考にさせていただきました。コードをいれて、テンプレートを保存としたのですが、どうにも「いいね」ボタンがでません。Bloggerでの編集画面が変わっていることもあり、なにかアドバイスいただけたらうれしいです。

    タグなど貼付けられなかったので、以下に現象、投稿してみました。。。
    http://shinojackie.blogspot.jp/2013/06/blogger.html

    返信削除
    返信
    1. jackie shino 様

       コメント有難うございます!
       
       私もワカラナイままいろんなブログを参考に試行錯誤していたらたまたま出来ちゃった、とう感じなので、アドバイスできるほどの知識は持ち合わせていないのですが・・・。
       
       jackie shino様のコードを拝見しましたが、ボタンのタイプの違い(ボタン型・ボックス型)は別として、2番目のコードの最後の部分が当方のものと違っていましたので、試しにこの部分を変更してみてはいかがでしょうか。
       
       「expr:data-#href='data:post.canonicalUrl'/」→「expr:data-href='data:post.url'/」
       
       

      削除
    2. さっそくの確認&コメントありがとうございました。ご指摘部分変更してみましたが、bloggerはノーリアクションでした・・・。いずれにしてもありがとうございました。別のところでもきいてみます。

      削除
    3. jackie shino様

      そう・・・・ですか・・・・・。

      お役に立てず申し訳ありません・・・。

      削除
  2. 忍者ツールズさんの「おまとめボタン」というのを設置することで実現できました。いろいろありがとうございました!

    返信削除
    返信
    1. jackie shino様

       なるほど、良さそうですね!
       私もそのうち試してみます。
       有難うございました。

      削除
  3. 横から失礼します。
    いいねボタンが表示されない場合について
    というタグがテンプレートの中に複数あり、挿入する場所を間違えると表示されないって事が分かりました。

    「おまとめボタン」も確かに便利そうですが、直接編集して表示させたい場合は

    ~~~~

    の直後に挿入するとちゃんと表示されます。
    参考までに。。。

    返信削除
    返信
    1. Makoto Ooka 様

       情報、有難うございました!
       
       早速こちら押させて頂きましたw
       http://webdesign-element.blogspot.jp/2013/08/blogger_20.html

      削除