分享按鈕

「分享」按鈕可讓用戶在動態時報、社團或 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`	提供兩種按鈕大小：`large` 和 `small`。	`small`