社交外掛程式

網頁專用的「讚」按鈕

當網頁訪客點擊「讚」按鈕時，將觸發應用程式事件以記錄 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_count、button 或 box_count 其中一項。更多詳情請參閱常見問題。

data-lazy

true 意指透過設定 loading="lazy" iframe 屬性來使用瀏覽器的消極式載入機制。其效果為，如果外掛程式沒有靠近檢視區，瀏覽器將不會呈現該外掛程式，並且可能永遠不會顯示。可為 true 或 false（預設值）其中之一。

data-ref

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

data-share

指明是否要在「讚」按鈕旁邊加入「分享」按鈕：true 或 false（預設）。這項設定僅適用於 XFBML 版本。

data-size

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

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

另請參閱