web facebook分享對接注意事項

基本步驟

1. 引入Facebook Sdk （建議異步引用）
2. 初始化基礎信息
3. 指定分享頁面（包含og元數據）
4. 點擊分享事件及參數設定

具體代碼

// jquery 示例

$.getScript("https://connect.facebook.net/zh_HK/sdk.js", function(response, status) {
    // 異步引入sdk
    if (status === "success") {
        // 成功加載后，初始化基礎設置
        FB.init({
            appId            : '339526026920454',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v3.2'
        });
    }
});

$('#btn').on('click', function() {
    FB.ui({
        method: 'share',
        href: 'shareUrl', // 需要分享的網頁地址
        hashtag: '#facebookshare', // 需要分享的hashTag，不能有任何符號，且以#開頭，只能設置一個
        quote: 'shareDes' // 分享的一句話，建議不要超過15個字符
    }, function (response) {
        // 回調
    });
});

// vue 示例
<script>
export default {
  props: {
    src: {
      type: String,
      required: true
    }
  },
  render: function(createElement) {
    var self = this;
    return createElement('script', {
      attrs: {
        type: 'text/javascript',
        src: this.src
      },
      on: {
        load: function(event) {
          self.$emit('load', event);
        },
        error: function(event) {
          self.$emit('error', event);
        },
        readystatechange: function(event) {
          if (this.readyState == 'complete') {
            self.$emit('load', event);
          }
        }
      }
    });
  }
};
</script>

<remote-script
  src="https://connect.facebook.net/zh_HK/sdk.js"
  @load="loadFBsdkSuccess"
  @error="loadFBsdkError"
></remote-script>

注意事項

1. hashtag 屬性只能設置一個，且中間不能有任務符號，示例： hashtag: "#facebook"
2. quote 設置該屬性后，分享的彈出框圖片會變成小圖，左右結構展示，不設置時圖片為最大程度顯示
3. 分享網頁的圖片尺寸為： 520*282，需要設置og:image:width og:image:height來避免第一次分享時Facebook抓不到圖片的問題
4. 分享的地址的查詢參數有且只能帶一個，示例：host/index.html?query=，帶兩個參數是不能被正確識別的，例如：host/index.html?query=test&query1=test，可以encodeURI，或者atob將多個參數加密傳遞