iframe版の「いいね!」ボタンを埋め込むコード for blogger

ページ

 

iframe版の「いいね!」ボタンを埋め込むコード for blogger

2013年5月1日水曜日
iframe版の「いいね!」ボタンを埋め込むコード for blogger

怒りをあらわにしたいです。いや~むかつきますね。いきなりこんなネガティブな発言を魅せられて、この記事を読んでもらえるのかどうかというとおそらく読んでもらえ無いと思っている@kissatenです。

Bloggerにむかつきます。Facebookにむかつきます。

FacebookのHTML5対応のFacebookいいねボタンからiframeのFacebookいいねボタンに変えようと一悶着有りました。むかつきますね。むかつきすぎてむかつきます。それぐらいむかついたのですが、コレをクリアしたら自分がスッキリ出来る内容だったのでスッキリもしました。

BloggerでFacebookいいねボタン(iframe版)を導入するコードの紹介です。Bloggerでiframe版を入れたくて困っているひとようの記事です。

コレをテンプレートに追加

事の発端。

A valid url is required when using the iframe implementation.

まず、Facebookのいいねボタン作成フォームで以下のように書かれていた。
Like Button - Facebook開発者

"A valid url is required when using the iframe implementation."


まぁ、コレで調べてみました。調べた結果意味不明(と言うか解決されていない?)ので放置して、ほかのサイトに載せられているFacebookのiframe版コードを探しました。むかつく

コードはあっさり見つかり、やったー!とか思ってたわけです。

アカンのやって

んでそのまま入れたらエラーが出たわけです。

The reference to entity "layout" must end with the ';' delimiter.

あれっす。Blogger特有の書き方をしないとエラーを発しやがるっていうね。むかつく。


(;・∀・)ふざけんな

訂正します。Blogger特有のわけの分からない記述のおかげでものすごくめんどくさいコード変換をしなければいけません。むかつく。

出来たコードはこちら

Facebook Like botton


ふつうのいいね<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; +  data:blog.canonicalUrl + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=20&quot;' scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:20px;" allowTransparency="true"></iframe>

BOXのいいね <iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; +  data:blog.canonicalUrl + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=71&amp;action=like&amp;colorscheme=light&amp;height=61&quot;' scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:71px; height:61px;" allowTransparency="true"></iframe>

赤文字がポイントです。青文字のexpr:を使って" data:blog.canonicalUrl"を呼び出すために赤文字部分を普通の状態ではなくすわけです。あー面倒。

あとは
layout=
width=
height=

位をいじればいいんじゃないでしょうかね?そこら辺は個人でいじって下さい。なお、widthとheightの設定はこのブログ用の設定なので、独自で入れ替えて下さい。

まとめ

こいつら

両者のむかつきポイントは英文エラーに対しての対策がなく、解決されていないっていうやつ。つらいっすわー。

ちなみに

こんかいのコードはモバイル表示用につけました。なぜかというとHTML5のFacebookいいねボタンはコメント欄が出てきて鬱陶しかったので変更したわけです。

管理人の一言

むかついたね!


この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで喫茶店の部屋をフォローしよう!

 

▶ 関連する新着記事