网页版“赞”按钮

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

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

分步说明

1.选择网址或主页

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

2.代码配置器

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

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

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

“赞”按钮配置器

连接“赞”的 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="http://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="http://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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your like button code -->
  <div class="fb-like" 
    data-href="http://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 = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.10"; 

如需了解受支持的语言设置,请参考 Facebook 语言设置 XML 文件。 您可能需要调整社交插件的宽度,适应不同的语种。请查看本地化与翻译页面查找更多信息。