shareボタンじゃなくてdialogを使う。

最近、Facebook ネタばっかりですが、ご容赦ください。

Facebook の share ボタンが非推奨になってるぽいのですが、
どうしても Like じゃなくて (旧型のfb:share-button とか以外の方法で)
Share な動きを作りたい、もしくは作らなくてはいけない時ってあると思うので、
いろいろとググってみました。

結果、どうしても share ボタンを作りたければ、Feed Dialog を使うようです。
これからの正統派はこっちかもしれません。

Feed Dialog の作り方は、おおきく2つです。

※ Feed Dialog を使う前に、Facebookアプリを作成する必要があります。
Facebookアプリの作り方は、別途ググッてください。

1. URLを指定する

これは、そのまんまなのですが、URLの飛び先にFeed Dialog用の
URLを指定することで、Dialogが表示されます。

1
2
3
4
5
6
7
8
<!-- よくある Shareボタンっぽい使い方 -->
<a href=http://www.facebook.com/dialog/feed
?app_id=118764191589481
&redirect_uri=http://blog.bornknow.com/
&link=http://born-clap.blogspot.com/
&caption=shareボタンじゃなくてdialogを使う。
&description=WEBの開発の際に、困ったことやら調べたことを、ひとまずまとめています。
&message=メッセージに表示してやる">Share Sample</a>

こんな感じ

1
2
3
4
5
6
7
8
9
10
<!-- 上の例にちょっと追記 -->
<a href=http://www.facebook.com/dialog/feed
?app_id=118764191589481
&redirect_uri=http://blog.bornknow.com/
&link=http://born-clap.blogspot.com/
&name=骨折り損のくたびれ儲け うほうほ
&caption=shareボタンじゃなくてdialogを使う。
&description=WEBの開発の際に、困ったことやら調べたことを、ひとまずまとめています。
&message=メッセージに表示してやる
&display=popup">Share Sample</a>

この例では、name オプションと display オプションを追記しています。

こんな感じ
(ポップアップ用にFacebookのヘッダーとかが綺麗になってます。)

2.SDKを使う

fb-root とか SDK の JavaScript の指定の仕方は、JavaScript Advent Calendar 2010 9日目 Facebook Javascript SDK を参考にしてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="fb-root">
<script type="text/javascript" src="http://connect.facebook.net/ja_JP/all.js" charset="utf-8"></script>
<script type="text/javascript">
FB.init({apiKey: 118764191589481, status : true, cookie : true, xfbml : true});
function share_sample() {
FB.ui({
method : 'feed'
, name : '骨折り損のくたびれ儲け SDKです'
, link : 'http://blog.bornknow.com/'
// , picture : 'サムネイル画像のURL'
, caption : 'shareボタンじゃなくてdialogを使う。'
, description : 'WEBの開発の際に、困ったことやら調べたことを、ひとまずまとめています。'
, message : 'SDKで投稿。'
}
, function(response) {
if (response && response.post_id) {
// ポストに成功
} else {
// ポストに失敗
}
}
);
}
</script>
[Share Sample](#)

Feed Dialog を使えば、独自にデザインしたボタンへの設置とかも
かなり楽ちんにできます。
ただ、Facebook の仕様ってコロコロ変わるので、この作り方も
いつまで役に立つかわかりません。

指定できるオプションは、Feed Dialog で確認できます。
参考にしたページ
facebook developers forum (Oswaldさんに感謝!)
FB.ui
Dialog Overview