社交插件

网页版“赞”按钮

欧洲地区社交插件的变更

由于系统会向欧洲地区使用 Facebook 产品的用户显示更新过的 Cookie 同意提示，因此可能会发现社交插件受到一些影响。对于欧洲地区的用户，我们将不再支持“赞”和“评论”社交插件，除非这些用户：1) 已登录到他们的 Facebook 帐户中，并且 2) 已同意接受“应用和网站 Cookie”控件。如果已同时满足这两项要求，则用户将能够看到“赞”或“评论”按钮之类的插件，还能与其互动。如果未满足上列任一要求，则用户将不能看到那些插件。

欧洲地区是指列出的一系列特定国家/地区，其中包括：

  • 欧盟 (EU)：奥地利、比利时、保加利亚、克罗地亚、塞浦路斯共和国、捷克共和国、丹麦、爱沙尼亚、芬兰、法国、德国、希腊、匈牙利、爱尔兰、意大利、拉脱维亚、立陶宛、卢森堡、马耳他、荷兰、波兰、葡萄牙、罗马尼亚、斯洛伐克、斯洛文尼亚、西班牙、瑞典

  • 仅属于欧洲经济区 (EEA)/属于欧洲自由贸易联盟 (EFTA) 或关税同盟的非欧盟 (EU) 成员：[仅属欧洲经济区/属于欧洲自由贸易联盟] 冰岛、列支敦士登和挪威；瑞士：[欧盟关税同盟] 所有海峡群岛、马恩岛、摩纳哥；塞浦路斯英属基地；[欧洲关税同盟] 安道尔、圣马力诺、梵蒂冈。

  • 属于欧洲外延地区 (OMR) 的非欧盟成员：马提尼克岛、马约特岛、瓜德罗普岛、法属圭亚那、留尼汪岛、圣马丁岛、马德拉群岛、亚速尔群岛、加那利群岛。
  • 英国（所有不列颠群岛）

获取自定义“赞”按钮

使用“赞”按钮配置器获取“赞”按钮代码，以插入到您的网页中。

  1. 设置您要放置“赞”按钮的网页网址
  2. 自定义“赞”按钮
  3. 查看按钮预览
  4. 点击获取代码，然后将代码复制并粘贴到您的网页中

“赞”按钮配置器

连接“赞”的 URL
Width
布局
操作类型
按钮大小
获取代码

使用开放图谱元标签编辑链接预览。og:url 标签和 data-ref 属性的网址应该相同。

完整代码示例

为方便阅读，示例格式已经过调整。

<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 async defer crossorigin="anonymous" 
        src="https://connect.facebook.net/en_US/sdk.js#xfbml=1
             &version={graph-api-version}
             &appId={your-facebook-app-id}" 
        nonce="FOKrbAYI">
  </script>

  <!-- Your like button code -->
  <div class="fb-like" 
       data-href="https://www.your-domain.com/your-page.html" 
       data-width=""
       data-layout="standard" 
       data-action="like" 
       data-size="small"  
       data-share="true">
  </div>

</body>
</html>

“赞”按钮 HTML5 属性

HTML5 属性 描述

data-action

在按钮上显示的动词。可以是 like（默认）或 recommend。

data-colorscheme

插件使用的配色方案，用于控制除按钮外任何文本的颜色。可以是 light（默认）或 dark。

data-href

将获得“赞”的网页的网址。

data-kid-directed-site

如果您的网站、在线服务或服务的一部分面向不满 13 岁的儿童，您必须将此属性设置为 true。默认值为 false。

data-layout

从插件可用的几种布局中选择一种。可以是 standard（默认）、button_count、button 和 box_count 中的任何一种。详情请参阅常见问题。

data-lazy

true 表示您可通过设置 loading="lazy" iframe 属性来使用浏览器的延迟加载机制。其效果是，如果插件不在视区附近，则浏览器不会显示插件，且您可能始终无法看到该插件。可以是 true 和 false（默认）中的一个。

data-ref

用于追踪推荐的标签，必须少于 50 个字符，可包含字母数字字符和部分标点（当前有 + / = - . : _）。详情请参阅常见问题。

data-share

指定是否在“赞”按钮旁添加一个“分享”按钮；值为 true 或 false（默认）。这只对 XFBML 版本起作用。

data-size

按钮有 2 种大小可选，即 large 和 small（默认）。

data-width

插件的宽度（仅限标准布局），受最小宽度和默认宽度限制。详情请查看“布局设置”表。

布局设置

“布局设置”为可选项。

布局 默认大小

standard

最小宽度：225 像素。
默认宽度：450 像素。
高度：35 像素（不含照片）或 80 像素（含照片）。

box_count

最小宽度：55 像素。
默认宽度：55 像素。
高度：65 像素。

button_count

最小宽度：90 像素。
默认宽度：90 像素。
高度：20 像素。

button

最小宽度：47 像素。
默认宽度：47 像素。
高度：20 像素。

更改语言

您可以通过加载 Facebook JavaScript SDK 的本地化版本来更改“赞”按钮的语言。将 en_US 替换为您的语言，例如代表法语（法国）的 fr_FR。

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version={graph-api-version} />";

您可能需要调整社交插件的宽度，以适应不同的语言。

另请参阅