fb sdk share sample

fb-sdk-share-sample-click.js

// 2. onclick事件
$(function() {
  $(".js-fbshare").each(function() {
    $(this).on("click", function(e) {
      e.preventDefault();
      
      var card = $(this).closest(".card");
      
      FB.ui({
        method: "share_open_graph",
        action_type: "og.shares",
        display: "popup",
        action_properties: JSON.stringify({
          // 這邊開始抓分享時的圖、文、網址
          object: {
            "og:url": location.href,
            "og:title": card.data("title"),
            "og:description": card.data("des"),
            // image 要用絕對網址
            "og:image": card.data("bg")
          }
        })
      });
    });
  });
});

fb-sdk-share-sample-login.js

// 以下是用fb登入後，拿user的公開資料
var id, cover, name, link, gender, locale, email;
FB.login(function(response) {
  if (response.status === 'connected' || response.status === 'not_authorized') {
    FB.api('/me', 'GET', {fields: 'id, cover, name, link, gender, locale, email'}, function(response) {
      id = response.id;
      cover = response.cover.source;
      name = response.name;
      link = response.link;
      gender = response.gender;
      email = response.email;
    });
  }
  else {
    alert("請登入Facebook帳號以觀看結果")
  }
}, {scope: 'public_profile, email'});

fb-sdk-share-sample-sign.js

// 1. 註冊 FB SDK
// appId 請到 fb 應用程式註冊 https://developers.facebook.com/
window.fbAsyncInit = function() {
  FB.init({
    appId: "126712698056939",
    xfbml: true,
    version: "v3.0"
  });
  FB.AppEvents.logPageView();
};

(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/zh_TW/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
})(document, "script", "facebook-jssdk");