“分享”按钮

借助“分享”按钮，用户可以在链接中添加个性化消息，然后在时间线上、小组中分享，或通过 Facebook 消息分享给好友。

如果您的应用来源于 iOS 或 Android，我们建议您使用原生的 iOS 版分享对话框和 Android 版分享对话框。

如果您的网站不需要打开分享对话框的按钮或 Facebook 提供的按钮与您的网站设计不符，也可以使用网页版分享对话框来分享链接。请注意：您无需部署 Facebook 登录或通过应用审查请求任何其他权限，即可使用该插件。

“分享”按钮配置器
代码示例
设置
常见问题

分步说明

1.选择网址或主页

选取您要分享的网站网址或 Facebook 主页。

2.代码配置器

将网址粘贴到代码配置器，并调整“分享”按钮的 layout。点击 Get Code 按钮生成“分享”按钮代码。

3.复制并粘贴 HTML 代码片段

复制代码片段并粘贴到目标网站的 HTML 中。

“分享”按钮配置器

“分享”操作的 URL

布局

button_count

按钮大小

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`