網頁專用的「讚好」按鈕

只要點一下「讚好」按鈕,就代表您對一段網絡內容「讚好」,同時將內容分享到 Facebook。您也可以在「讚好」按鈕旁邊同時顯示「分享」按鈕,如此可以讓用戶在分享內容時加入個人訊息,並且自訂分享對象。

「讚好」按鈕配置工具程式碼範例設定調整語言常見問題

步驟

1.選擇網址或專頁

挑選要使用「讚好」按鈕的網頁或 Facebook 專頁的網址。

2.程式碼配置工具

將網址貼至程式碼配置工具,然後調整讚好按鈕的設定,如 width。點擊 Get Code 按鈕以產生您的讚好按鈕程式碼。

3.複製並貼上 HTML 程式碼片段

複製該程式碼片段,然後貼至目標網站的 HTML。

4.刪除重複內容(如有需要)

如果您已擁有可用來啟動應用程式事件記錄功能的程式碼,則可刪除您所貼的程式碼之 autoLogAppEvents=1 陳述式,以避免重複記錄內容。

讚好按鈕配置工具

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

完整程式碼範例

複製該程式碼範例,然後貼至您的網站。將 data-href 值調整為您網站的網址。接著使用 og:*** 中繼標籤調整您的連結預覽。og:urldata-href 應使用相同的網址。

<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=v3.0"></script>

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

</body>
</html>
自訂連結預覽

設定

除了以上設定,您還可變更以下項目:

設定 HTML5 屬性 描述 預設

action

data-action

顯示於按鈕的動詞。可以是 likerecommend

like

colorscheme

data-colorscheme

附加程式為按鈕本身以外的文字所採用的色彩配置。可以是 lightdark

light

href

data-href

要對其讚好的網頁絕對網址。

目前的網址。

kid_directed_site

data-kid-directed-site

如果有未滿 13 歲的兒童會看到或使用您的網站、網絡服務或部分服務,請務必啟用這項設定

false

layout

data-layout

從多款版面中選擇適用於附加程式的配置。可以是 standardbutton_countbuttonbox_count 其中一個。如欲了解更多詳情,請參閱常見問答

standard

ref

data-ref

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

沒有

share

data-share

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

false

show_faces

data-show-faces

指明是否要在按鈕下方顯示個人檔案相片(僅適用於標準版面)。請勿在兒童導向的網站啟用這項設定。

false

size

data-size

按鈕共有 2 種尺寸:largesmall

small

width

data-width

附加程式的寬度(僅限標準版面),須受限於寬度下限與預設值。如欲了解更多詳情,請參閱下方的「版面設定」

請查看版面設定中的 standard

版面設定

選項如下:

版面 預設尺寸

standard

寬度下限:225 像素。
預設寬度:450 像素。
高度:不含相片為 35 像素;含相片為 80 像素。

box_count

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

button_count

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

button

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

變更語言

您可載入 Facebook JavaScript SDK 的本地化版本,更改讚好按鈕的語言。載入 SDK 時,您可更改 js.src 的值,以使用您的本地語言。將 en_US 改為您想要的本地語言,例如代表法文(法國)的 fr_FR

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v5.0"; 

視乎您選擇的語言,您或需要調整社交附加程式的寬度。您可在本地化和翻譯頁面找到更多資訊。