廢話前言：

已經很久沒寫部落格了，其實很懶得寫，但這東西真的花了我很多時間

一個專案可能半天就寫完了，剩下一天半都在處理 fb cache 的問題

facebook 官方提供的 Debugger 工具不知道按過幾百次了，抓到的圖文還是舊的

所以以下提供解決的方法，會造成這樣的原因有很多種

但最重要的是.....最好要求需求單位文案不要改來改去，因為 fb 的 cache 真的很難搞

 

要跳過下面的廢話，直接看解決方式的按這裡

 

分享圖文有幾種方式

1. 分享連結：

你可以使用 javascript SDK 的 Share Dialog 去做分享，或是直接將連結貼在 fb 塗鴉牆上

https://developers.facebook.com/docs/sharing/reference/feed-dialog

fb 就會根據你的的網址去解析你頁面的 og tag 來呈現預覽圖文

可以參考這一篇：

Facebook 文章分享的預覽圖片，顯示為寬版大圖的設定方式 - og:image 的 image size 條件

以下是 javascript SDK的參數 (如果要用的話)

參數 說明

app_id

您應用程式的唯一識別碼。必要項目。

redirect_uri

用戶點擊對話方塊上的按鈕後重新導向至的網址。使用網址重新導向時為必要項目。

display

決定對話方塊的轉譯方式。

  • 如果您使用網址重新導向對話方塊實作，則會在 Facebook.com 中以完整網頁顯示。此顯示類型稱為 page。
  • 如果您使用其中一個 iOS SDK 或 Android SDK 來叫用對話方塊，則會自動指定此項目並針對裝置選擇適當的顯示類型。
  • 如果您使用 Facebook JavaScript SDK，此項目將針對登入您應用程式的用戶預設為強制回應 iframe 類型，在 Facebook.com 上的遊戲中使用時設為 async，其他情況則設為 popup 視窗。如有需要，您還可以在使用 Facebook JavaScript SDK 時強制使用 popup 或 page 類型。
  • 行動版網頁應用程式將一律預設為 touch 顯示類型。

share 參數

參數 說明 預設

href

附加至此貼文的連結。使用 share 方法時為必要項目。在此網址的網頁內包含開放社交關係圖中繼標籤，以自訂分享的動態。

目前的網址

hashtag

由開發人員指定的主題標籤，用以新增至分享內容。用戶仍然可以移除對話方塊中的主題標籤。主題標籤應納入主題符號，例如 #facebook。

null

quote

要與連結一同分享的引文（文章的摘要式引文），引文可由用戶反白標示，或者由開發人員預先定義。

null

mobile_iframe

如果設定為 true，分享按鈕就會在您網站上方的 iframe 中開啟分享對話方塊（若要瞭解詳情，請參閱行動版網頁分享對話方塊。此選項只適用於行動版，不適用於桌面版。

false

 

2. 使用 javascript SDK Feed Dialog 去分享

https://developers.facebook.com/docs/sharing/reference/feed-dialog

這樣的好處是你可以自己定義分享時的標題與描述，並且可以自己決定分享的圖檔是哪一張

提供的參數有以下這些

參數 說明

app_id

您應用程式的唯一識別碼。必要項目。

redirect_uri

用戶點擊對話方塊上的按鈕後重新導向至的網址。使用網址重新導向時為必要項目。

display

決定對話方塊的轉譯方式。

  • 如果您使用網址重新導向對話方塊實作，則會在 Facebook.com 中以完整網頁顯示。此顯示類型稱為 page。
  • 如果您使用其中一個 iOS SDK 或 Android SDK 來叫用對話方塊，則會自動指定此項目並針對裝置選擇適當的顯示類型。
  • 如果您使用 JavaScript SDK，此項目將針對登入您應用程式的用戶預設為強制回應 iframe 類型，在 Facebook.com 上的遊戲中使用時則設為 async，其他情況則設為 popup 視窗。如有需要，您還可以在使用 JavaScript SDK 時強制使用 popup 或 page 類型。
  • 行動版網頁應用程式將一律預設為 touch 顯示類型。

from

