網頁專用的「讚」按鈕

當網頁訪客點擊「讚」按鈕時,將觸發應用程式事件以記錄 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

提供兩種按鈕大小: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} />"; 

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