網頁接入 Facebook 分享功能完整實現指南

最簡單方式：直接鏈接跳轉

<a href="https://www.facebook.com/sharer.php?u=https://www.example.com&t=自定義標題"
   target="_blank"
   onclick="window.open(this.href,'fbShare','width=800,height=400');return false;">
   分享到 Facebook
</a>

• u — 要分享的目標 URL（需 urlencode）。
• t — 分享標題（可選，Facebook 會優先抓取頁面 OG 標簽）。

標準實現：Open Graph (OG) 標簽

在頁面 <head> 中添加以下 meta 標簽，Facebook 爬蟲抓取時將直接使用這些信息生成豐富卡片：

<meta property="og:title" content="您的分享標題" />
<meta property="og:description" content="分享描述內容，建議 2-4 句" />
<meta property="og:image" content="https://www.example.com/share-image.jpg" />
<meta property="og:url" content="https://www.example.com/current-page" />
<meta property="og:type" content="website" />

圖片規範（關鍵）

• 最小尺寸： 200×200 px（官方建議 1200×630 px，比例 1.91:1）。
• 格式： JPG、PNG、GIF。
• 大小： < 8 MB。
• 若圖片小於 200px 或比例不符，分享彈窗將不顯示圖片或自動裁剪導致變形。

調試工具

使用 Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/) 輸入頁面 URL，可：

• 查看爬蟲抓取到的 OG 數據。
• 刪除緩存，強制重新抓取（修改 OG 標簽後必做）。
• 預覽分享卡片效果。

進階：JavaScript SDK 分享對話框

<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
  src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v18.0"></script>

<button onclick="shareFB()">分享</button>
<script>
function shareFB() {
  FB.ui({
    method: 'share',
    href: 'https://www.example.com/page',
    quote: '可選引言文字',
  }, function(response) {
    if (response && !response.error_message) console.log('分享成功');
  });
}
</script>

需在 Facebook 開發者後台 創建應用獲取 App ID，並初始化 FB.init({appId: 'YOUR_APP_ID', xfbml: true, version: 'v18.0'});。

常見問題

• 圖片不顯示： 檢查 OG:image URL 是否可公開訪問、尺寸是否達標、是否被防盜鏈阻擋。
• 標題/描述不更新： 使用 Sharing Debugger 刮除緩存。
• 移動端適配： 確保 og:url 指向響應式頁面或對應移動端 URL。