張貼訊息的用戶的編號。如果未指定，將預設為目前的用戶。如果指定，則必須是用戶編號或者用戶所管理之粉絲專頁的編號。

to

將對其發佈此動態的個人檔案編號。如果未指定，將預設為 from 的值。編號必須同為使用您的應用程式的朋友。

link

附加至此貼文的連結。用戶還能夠使用「動態」對話方塊分享純文字近況更新，不含您應用程式的內容；只要將 link 參數保留空白即可。

picture

附加至此貼文的圖片網址。圖片必須至少 200x200 像素。如需尺寸的詳細資訊，請參閱分享最佳作法文件。

source

附加至此貼文的媒體檔案（SWF 或 MP3）網址。如果為 SWF，您還必須指定 picture 來提供影片的縮圖。

name

連結附件的名稱。

caption

連結的說明（顯示在連結名稱下方）。如果未指定，此欄位會自動填入連結的網址。

description

連結的說明（顯示在連結說明下方）。如果未指定，此欄位會自動填入從連結抓取的資料，通常是網頁的標題。

ref

此引數為逗號分隔清單，由最多 5 個不同項目組成，每個項目長度至少 1 個字元至最多 15 個字元，並擷取自「0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_」集合。Facebook 洞察報告會使用每個類別用來協助您衡量不同類型貼文的成效

