網頁專用的「讚好」按鈕

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

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

步驟

1.選擇網址或專頁

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

2.程式碼配置工具

將網址貼至程式碼配置器,然後調整「讚好」按鈕的設定,如 width(寬度)。點擊 Get Code(取得程式碼)按鈕,產生您的「讚好」按鈕程式碼。

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

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

「讚好」按鈕配置工具

讚好的網址
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="http://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="http://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your like button code -->
  <div class="fb-like" 
    data-href="http://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

從多款版面中選擇適用於附加程式的配置。可為 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 = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.10“; 

支援的語言設定列於 Facebook 語言設定 XML 檔中。 您可能需要調整社交附加程式的寬度來容納不同的語言。您可在本地化和翻譯頁面找到更多資訊。