最近、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