code 也很簡單，首先引用 fb js sdk

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

  (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>

再來就可以用 FB.ui 的 feed method 去自訂對話框了

<script>
document.getElementById('share').onclick = function () {
FB.ui({
app_id: '你的appid',
method: 'feed',
link: 'http://87.87.87.87/talk/index.aspx',
picture: 'http://87.87.87.87/talk/images/cover.jpg',
caption: '最代表你的經典語錄',
description: '看過大起也經歷過大落，面對黑暗我們都有自己的態度，究竟最能代表你的經典語錄是哪一句話？還不點進來看看'
}, function (response) {
console.log(response);
});
}
</script>

 

 

廢話那麼多，接下來才是這篇文章的重點

當你發現你分享的圖文被 cache 了該怎麼辦，可以用下面的方式來一步一步進行檢查

第一件事就是先到官方的 Sharing Debugger 去重新抓取

https://developers.facebook.com/tools/debug/sharing/

先按下除錯，看看抓取是否有錯誤訊息，有的話就把它修正

沒問題再按下 scrape again 重抓一次頁面，此時照理講會清掉 cache，沒清掉的話等下再說

但先來看看除錯時會遇到的問題

 

在除錯時可能會遇到幾個問題，而最莫名其妙的大概就是這個

 Provided og:image...image link ... could not be downloaded because it exceeded the maximum allowed sized of 8Mb or your server was too slow to respond.

og:image 的圖片無法被下載，因為圖片可能超過允許最大的 8MB，或是你的伺服器太慢回應

但問題是我的圖檔才 52k，而伺服器回應過慢的問題，我圖檔連結貼在瀏覽器上都是秒開

網路上遇到這問題的人也很多，也被回報為 bug

https://developers.facebook.com/bugs/1626463061012181/

這個時候可以來這邊測試一下，debugger 網址下方有個 scraped url

https://developers.facebook.com/tools/debug/sharing/

連結多按個幾次看看抓取的狀況

如果你嘗試抓取多次，偶爾會出現 Query timed out 的話

請檢查你的網路設備 ex:防火牆、或是負載平衡之類的

依照我們公司遇到的狀況，我們有一個domain轉多ip的機制，當用戶透過一個domain 的網址進來訪問

設備會依照繁忙程度來指向其中一個 ip，所以抓取時常會出現 Query timed out 的錯誤訊息

如果有人遇到一樣的問題，可以建議把 domain 改成 IP 來測試抓取，一般來說可以解決這個問題

至少我的問題是這樣解決了

 

Could Not Connect To Server 這個錯誤，基本上跟上面遇到的問題一樣，Facebook 沒辦法爬你的網頁

分享的APP ID不明確，這個比較簡單，因為你的 FB.ui feed method 忘了設定 APP ID

 

以上問題都排除了，也按下 debugger 工具的 Scrape Again 多次之後還是抓到舊網頁的話

請檢視一下下方抓取到的 open graph 屬性值是否正確

如果都是正確的，但還是抓到舊資料的話，有幾種解決方式，以下面的 code 為例

<script>
document.getElementById('share').onclick = function () {
FB.ui({
app_id: '你的appid',
method: 'feed',
link: 'http://87.87.87.87/talk/index.aspx',
picture: 'http://87.87.87.87/talk/images/cover.jpg',
caption: '最代表你的經典語錄',
description: '看過大起也經歷過大落，面對黑暗我們都有自己的態度，究竟最能代表你的經典語錄是哪一句話？還不點進來看看'
}, function (response) {
console.log(response);
});
}
</script>

1. js 的內容盡量不要使用動態抓取

例如下面這樣，你可能會用 jQuery 去動態給值

但我試了一下發現這樣被 cache 的機率頗高，所以內容盡量是直接從 server 吐出來，不要在 js 動態抓

而在 server 要盡量設定 no cache control

<script>
document.getElementById('share').onclick = function () {
FB.ui({
app_id: '你的appid',
method: 'feed',
link: $('#link').val(),
picture: 'http://87.87.87.87/talk/images/cover.jpg',
caption: $('#caption').val(),
description: $('#description').html()
}, function (response) {
console.log(response);
});
}
</script>

 

2. 如果圖片一直抓到舊的，嘗試在後面加上 Math.random()

例如這樣：

picture: 'http://87.87.87.87/talk/images/cover.jpg?ver=' + Math.random();

讓圖檔路徑每次不同避免 cache，js 改了記得 og:image 也改一下

 

3. link 參數的目標頁面，og tag 的設定要正確

以下面這張分享的對話框來說

link 參數的目標網址，他的 og:title 內容會顯示在藍框的位置

而綠框是 js 的 picture 參數

紅框是 js 的 caption、description 參數

我搞那個藍框的部分搞很久，因為壓根沒想到要去 debugger 工具 run 那個連結

因為你的活動頁跟你的link 參數不見得會一致

 

4. 使用 IP 或換個頁面進行測試

依照上面所說的，如果你一直抓到舊資料，那你可以把頁面改名，變成一個新的 URL去測試

因為 facebook cache 是根據連結來 cache，你換網址就會重新抓取

用 IP 來測試的原因是，至少可以先過濾掉 domain 轉換 IP時可能造成的問題

 

5. 指定 og:image:width 與 og:image:height

這個蠻重要，依照官方文件所說

如果你不想每次調整圖片都要 run 一次 debug 重抓一次

可以使用 og:image:width 跟 og:image:height  來直接指定圖片寬高

就會立即呈現在頁面上，請參考

https://developers.facebook.com/docs/sharing/best-practices

2. Use og:image:width and og:image:height Open Graph tags
Using these tags will specify the image to the crawler so that it can render it immediately without having to asynchronously.

但是 og:image 的寬高設定，與你提供的圖片，會影響到分享時顯示在對話框上的圖片

這句話很玄，直接看例子

如果設定圖片的尺寸不對的話，你分享出去的圖片可能會莫名其妙被 facebook 截掉

測試的結果如下：

如果原圖尺寸小於 600 x 315 的話，分享後的圖片會是完整的不會被截圖

但是分享出去的圖片會是半版，像官網說的這樣

 

如果分享的圖片是大於 600 分享後就會是滿版的圖

但是要注意的是圖片不能超過 600太多，如果超過的話 facebook 會把你圖片的上下截掉

所以最適合的尺寸就是 600 x 315 

有關圖片尺寸設定可以看之前這篇文章

Facebook 文章分享的預覽圖片，顯示為寬版大圖的設定方式 - og:image 的 image size 條件

 

基本上按照上面所說的就逐步排除，就可以擺脫 80 ~90%被 cache 的問題了

 

 

以上分享給在FB貼文鬼打牆的人們

 

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 小雕 的頭像
    小雕

    小雕雕的家

    小雕 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