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

スポンサーサイト

(--/--/--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

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

■設置条件/メリット

「いいね(like)ボタン」とセットで「送信(send)ボタン」を表示するには条件があります。それは、「いいね(like)ボタン」の設置方法にはiframeを使う場合とXFBMLを使う場合の2通りがありますが、XFBMLで設置する必要があります。
XFBMLで設置するメリットとしては、
  • 顔写真の表示有無によって高さを自動調整してくれる
  • 記事毎にいいねを押せるようになる
があるようです。一方、表示が少し遅くなるというデメリットを感じました。
iframeで設置する方法はこちら

■設置方法

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

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


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

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を入れておくと今後の拡張性が良くなるみたいです。
この記事が役に立ちましたら、ぜひ「いいね!」をポチっとお願いします!

関連記事

コメント

コメントの投稿

サイト管理者にのみ通知する

トラックバックURL

http://goodjob4604.blog103.fc2.com/tb.php/102-7746f524

トラックバック

Facebookのいいねボタンのエラー「The href URL must be absolute」の対処法 (fc2ブログ版)

気が付けば年も明け既に2月半ばで、遅ればせながら新年の挨拶を・・・は後回しにして、この手の記事に求められるのはまず本題。 昨年末に当ブログにもfacebookのいいねボタンを設...
月別アーカイブ
Google+
Twitter
ページトップへ
ブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。