公共主页插件

通过公共主页插件,您可以在网站上轻松嵌入和推广任何 Facebook 主页。与在 Facebook 上一样,您的访客在网站中即可赞和分享主页。

设置

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

设置 HTML5 属性 说明 默认

href

data-href

Facebook 主页的网址

width

data-width

插件的像素宽度。最小 180 最大 500

340

height

data-height

插件的像素高度。最小 70

500

tabs

data-tabs

要呈现的选项卡,即 timelineeventsmessages。使用逗号分隔列表可添加多个选项卡,例如 timeline, events

timeline

hide_cover

data-hide-cover

在标题中隐藏封面照片

false

show_facepile

data-show-facepile

当好友“赞”时,显示头像

true

hide_cta

data-hide-cta

隐藏自定义的行动号召按钮(如适用)

false

small_header

data-small-header

使用小标题

false

adapt_container_width

data-adapt-container-width

尝试适应容器宽度

true


已弃用的属性

  • 属性 data-show-posts 已弃用。请使用属性 tabs/data-tabs 和值 timeline 来显示主页时间线上的帖子。

向网站添加公共主页插件

公共主页插件的标准配置只包括标题和封面照片。该尺寸适于在小空间内推广主页,例如侧边栏顶部。

<div class="fb-page" 
  data-href="https://www.facebook.com/facebook"
  data-width="380" 
  data-hide-cover="false"
  data-show-facepile="false"></div>

行动号召

如果您的主页有自定义行动号召按钮,则会显示此按钮,而非默认的“分享”按钮。

如果自定义插件的宽度小于 280 像素,则会显示默认的“分享”按钮,以防不同的翻译中出现设计未对齐的情况。

主页选项卡: 时间线、活动和消息

您现在可以在插件上添加时间线活动消息选项卡:

  • 时间线选项卡: 显示 Facebook 主页时间线的最新帖子。
  • 活动选项卡: 用户可直接从插件关注您的主页活动,或是订阅活动。
  • 消息选项卡: 用户可以直接从网站向您的主页发送消息。用户登录后才能使用该功能。

启用主页消息功能

启用 Facebook 主页的消息功能,前往主页 Settings。在 Messages 行中,勾选通过显示消息按钮,让用户私下联系我的主页(直接链接:https://www.facebook.com/{your-page-name}/settings/?tab=settings&section=messages&view

添加多个选项卡

使用 data-tabs 属性中的逗号分隔列表添加多个选项卡:

<div class="fb-page" 
  data-tabs="timeline,events,messages"
  data-href="https://www.facebook.com/YoloBookStore"
  data-width="380" 
  data-hide-cover="false"></div>

单个选项卡

您也可以只添加单个选项卡,显示 timelineeventsmessages

<div class="fb-page" 
  data-tabs="events"
  data-href="https://www.facebook.com/YoloBookStore"
  data-width="380"></div>

自适应宽度

插件将默认在页面加载时适应父容器的 width(最小 180px/最大 500px),有助于更改布局:

<div style="width: 190px;">
  <!-- Page plugin's width will be 190px -->
  <div class="fb-page" data-href="{url}" data-width="420"></div>
</div>

如果父元素的 width 大于公共主页插件的 width,它将保持 data-width 中定义的值:

<div style="width: 600px;">
  <!-- Page plugin's width will be 500px -->
  <div class="fb-page" data-href="{url}" data-width="500"></div>
</div>

插件决不会小于 180px

<div style="width: 100px;">
  <!-- Page plugin's width will be 180px -->
  <div class="fb-page" data-href="{url}" data-width="320"></div>
</div>

取消勾选适合插件容器宽度可以关闭自适应宽度,插件将以指定宽度呈现,而不考虑父容器。

无动态调整

公共主页插件适用于响应、流动和静态布局。您可以使用媒体查询或其他方法来设置父元素的 width,然而:

  • 插件将在页面载入时确定 width
  • 页面载入后,它不会回应对盒模型的更改。

如果您想在窗口大小改变时调整插件的 width,需要手动重新呈现插件。

显示好友头像

显示赞您主页的用户的头像,而不仅仅是数字。访问您主页的用户将看到赞主页的好友计数及他们的头像。

勾选配置器中的 Show Friend's Faces 可激活该选项。

<div class="fb-page"
  data-href="https://www.facebook.com/imdb" 
  data-width="340"
  data-hide-cover="false"
  data-show-facepile="true"></div>

隐私限制主页

无法嵌入设置了隐私限制的 Facebook 主页。

调整语言

您可以通过加载 Facebook JavaScript SDK 的本地化版本,调整公共主页插件的语言。加载 SDK 时,调整 js.src 值即可更改语言: 用您的区域设置替换 en_US,例如用 ru_RU 代表俄语(俄罗斯):

示例
js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&amp;version=v2.5";

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