社交外掛程式

網頁版「讚」按鈕

歐洲地區社交外掛程式的變更

由於在歐洲地區使用 Facebook 產品的用戶所看到的 Cookie 同意提示更新，因此您可能會開始發現社交外掛程式受到一些影響。除非歐洲地區用戶都已 1）登入其 Facebook 帳號，且 2）同意接受「應用程式與網站 Cookie」控制項，否則我們將不再支援他們使用「讚」與「留言」社交外掛程式。如果這兩項要求均獲得滿足，用戶將能看到「讚」與「留言」按鈕等外掛程式並與其互動。若未滿足上述任一項要求，用戶將無法看到這些外掛程式。

歐洲地區係指一份明確的國家／地區清單，包括：

  • 歐盟（EU）：奧地利、比利時、保加利亞、克羅埃西亞、賽普勒斯共和國、捷克共和國、丹麥、愛沙尼亞、芬蘭、法國、德國、希臘、匈牙利、愛爾蘭、義大利、拉脫維亞、立陶宛、盧森堡、馬爾他、荷蘭、波蘭、葡萄牙、羅馬尼亞、斯洛伐克、斯洛維尼亞、西班牙、瑞典

  • 非歐盟成員國，僅屬於歐洲經濟區（EEA）、歐洲自由貿易協會（EFTA）或關稅同盟：[僅屬於 EEA 或 EFTA] 冰島、列支敦斯登與挪威；瑞士：[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} />";

可能需要調整社交外掛程式的寬度來配合不同語言。

另請參閱