facebook「いいね（like）ボタン」に「送信（send）ボタン」を追加

WEBマスターのお仕事TOP > ソーシャルプラグイン設置 > facebook「いいね（like）ボタン」に「送信（send）ボタン」を追加

facebook「いいね（like）ボタン」に「送信（send）ボタン」を追加

（2011/05/10）

4/26に「いいね（like）ボタン」に「送信（send）ボタン」がセットで表示できるようになりました。
「いいね（like）ボタン」はクリックすると、自分のfacebookページに通知され、自分の友達のニュースフィードにも通知されます。でも時には、特定の相手にだけページを送りたい事もありますね。このような場合に「送信」ボタンを使えば、特定の人にだけそのページを送ることができます。ソーシャル性はありませんが、ユーザの使い勝手はアップするのではないでしょうか。

■設置条件/メリット

「いいね（like）ボタン」とセットで「送信（send）ボタン」を表示するには条件があります。それは、「いいね（like）ボタン」の設置方法にはiframeを使う場合とXFBMLを使う場合の2通りがありますが、XFBMLで設置する必要があります。
XFBMLで設置するメリットとしては、

顔写真の表示有無によって高さを自動調整してくれる
記事毎にいいねを押せるようになる

があるようです。一方、表示が少し遅くなるというデメリットを感じました。
iframeで設置する方法はこちら

■設置方法

次に紹介する３ステップで設置ができます。
Step.1）アプリIDを取得
アプリIDの取得ページに入力/認証し、アプリIDを取得します。

以下のアプリIDというのを保存しておきましょう。

※「Your account must be verified before you can take this action」というようなエラーメッセージが表示される場合は、Confirm Your Phoneで携帯電話に認証コードを送り、PC画面で認証というプロセスを経れば上手くいくかもしれません。

Step.2）JavascriptSDKを読み込むコードを設置
次のコードの「YOUR APP ID」部分にStep.1で取得したアプリIDを入れ、<body>内に設置します。私の場合は<body>の後に挿入しました。

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>

▼参照
JavaScript SDK

Step.3）いいねボタンのコード設定
コード生成ページでお好みの表示オプションを設定します。「URL to Like」はいいね/送信するページを設定することができ、は何も入力しなければボタンが設置されているページが対象となります。「Send Button」にチェックが入っていると、「送信（send）ボタン」が表示されるようになります。

Step.4）コード取得＆設置
「Get Code」をクリックし、XFBML側のソースをコピーして表示させたい箇所へ設置してください。

なお、設置するコードの「en_US」を「ja_JP」に差し替えることで、send⇒送信、like⇒いいねの日本語表記になるそうです。いいねボタン、コメントフォームなどFacebookソーシャルプラグインが複数設置されていて、複数箇所でコードが呼び出されている場合、一箇所でも「en_US」表記が残っていると英語表記（like/send/comment）になるようです。日本語表記がうまくいかない場合は、コードの中に「en_US」が残っていないかチェックするとよいかもしれません。

以上、ちょっと面倒ですが、XFBMLを入れておくと今後の拡張性が良くなるみたいです。
この記事が役に立ちましたら、ぜひ「いいね！」をポチっとお願いします！

関連記事