网页版“赞”按钮

只需点击“赞”按钮,便可“赞”网页上的一些内容,并将内容分享到 Facebook。 您还可在“赞”按钮旁显示一个“分享”按钮,允许用户添加个人消息并自定义分享对象。

“赞”按钮配置器代码示例设置调整语言常见问题

分步说明

1.选择网址或主页

选取您想使用“赞”按钮的网站网址或 Facebook 主页。

2.代码配置器

将网址粘贴到代码配置器,并调整“赞”按钮的 width 等设置。点击 Get Code 按钮生成“赞”按钮代码。

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

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

4.必要时删除重复内容

如果已经拥有用于激活应用事件记录的代码,请从粘贴的代码中删除 autoLogAppEvents=1 语句,防止重复记录。

“赞”按钮配置器

连接“赞”的 URL
Width
布局
操作类型
按钮大小
[?]
[?]

完整代码示例

将代码示例复制粘贴到您的网站。将 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&version=v3.0";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

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

</body>
</html>
自定义链接预览

设置

除了上述设置外,您还可更改以下设置:

设置 HTML5 属性 说明 默认

action

data-action

显示到按钮上的动词。可以是 likerecommend

like

colorscheme

data-colorscheme

插件使用的配色方案,用于控制按钮上任何文本的颜色。可以是 lightdark

light

href

data-href

将被“赞”页面的绝对网址。

当前网址。

kid_directed_site

data-kid-directed-site

如果您的网站或在线服务,或服务的一部分面向不满 13 岁的儿童,您必须启用它

false

layout

data-layout

从插件可用的几种布局中选择一个。可以是 standardbutton_countbuttonbox_count 中的一个。详情请参考常见问题

standard

ref

data-ref

一个标签,用来跟踪推荐,必须少于 50 个字符,可包含字母数字字符和一些标点(当前有 +/=-.:_)。详情请参考常见问题

share

data-share

指定是否在“赞”按钮旁显示一个“分享”按钮。这只对 XFBML 版本起作用。

false

show_faces

data-show-faces

指定是否在按钮下方显示个人头像(仅限标准布局)。不得在儿童定向网站启用它。

false

size

data-size

此按钮有两种尺寸,即 largesmall

small

width

data-width

插件的宽度(仅限于标准 [standard] 布局),受限于最小宽度和默认宽度。详情请查看下文的“布局设置”

参考“布局设置”中的 standard

布局设置

选项如下:

布局 默认大小

standard

最小宽度:225 像素。
默认宽度:450 像素。
高度:35 像素(无头像)或 80 像素(有头像)。

box_count

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

button_count

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

button

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

更改语言

您可以通过加载 Facebook JavaScript SDK 的本地化版本来更改“赞”按钮的语言。加载 SDK 时,更改 js.src 的值即可更改语言设置。将 en_US 替换为需要的语言代码,例如代表法语(法国)的 fr_FR

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v3.1"; 

您可能需要调整社交插件的宽度,适应不同的语种。请查看本地化与翻译页面查找更多信息。