FacebookのLike Buttonを付ける

• Digital
• Facebook

自分のブログに今ソーシャルプラグインとして話題になっているFacebookのLike Buttonを付けたので、覚書きとして記しておきます。

まだ日本語での説明がないので対応できていない方がいらっしゃると思いますが、HTMLとCSSを編集できるブログであれば簡単に付けれますので是非試してみて下さい。それに最近はFacebookの利用者も増えてきているので、みんなで楽しむ事が出来るのではないでしょうか。
Facebookの日本からの利用者が1年間で急増 – mediamodeのメモと雑記
（記事がまとまっておりましたので、ご利用させて頂きました。）

そして丁度@SayobsさんがFacebookの説明記事を書いてくれました。
Facebookを始めよう！Facebook初心者のための10ステップ+α | Last Day. jp
そちらも合わせて参考にしてください。

1.開発者登録

では、まずはFacebookの開発者用のページに行きましょう。
Facebook開発者

最初に開発者としての登録が必須になります。登録ページはDocumentationの”Single Sign on”の途中に”register your application”とあるのでクリックします。でも、探すの面倒なので、下のリンクから行ってください。（ログインしていないと、まずログイン画面が出ます。）
アプリケーションを作成 – Facebook開発者
では、必要事項を記入しましょう。

必要事項を記入した後「アプリケーションを作成」ボタンをクリックすると、すぐに登録されます。次のような画面が出てくるので忘れずにEvernoteでClipしておきましょう。

そして、<div id=”fb-root”>から始まって</script>までをコピーしておきましょう。

2.SDKの組込

では、ページの下方にある「いいね！」ボタンをクリックし、プラグインのページにいきましょう。ここではFacebookのパーツを埋め込むには、2つの方法があると書いています。iframeを使うのとXFBMLという耳慣れないXMLを組み込むのがあります。XHTMLなどではiframeは推奨されていないので、思い切ってXFBMLを組み込んでみましょう。そのためにはいくつかのステップがいります。
Javascript SDKの組み込みとmetaデータへの書き込みです。Javascript SDKがあると、Like Buttonを押してもらうと同時にコメントも記入してもらえるようになり、相手の写真がないときに高さを自動調整してくれるそうです。先程コピーしたHTMLタグを>/body<タグの前に設置して下さい。この時、appIDには先程登録した事で得られた文字列が組み込まれているはずです。そしてmetaデータをHTMLの先頭部分に設置しましょう。書き込むのは、ブログタイトルと記事タイトルとブログのロゴのパスです。FC2では変数が使用できるので、それで組み込んでいます。

3.Like Buttonの設置

ここまで来れば後は楽勝です！ページの下にあるLike Buttonの項目に移動し、設定しましょう。URL to Likeには記事のURLを入れましょう。FC2だと<% topentry_link>です。（入力すると<と>は＆lt;と＆gt;に変換されるので、貼り付ける前に修正してください。）他のブログですと、permanentlinkになりますか？デザインは２つあります。そっけなくボタンとLikeされた数字が出てくる”button_count”と日本語の説明が表示される”standard”です。（ここではまだ英語ですが、実際に設置すると日本語になります。）まだFacebookの認知度は低いので、日本語の説明がついていたほうがユーザビリティは高いと思います。
”Show Face”というのはボタンをクリックすると、ボタンを押したFacebookユーザの顔アイコンがLike Buttonの下に並ぶようになります。幅はブログの記事の部分に合わせてください。元の値のままでも問題ないです。ボタンの言葉にも2つあります。”Like”と”Recommend”です。「いいね！」というのと「オススメ！」というのことです。設置するブログのイメージに合わせればいいのではないのでしょうか。お堅い学術系の記事であれば、”Recommend”を選択するとか。フォントや色はブログに合わせてお好みに。フォントは”arial”,”lucida grande”,”segoe ui”,”tahoma”,”trebuchet ms”,”verdana”があります。色は”Light”と”Dark”という「明るい感じ」と「暗い感じ」の2種類があります。

こうして編集していると、横に設置イメージが出てくるのでわかりやすいですね。編集を終了したら、最後に”Get Code”ボタンを押してください。ポップアップにコードが表示されるので、コピーしましょう。XFBMLのコードは短くていいですね。

で、問題は記事のどこに設置するかです。よくRetweetボタンは記事のトップにこれだけRetweetされましたと見せるためか誇らしげに設置してあります。同じように私も置いています。では、Like Buttonも同じように置くべきか。そうではなく記事を読み終わったところに置くのはどうでしょうか。
読者の方が「あー、よかった。この記事、いいね！」で、ポチッと押してくれることを期待しています。それだけこのボタンは簡単に押すことが出来ます。Likeされた数は目立つようには表示してくれませんので、記事の読みはじめでの判断にインパクトを与えるのは難しいと思います。また”Standard”だとFacebookの顔アイコンが表示されてしまうので、想定しない幅をとられてしまうのを避けたいと意味合いもあります。

4.動作確認

それでは最後に設置したLike Buttonが正常に動作しているか確認してみましょう。Facebookにすでにログインしている状態で、「いいね！」と書かれた部分をクリックしましょう。ボタンの色が変わり、コメントを入力してくださいというポップアップは出てきましたか。コメントにはひとまずテストとでも入力しておきましょう。入力を確定しましょう。「いいね！」と出ている下に自分の顔アイコンが出てきましたか。問題ないでしょう。

最後に自身のFacebookページに言ってみましょう。掲示板には「いいね！」と言っています。と書き込まれていますか？それが確認できれば、もう大丈夫です。

さて、後は「いいね!」とされるのを首を長くして待ちましょう。

まとめ

Facebookは利用者が増えてきたとはいえ日本ではまだまだですが、この手軽さははてなやツイートを上回っていますね。問題といえば、タグを付けれないことでしょうか。Disqusなどのコメントよりも、こちらでやり取りしたほうがお互い楽かもしれません。
ちなみに今回画像の挿入にはkwoutではなく、アイコンのカワイイSkitchを使いました。kwoutだとログインが必要なページではそちらに飛んでしまいますが、Skitchではそういう事もなくまた簡単に埋め込みコードを作成できました。（コメントにてご指摘あり、Firefoxのadd-onからクリップするとログインページにいくことはありませんでした）書き込むときはSkitchで、見せ方にこだわるのならkwoutにという使い分けは必要になるかもしれません。再び登場@Sayobsさんのブログで使い方が紹介されていますのでどうぞ。
EvernoteとSkitchの連携でebookを便利に使いこなす | Last Day. jp

それと私のFacebookアカウントはこちらDaisuke Miuraになりますので、よろしくお願いします。
で、下の「いいね！」ボタンをぜひ試してください（笑）

最後に

もし、このブログの内容が役に立つと思ったら、ぞうさんを。

熱烈にプッシュして下さるなら、Bさんを。

これからも読み続けてもいいなら、きつねくんを。


それぞれクリックして頂けると嬉しいですヾ(*´∀｀*)ﾉ