網頁專用的讚好按鈕

當瀏覽您網頁的用戶點擊讚好按鈕時,便會觸發應用程式事件,以將這個讚好記錄在 Facebook 上。

獲取自訂讚好按鈕

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

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

讚好按鈕配置工具

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

請注意,如果您已經有記錄應用程式事件,請移除按鈕程式碼中的 autoLogAppEvents=1 陳述式,以避免重複記錄。

使用開放式圖表中繼標籤編輯連結預覽。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}
             &autoLogAppEvents=1" 
        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_countbuttonbox_count 中的任何一種。如欲了解更多詳情,請參閱常見問答

data-lazy

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

data-ref

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

data-share

指明是否要在讚好按鈕旁邊加入分享按鈕,即 truefalse(預設)。這項設定僅適用於 XFBML 版本。

data-size

按鈕共有 2 種尺寸:largesmall(預設)。

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} />"; 

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