2010年05月14日

FacebookのLikeボタンをブログに付ける手順をもう少し詳しく書いてみた


すでに「ブログに"Like"ボタンを付けました」で触れていますが、このブログにはFacebookのLikeボタンを設置しました。"Like" ボタンと書きましたが、Facebookのログイン状況が異なると、"いいね"と表示されているかもしれません。

少し前ですが、ブログにLikeボタンを設置できないという質問を受けましたので、そのやり取りで分かったことをメモとして残します。

その前に、Likeボタン設置手順のおさらいです。

まず、下記「Like Button - Facebook Developers」をご覧ください。英語で書いてありますが、自分がするべきことは画面の下の方にある入力フォームに適切な項目を入れることだけです。

Like Button - Facebook Developers
http://developers.facebook.com/docs/reference/plugins/like


適切なデータを入力して「Get Code」ボタンを押すと、iFrameを使ってLikeボタンを表示するためのHTMLコードが生成されます。URL to Likeにブログのトップページを入力するとブログのトップページに設置するHTMLコードが生成されるわけです。

ブログ全体であれば、上記で生成したコードがそのまま使えます。表示させたい位置に生成されたコードを埋め込むだけです。ただし、個別記事にLikeボタンを付ける場合は、少し細工しなければなりません。基本的には、生成されたコードの「href=」の値を個別記事のURLに変更すれば大丈夫です。念のため、href=に設定する値はHTMLエンコードした方がいいでしょう。

ブログのカスタマイズ方法については、ブログの運営会社に問い合わせるか、自分で調べるなどしてがんばってください。


■ボタンを設置できないブログサービスがある

注意すべきは、お使いのブログサービスによってLikeボタンの設置ができないことです。例えば、iFrameを禁止しているサービスではLikeボタンを設置できません。知っている範囲ではアメブロがiFrameを禁止しているので使えないようです。

また、LikeボタンはiFrame版以外にもFBMLというFacebook独自の言語で実装できるのですが、こちらはiFrame版より難しそうです。JavaScriptを使うことになるので、ブログサービスによってはiFrameと同様に使えない可能性があるサービスがあります。

幸いにも私が使っているSeesaaブログはiFrameも使えるので、いろいろ試せます。iFrameとJavaScriptが禁止されているブログサービスをお使いの方は、残念としか言いようがありません。Seesaaのようなブログサービスに移行するという手があるかもしれませんが、Likeボタンのためにブログを移行するのは本末転倒なので、私からはお薦めしません。

さて、Likeボタンの設置はiFrame版だけではなくFBMLで実装する方法もあります。この場合、JavaScriptコードなどを書かなくてはならず、手順が複雑になります。ブログ上できれいに表示しようと思うと、FBML版の方がいいとは思うのですが、自分がFBMLを理解していないので今回は見送っています。いつかは挑戦したいなと思います。

とりあえず今回はここまで。

posted by やすお at 02:18 | Comment(2) | TrackBack(0) | Facebook | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
やすおさま
はじめましてコメントいたします

このLikeボタンの設置に関する情報を探していてたどり着きました。
現在自分のブログには個別記事に埋め込んでいますが
「上記で生成したコードがそのまま使えます。」
このコードのままなんですね。
やはりコレではどの記事に対しても同じ数字が出てしまっています。

そこで注意として書かれているように
「ただし、個別記事にLikeボタンを付ける場合は、少し細工しなければなりません。基本的には、生成されたコードの「href=」の値を個別記事のURLに変更すれば大丈夫です。念のため、href=に設定する値はHTMLエンコードした方がいいでしょう。」

この部分を実践してみたいのですが
実際どのように変更すればいいのでしょう?
もう少し詳しく教えていただければ幸いです
どうぞよろしくお願いします。

当方のブログですが
独自ドメイン使用していますがSeesaaブログです。
Posted by オカダチヒロ at 2010年06月01日 23:36
オカダチヒロさん、コメントありがとうございます。

Seesaaブログでしたら話が早いですね。

ブログを拝見したところ、どこを修正すべきかはご理解されているようですが、他のSeesaaブログのユーザーさんにも参考になるように、少し詳しく書いてみます。

手順としては下記の通りです。

Seesaaのブログ管理画面で、デザイン>コンテンツ>記事のモジュールと進む。
右上の「コンテンツHTML編集」をクリックして、HTMLソースを編集する画面を表示。
Likeボタンを表示させたいところに、Facebookで生成したコード(下記)を埋め込む。

<iframe src="http://www.facebook.com/plugins/like.php?href=<% article.page_url %>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>


大事なのは、like.php?href=の後に入れるものです。ここに<% article.page_url %>を指定します。これは、表示しているページのURLを示す変数です。hrefに入れる値を変数にすることで個別ページを指定したLikeボタンを表示できます。

なお、hrefに指定するURLはHTMLエンコードした方がよいとブログでは書きましたが、ここではHTMLエンコードしていません。理由は、HTMLエンコードしなくても問題なく動くこと、<% article.page_url %>をHTMLエンコードする変数が分からなかったという理由です。

ぜひ、挑戦してみてください。
Posted by やすお at 2010年06月02日 00:41
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/149814322

この記事へのトラックバック



×

この広告は1年以上新しい記事の投稿がないブログに表示されております。