圖文形式分享網頁到facebook (要求：可以多個圖片切換選擇)

分享網頁到facebook的功能很常見，之前都是簡單的網頁分享，沒遇到什么砍兒。這次的需求相比之前有一丁點特殊，就是圖片得是用戶指定選擇的。

fb文檔地址：https://developers.facebook.com/docs/sharing/web

 

🌈 分享基本注意點

 

注意1⃣️：開放圖譜標記 

啟用分享功能之前，需要使用開放圖譜標簽來標記頁面的 HTML。meta標簽的這些屬性包括我們在用戶分享文章時具體想要呈現的與文章有關的描述性元數據。

這有助於確保當用戶通過您的網站分享內容時，您的內容將以您預期的方式顯示在 Facebook 上，並包含標題、說明以及縮略圖。

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

 

注意2⃣️：url不許帶參數

<meta property="og:url"           content="https://www.your-domain.com/your-page.html" />

   ⚠️content中的網址，不得包含任何計數器和會話變量！

   🙅錯誤示范：https://www.your-domain.com/your-page.html?a=1

 

 

注意3⃣️：href鏈接和meta部分的og:url必須一模一樣

 

//分享代碼如下
location.href = `https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&u=${url}`

//封裝方法如下：（除此之外，還有其他分享方式）
export const fbShare = (title, url = "https://www.baidu.com") => {
    url =
        "https://www.facebook.com/sharer/sharer.php?u=" +
        encodeURIComponent(url);
    url += "&title=" + title;
    openNewWindow(url);
};

 

 

 

📋分享方式總結：

 

      1、社交插件: 分享按鈕 

           https://developers.facebook.com/docs/plugins/share-button/#configurator

     

      2、網頁版分享對話框

           JavaScript 版 Facebook SDK 現可提供分享對話框，使用 FB.ui 函數（method 參數為 share）觸發分享對話框。

📒<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

　　

📒<script>
window.fbAsyncInit = function () {
    FB.init({
        appId: '461323294709056',
        autoLogAppEvents: true,
        xfbml: true,
        version: 'v4.0'
    });
};
</script>

 

📒FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/',   //⚠️注意這個href要跟開放圖譜標記mate標簽的url對應。
}, function(response){});

　　

 

  🌈 分享小進階（mnsen-official火影項目）

 

(需求：可以多個圖片切換選擇)

Facebook 爬蟲將抓取所分享網址的 HTML，開放圖譜標簽會提供有關頁面的結構化信息。

當網頁生成的時候，fb爬蟲就已經爬取了，所以想后期通過改變mata的og:image的content屬性來改變fb分享的圖片就不可能了。

查看了fb的開發文檔，“動態發布對話框”本以為會有希望解決，結果發現我們要用的參數還恰是不推薦的參數，也沒有試驗成功。

 

 

所以我就向我們組“老中醫”（把脈精准，擅長解決各種疑難雜的強哥）請教，用了個巧方法，然后百般試驗解決了這個看似簡單的需求。

如下：

 

 

有幾張圖，就多生成幾個image.html頁面。

🚩 分享之前選擇要分享哪個圖就意味着要選擇要分享哪個頁面。

 分享的幾個頁面設置跳轉，跳轉至當前分享的頁面。

 

 

 

🌈 調試器的使用

 

對於og:url內容地址，如果你不知道facebook是否可以識別，那么就把你的網頁放到 facebook for deverlopers 中測試一下，該結果就會顯示出你的網頁內，是否包含了必要參數。

分享調試器： https://developers.facebook.com/tools/debug/.  

 

通過該調試器，將顯示爬蟲抓取該網頁的元標簽以及任何錯誤或警告。

 

 

🌈申請FB app-id

 

創建應用

我的應用，添加測試用戶。