輕鬆學會 Fb developer api - 三步驟搞定串聯FB分享

前情概要: 最近做了一個案子，業主說要做分享活動可取得紅利，身為開發者的我們當然..只能...好吧!!沒問題!!!因此開啟了序幕...

fb 提供一組  FB.ui()方法 ，用於觸發dialogs，fb提供下列呼叫方法，這篇針對share dialog做說明:

• The Share Dialog allows someone to post a link or Open Graph story to their profile.
• The Login Dialog allows someone to use Facebook Login to grant permissions to an app.
• The Add Page Tab Dialog allows someone to add an app to a tab on a Facebook Page which they admin.
• The Requests Dialog allows someone to send a request to one or more of their friends from a game.
• The Send Dialog allows someone to send a Facebook Message to one or more of their friends.
• The Payments Dialog allows people to purchase virtual items for your app.

1. 簡單安裝 JAVASCRIPT SDK: 不需要任何複雜的安裝，初始化成功後，fb會採用非同步讀取SDK放置頁面中，是不是很easy啊!

1. 在html中加入下列代碼
2. your-app-id替換自己的fb app id即可

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.4'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

2.  輕鬆觸發fb ui分享的dialog : 將your url 替換成妳的url 然後搞定!簡單吧!! response會吐回成功或失敗的方法。

function share()
{
FB.ui(
 {
   method: 'share',
   href: 'your url',
 },
 // callback
 function(response) {
   if (response && !response.error_message) {
     alert('分享成功後即可領取紅利!');
   } else {
     // alert('Error while posting.');
   }
 }
)
};

3. 做手工藝的時間到囉，給他一個button 來觸發FB分享吧!

<button onclick="share()">點此分享</button>



END : 是不是真的三步驟就搞定啦!
附上官方文件:https://developers.facebook.com/docs/sharing/web
快開啟你的分享之旅吧~