「分享」按鈕

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

如果您使用的是 iOS 或 Android 原生應用程式,建議改為使用原生的 iOS 分享對話框Android 分享對話框

如果您的網站不需要按鈕來開啟分享對話框,或者 Facebook 提供的按鈕不符您的網站設計,另有網頁分享對話框可用於分享連結。請注意:使用此附加程式無須建置「Facebook 登入」,也不需要透過應用程式審查來請求任何額外權限。

步驟

1.選擇網址或專頁

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

2.程式碼配置工具

將網址貼至程式碼配置工具,然後調整「分享」按鈕的 layout。點擊 Get Code(取得程式碼)按鈕,產生您的「分享」按鈕程式碼。

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

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

「分享」按鈕配置工具

分享的網址
版面設計
按鈕大小

完整程式碼範例

複製該程式碼範例,然後貼至您的網站。將 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="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";
    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 版本會預設為目前的網址。

layout

data-layout

從多款版面中選擇適用於附加程式的配置。可為 box_countbutton_countbutton 其中之一。

icon_link

mobile_iframe

data-mobile_iframe

若設定為 true,分享按鈕會在流動網站上方的 iframe (而非跳出視窗)開啟分享對話框。此選項只適用於流動版,不適用桌面版。如需詳細資訊,請參閱流動網站分享對話框

false

size

data-size

按鈕共有 2 種尺寸: largesmall

small