挑選要使用「讚」按鈕的網頁或 Facebook 粉絲專頁的網址。
將網址貼至程式碼配置器,然後調整「讚」按鈕的設定,如 width
(寬度)。點擊 Get Code
(取得程式碼)按鈕,產生您的「讚」按鈕程式碼。
複製該程式碼片段,然後貼至目標網站的 HTML。
如果已有啟用記錄應用程式事件的程式碼,請移除所貼上程式碼的 autoLogAppEvents=1
陳述式,避免重複記錄。
複製該程式碼範例,然後貼至您的網站。將 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>(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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</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 屬性 | 說明 | 預設 |
---|---|---|---|
|
| 顯示於按鈕的動詞。可為 |
|
|
| 外掛程式針對按鈕本身以外的文字所採用的色彩配置。可為 |
|
|
| 要對其按讚的網頁絕對網址。 | 目前的網址。 |
|
| 如果有未滿 13 歲的兒童會看到或使用您的網站、網路服務,或是部分服務,請務必啟用這項設定。 |
|
|
| 從多款版面中選擇適用於外掛程式的配置。可為 |
|
|
| 追蹤轉介次數所用的標籤,字元數必須少於 50,可包含英數字元和部分標點符號(目前僅限 +、/、=、-、.、:、_)。更多詳情請見常見問答。 | 無 |
|
| 指明是否要在「讚」按鈕旁邊加入「分享」按鈕。這項設定僅適用於 XFBML 版本。 |
|
|
| 指明是否要在按鈕下方顯示大頭貼照(僅適用於標準版面)。請勿在兒童導向的網站啟用這項設定。 |
|
|
| 提供兩種按鈕大小: |
|
|
| 外掛程式的寬度(僅限標準版面),但受限於寬度下限與預設值。更多詳情請見以下版面設定。 | 請見版面設定中的 |
選項如下:
版面配置 | 預設尺寸 |
---|---|
| 寬度下限:225 像素。 |
| 寬度下限:55 像素。 |
| 寬度下限:90 像素。 |
| 寬度下限:47 像素。 |
您可透過載入 Facebook JavaScript SDK 的本地化版本,變更「讚」按鈕的語言。載入 SDK 後,變更 js.src
的值來使用您的語言設定。將 en_US
替換為您的語言設定,例如 fr_FR
為法語(法國):
js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v3.2
";
您可能需要調整社交外掛程式的寬度來配合不同語言。您可在本地化和翻譯頁面找到更多資訊。