2011/04/26

FacebookのSendボタンを早速導入してみた。Bloggerでも動くよ。

 

Facebookに「Send」機能がつきましたよ!という記事がTechCrunchに出てましたので、早速つけてみようという話です。

たまに見かける友達にメール送る機能のメールの送り先がFBに変わっただけのように見えるけど、送り手と受け手の行動から察するに、送りやすいし、見やすいし、情報伝達の敷居は下がりますね。
より口コミっぽくなった感もあります。

タコがべらべらしゃべると気持ち悪いので、早速導入方法を。

 

秒殺するならこれを貼るだけ。

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script>
<fb:send href="ここにURL" font=""></fb:send>

お疲れ様でした。

って、世の中そんなうまくいきませんわな。

 

とりあえずボタン生成画面を見てみよう

Facebook Developpers : Send Button
http://developers.facebook.com/docs/reference/plugins/send/

Send Button - Facebook開発者

plugins欄の下に「Send Button」の項目が出来ています。
また、おなじみの?コード生成ボックスがありますね。

解説を読んでみると、

The Send Button allows your users to easily send your content to their friends. People will have the option to send your URL in an inbox message to their Facebook friends, to the group wall of any Facebook group they are a member of, and as an email to any email address. While the Like Button allows users to share your content with all of their friends, the Send Button allows them to send a private message to just a few friends.

The message will include a link to the URL specified in the send button, along with a title, image, and short description of the link. You can specify what is shown for the title, image, and description by using Open Graph meta tags.

Send Button 実装したし。そんな考え込まなくても使えるし。
あ、あと諸々情報はOpen Graph meta tags で読みだしてるからね!との事。
なるおk。みなまでいうな。

その下、

Get a combined Like and Send button

You can implement the send button on its own, but if you also want a Like button on your site, you can simply addsend=true as an attribute to the Like button. This will render the Like button and Send button next to each other. Find the documentation on the Like button page.

Likeボタンつけてたら超楽に増設できるようにしてまっせと書いてあります。
アトリビュート(属性)に「send=true 」を足すだけだよ。
これでいいね!ボタンと連動するんだぜ?イージーだろ?
とりあえず Like button のページを見てみなよ!

 

へいへいわっかりました。ほな Like Button ページをみてみよう

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

Like Button - Facebook開発者

赤枠のところ、「Send Button」のチェックボックスが増えています

チェックをいれた状態で「Get Code]」を押すと、

Like Button Get Code Facebook開発者

コードの赤枠部分に「send=true 」が足されていますね。
なるほど、導入は楽チンポンですね。

 

いいねボタンとSend ボタンを同時に追加する

Likeボタンが導入済みであれば、アトリビュート(属性)に「send=true 」を書き足すだけで終わりです。
(というか「Get Code」ほぼコピペで一発終了なんだけども)

Bloggerであれば、とりあえず下記のようなコードを足せばおわり。
うちで使ってるコードはこれです。iframe?また今度ね。

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like expr:href='&quot; + data:post.url + &quot;' layout='button_count' send='true' show_faces='false'></fb:like>

 

Open Graph をちゃんと設定してないと非常にさびしい感じになりますが、とりあえずは以上。

#いやーフライングしちゃった。

 


以下、TechCrundhの記事

Facebook、相手を選んで「いいね!」できるSendボタンを追加―グループの数は5000万超え
Facebookの「いいね!」ボタンはすでにあらゆるところで見かけるようになっているが、Sendボタンという新しい兄弟分が発表された。このボタンは「いいね!」と同様、どんなウェブページにも簡単に設置でき、そのページに対する推薦を特定のFacebookグループあるいは友だち、さらに一般のメールアドレスに対して送信することができる。言い換えれば、「いいね!」ボタンではFacebookの友だち全員に対してメッセージが送信されるのに対して、Sendボタンでは特定の知り合いに対してメッセージを送信することができる。

0 件のコメント:

コメントを投稿