公共主页插件

通过公共主页插件，您可以在网站上轻松嵌入和推广任何公开的 Facebook 主页。与在 Facebook 上一样，您的访客在网站中即可点赞和分享主页。您可以将公共主页插件用于任何不受限制（例如国家/地区或年龄限制）的公共主页。

相关主题：社交插件常见问题 | 其他社交插件

Facebook 公共主页网址

选项卡

宽度

高度

使用小号封面

适合插件容器宽度

隐藏封面照片

显示好友面部

获取代码

设置

除了上述设置外，您还可更改以下设置：

设置	HTML5 属性	说明	默认值
`href`	`data-href`	Facebook 公共主页的网址	无
`width`	`data-width`	插件的像素宽度。介于 `180` 与 `500` 之间	`340`
`height`	`data-height`	插件的像素高度。不得低于 `70`	`500`
`tabs`	`data-tabs`	要显示的选项卡，即 `timeline`、`events`、`messages`。使用逗号分隔列表来添加多个选项卡，即 `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`
`lazy`	`data-lazy`	`true` 表示您可通过设置 `loading="lazy"` iframe 属性来使用浏览器的延迟加载机制。其效果是，如果插件不在视区附近，则浏览器不会显示插件，且您可能始终无法看到该插件。可以是 `true` 或 `false`（默认）的其中一个。	`false`

已停用的属性

属性 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>

单个选项卡

您也可以只添加单个选项卡，显示 timeline、events 或 messages：

<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 = "https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&amp;version=v2.5";

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