「分享」按鈕

「分享」按鈕可讓用戶在生活時報、群組或 Facebook 訊息中向朋友分享連結，並加入個人化訊息。

如果您使用 iOS 或 Android 原生應用程式，我們建議您改用原生的 iOS 分享對話框和 Android 分享對話框。

如果您的網站不需要按鈕來開啟分享對話框，或者 Facebook 提供的按鈕不符合您的網站設計，您可選擇使用網頁分享對話框以分享連結。請注意：使用此附加程式無需建置 Facebook 登入，也不需要透過應用程式審查來要求獲取任何額外權限。

分享按鈕配置工具
代碼範例
設定
常見問題

步驟

1.選擇網址或專頁

挑選要分享的網站或 Facebook 專頁的網址。

2.代碼配置工具

將網址貼至代碼配置工具，然後調整分享按鈕的 layout。點擊 Get Code 按鈕，以產生您的分享按鈕代碼。

3.複製並貼上 HTML 代碼片段

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

分享按鈕配置工具

href

layout

button_count

size

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>(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 share button code -->
<div class="fb-share-button" 
data-href="https://www.your-domain.com/your-page.html" 
data-layout="button_count">
</div>

</body>
</html>

設定

設定	HTML5 屬性	描述	預設
`href`	`data-href`	要分享的網頁絕對網址。	XFBML 和 HTML5 版本會預設為目前的網址。
`lazy`	`data-lazy`	`true` 代表您可透過設定 `loading="lazy"` iframe 屬性來使用瀏覽器的延遲載入機制。其效果是，如果附加程式並非靠近檢視區，則瀏覽器不會顯示附加程式，且您可能永遠無法看到此附加程式。可以是 `true` 或 `false`（預設）其中一個。	`false`
`layout`	`data-layout`	從多款版面中選擇適用於附加程式的配置。可以是 `box_count`、`button_count` 或 `button` 中的一個。	`icon_link`
~~`mobile_iframe`~~ 已停用項目	~~`data-mobile_iframe`~~	若設定為 `true`，分享按鈕會在流動網站上方的 iframe （而非彈出式視窗）開啟分享對話框。此選項只適用於流動版，不適用桌面版。如需更多詳細資訊，請參閱流動版網頁分享對話框。	~~`false`~~
`size`	`data-size`	按鈕共有 2 種尺寸：`large` 與 `small`。	`small`