社交附加程式

網頁專用的讚好按鈕

對歐洲地區社交附加程式所作的變更

由於系統會向歐洲地區使用各項 Facebook 產品的用戶顯示更新的 Cookie 同意提示，您可能會看見社交程式受到一些影響。我們將停止支援歐洲地區用戶的「讚好」和「回應」社交程式，除非用戶 1) 已登入其 Facebook 帳戶，以及 2) 已同意「應用程式及網站 Cookie」控制。達成上述兩項要求，用戶便可看見「讚好」或「回應」按鈕等附加程式並與之互動。如果兩者中一項未能達到，用戶便無法看見附加程式。

歐洲地區由一系列特定國家／地區組成，當中包括：

  • 歐盟 (EU)：奧地利、比利時、保加利亞、克羅地亞、塞浦路斯、捷克、丹麥、愛沙尼亞、芬蘭、法國、德國、希臘、匈牙利、愛爾蘭、意大利、拉脫維亞、立陶宛、盧森堡、馬爾他、荷蘭、波蘭、葡萄牙、羅馬尼亞、斯洛伐克、斯洛文尼亞、西班牙、瑞典

  • 僅屬於歐洲經濟區／屬於歐洲自由貿易聯盟或關稅同盟的非歐盟成員：[僅屬於歐洲經濟區/屬於歐洲自由貿易聯盟] 冰島、列支敦士登及挪威；瑞士：[歐盟關稅同盟] 所有海峽群島、曼島、摩納哥；塞浦路斯英屬基地區；[歐洲關稅同盟] 安道爾、聖馬利諾、梵蒂岡城。

  • 屬於歐洲外延地區 (OMR) 的非歐盟成員：馬提尼克島、馬約特、瓜德羅普島、法屬圭亞那、留尼汪島、聖馬丁、馬德拉、亞速爾、加那利群島。
  • 英國（所有不列顛群島）

獲取自訂讚好按鈕

使用讚好按鈕配置工具獲取讚好按鈕程式碼，以插入到您的網頁中。

  1. 設定您要放置讚好按鈕的網頁網址
  2. 自訂讚好按鈕
  3. 查看按鈕預覽
  4. 點擊獲取程式碼，然後將程式碼複製並貼在網頁中

「讚好」按鈕配置工具

讚好的網址
Width
版面設計
動作類型
按鈕大小
取得代碼

使用開放式圖表中繼標籤編輯連結預覽。og:url 標籤和 data-ref 屬性的網址應為一致。

完整程式碼範例

已設定格式以便閱讀。

<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use open graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous" 
        src="https://connect.facebook.net/en_US/sdk.js#xfbml=1
             &version={graph-api-version}
             &appId={your-facebook-app-id}" 
        nonce="FOKrbAYI">
  </script>

  <!-- Your like button code -->
  <div class="fb-like" 
       data-href="https://www.your-domain.com/your-page.html" 
       data-width=""
       data-layout="standard" 
       data-action="like" 
       data-size="small"  
       data-share="true">
  </div>

</body>
</html>

讚好按鈕 HTML5 屬性

HTML5 屬性 說明

data-action

顯示於按鈕的動詞。可以是 like（預設）或 recommend。

data-colorscheme

附加程式為按鈕本身以外的文字所採用的色彩配置。可以是 light（預設）或 dark。

data-href

要對其讚好的網頁網址。

data-kid-directed-site

如有未滿 13 歲的兒童會看到或使用您的網站、網絡服務或部分服務，請務必將此項設為 true。預設為 false。

data-layout

從多款版面中選擇適用於附加程式的配置。可以是 standard（預設）、button_count、button 或 box_count 中的任何一種。詳情請參閱常見問題。

data-lazy

true 代表您可透過設定 loading="lazy" iframe 屬性來使用瀏覽器的延遲載入機制。隨之產生的影響是，如果附加程式並非靠近檢視區，則瀏覽器不會顯示附加程式，且您可能永遠無法看到此附加程式。可以是 true 或 false（預設）其中一個。

data-ref

此為追蹤轉介次數所用的標籤，必須少於 50 個字元，可包含英數字元和部分標點符號（目前僅限 +/=-.:_）。詳情請參閱常見問題。

data-share

指定是否在讚好按鈕旁顯示分享按鈕，即 true 或 false（預設）。這項設定僅適用於 XFBML 版本。

data-size

按鈕有 2 種大小可選，即 large 和 small（預設）。

data-width

附加程式的寬度（僅限標準版面），須受限於寬度下限與預設值。請參閱「版面設定」表格以進一步了解詳情。

版面設定

「版面設定」為可選項。

版面 預設尺寸

standard

寬度下限：225 像素。
預設寬度：450 像素。
高度：35 像素（不含相片）或 80 像素（含相片）。

box_count

寬度下限：55 像素。
預設寬度：55 像素。
高度：65 像素。

button_count

寬度下限：90 像素。
預設寬度：90 像素。
高度：20 像素。

button

寬度下限：47 像素。
預設寬度：47 像素。
高度：20 像素。

變更語言

您可載入 Facebook JavaScript SDK 的本地化版本，更改讚好按鈕的語言。將 en_US 替換為您的語言設定，例如 fr_FR 為法文（法國）。

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version={graph-api-version} />";

視乎您選擇的語言，您或需要調整社交附加程式的寬度。

另請參閱