網頁專用的「讚」按鈕

點一下「讚」按鈕會對網頁的特定內容「按讚」，同時將內容分享到 Facebook。您也可以在「讚」按鈕旁邊同時顯示「分享」按鈕，如此可以讓用戶在分享內容時加入個人訊息，並且自訂分享對象。

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

步驟

1.選擇網址或網頁

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

2.程式碼配置器

將網址貼至程式碼配置器，然後調整「讚」按鈕的設定，如 width。點擊 Get Code 按鈕，產生您的「讚」按鈕程式碼。

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

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

4.如有必要，請移除重複資料

如果已具備可啟動應用程式事件登入的程式碼，請從貼上的程式碼中移除 autoLogAppEvents=1 陳述式，以避免重複登入。

「讚」按鈕配置器

按讚的網址

Width

版面設計

standard

動作類型

按鈕大小

small

顯示朋友的大頭貼照 [?]

包括分享按鈕 [?]

取得程式碼

完整程式碼範例

複製該程式碼範例，然後貼至您的網站。將 data-href 值調整為您的網站網址，接著使用 og:*** 中繼標籤調整您的連結預覽；og:url 和 data-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`	顯示於按鈕的動詞。可為 `like` 或 `recommend`	`like`
`colorscheme`	`data-colorscheme`	外掛程式針對按鈕本身以外的文字所採用的色彩配置。可為 `light` 或 `dark`。	`light`
`href`	`data-href`	要對其按讚的網頁絕對網址。	目前的網址。
`kid_directed_site`	`data-kid-directed-site`	如果有未滿 13 歲的兒童會看到或使用您的網站、網路服務，或是部分服務，請務必啟用這項設定	`false`
`layout`	`data-layout`	從多款版面中選擇適用於外掛程式的配置。可為 `standard`、`button_count`、`button` 或 `box_count`。更多詳情請參閱常見問題。	`standard`
`ref`	`data-ref`	追蹤轉介次數所用的標籤，字元數必須少於 50，可包含英數字元和部分標點符號（目前僅限 +、/、=、-、.、:、_）。更多詳情請見常見問答。	無
`share`	`data-share`	指明是否要在「讚」按鈕旁邊加入「分享」按鈕。這項設定僅適用於 XFBML 版本。	`false`
`show_faces`	`data-show-faces`	指明是否要在按鈕下方顯示大頭貼照（僅適用於標準版面）。請勿在兒童導向的網站啟用這項設定。	`false`
`size`	`data-size`	提供兩種按鈕大小：`large` 和 `small`。	`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=v4.0";

您可能需要調整社交外掛程式的寬度來配合不同語言。您可在本地化和翻譯頁面找到更多資訊。