引用插件

用户可以使用引用插件选取页面上的文本,并将文本添加到分享内容中,讲述表现力更强的故事。请注意:您无需部署 Facebook 登录或通过应用审核请求任何其他权限,即可使用该插件。

移动网的引用分享

如果您正在为移动网构建网站,或既有的按钮不符合您的网站设计,可使用支持为链接分享添加引用的网页分享对话框

iOS 和 Android 版引用分享

对于 iOS 或 Android 版原生应用,则需要相应地使用 iOS 版分享对话框 Android 版分享对话框

试用插件代码示例设置

试用插件

选中该句的一部分,查看插件的实际运行情况。

代码示例

data-href 值调整为您网站的网址。请务必更新您的开放图谱元标签,且插件的 data-hrefog:url 属性匹配。

<html>
<head>
  <title>Your Website Title</title>
  <!-- Comment #1: OG Tags -->
  <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>

  <!-- Comment #2: SDK -->
  <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=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Comment #3: Content -->
  <h1>Your Headline</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget tristique nibh, 
    vel consequat purus. Praesent molestie, turpis ut ultrices commodo, felis arcu cursus enim, 
    vel porttitor ante quam vel lacus. Quisque at laoreet sapien. Proin nec purus dolor. Integer 
    pharetra nec ligula a condimentum. Fusce sem orci, porta ut felis id, commodo imperdiet risus. 
  </p>

  <!-- Comment #4: Plugin Code -->
  <div class="fb-quote"></div>

</body>
</html>
亲身体验一下吧!

代码评论

  1. OG Tags:您可以使用开放图谱标签自定义链接预览。
  2. SDK:加载 JavaScript 版 Facebook SDK。
  3. Content:您的页面内容。
  4. Plugin Code:配置器生成的引用插件代码。您可以将该代码放置在文档的任意位置, 仅当您为代码容器中的文本设置突出显示时,代码才会显示。在这个例子中,当您为正文文本设置突出显示时,代码就会显示

设置

您可以更改以下设置:

设置 HTML5 属性 说明 默认

href

data-href

将被引用的页面的绝对网址。

当前网址

layout

data-layout

  • quote: 选取文本时,文档将叠加显示一个带蓝色 Facebook 图标和“分享引用”文本的按钮。当用户点击该按钮时,系统将打开一个分享对话框,突出显示的文本将成为引用内容。
  • button:与“引用”选项的功能相同,但按钮仅包含一个蓝色 Facebook 图标。

quote

可引用区域

网页的某些区域可能不会因为可以被引用而受益,例如菜单、侧边栏、页脚。您可以使用以下元素定义可引用区域:

  • HTML <article> 元素,或
  • 类名为 fb-quotable 的任何元素

您可以根据需要混合搭配这两种元素,定义可引用区域。

如果您的主页不包含 <article>class="fb-quotable",则整个主页都可引用。

更改语言

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

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

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