企业官网建设流程全解析

• CMS
• 后端
• Web框架

导读：本文基于 Orchard Core 官方指南 integrate-facebook-plugins，带你从零开始在一个 Orchard Core CMS 博客站点中启用OrchardCore.Facebook.Widgets功能，配置 Meta（Facebook）应用凭据，并通过可视化编辑界面把Facebook Quote（引用）插件挂载到页面 Footer 区域，使读者可以选中正文标题直接生成社交引用分享。读完本文你将掌握 Meta 社交插件（Quote、Like、Share、Comments 等）的完整接入链路，并理解底层FacebookPluginPart内容部件与 Liquid 渲染机制。

一、理解 Facebook 社交插件接入的整体思路

Orchard Core 中负责 Meta/Facebook 集成的模块是OrchardCore.Facebook，对应仓库源码位于 src/OrchardCore.Modules/OrchardCore.Facebook。从模块清单 Manifest.cs 可以看到它按特性（Feature）拆分为四块：

本次指南只涉及OrchardCore.Facebook.Widgets特性。它的声明（见 Manifest.cs）依赖FacebookConstants.Features.Core、OrchardCore.Widgets和OrchardCore.Recipes.Core三个前置特性，启用时会自动把依赖一并激活，因此你只需在管理后台勾选这一个功能即可。

该特性向系统注册了：

• FacebookPluginPart内容部件（ContentPart），用于承载用户自定义的插件渲染模板；
• 部件显示驱动与设置驱动（FacebookPluginPartDisplayDriver、FacebookPluginPartSettingsDisplayDriver）；
• 一个 Shape 表提供者LiquidShapes，负责在显示阶段把部件里的 Liquid 模板渲染为 HTML；
• 一批预定义 Widget（Chat、Comments、Continue With、Like、Quote、Save、Share）。

具体注册逻辑见 StartupWidgets.cs 中的ConfigureServices。

二、前置条件

要完成本指南，你需要：

1. 一个可运行的 Orchard Core CMS 站点。如果还没有，请按官方指南 创建 Orchard Core CMS 网站 完成搭建。指南默认本地站点运行在https://localhost:5001。
2. 一个已包含博客内容的站点，例如包含/blog/post-1这样的博客文章页，便于最后验证 Quote 分享效果。
3. Meta 开发者平台账号，用于创建应用并获取AppId与AppSecret。

三、登录管理后台并启用 Facebook Social Plugins Widgets 功能

打开浏览器，导航到管理后台地址：

https://localhost:5001/admin

进入Features（功能）管理页面，在功能列表中找到Meta Social Plugins Widgets（特性 ID 为OrchardCore.Facebook.Widgets），点击启用。启用后，其依赖的 Meta Core Components、OrchardCore.Widgets、OrchardCore.Recipes.Core 也会一并被激活。

提示：特性 ID 对应的常量定义在 FacebookConstants.cs，其中Widgets = "OrchardCore.Facebook.Widgets"，在功能列表中可以直接按此 ID 搜索。

四、创建 Meta 应用并配置 AppId / AppSecret

社交插件在浏览器端运行，需要 Meta 的 JavaScript SDK 与你的应用凭据完成初始化，因此必须先在 Meta 开发者平台创建一个应用：

1. 登录 Meta 开发者平台的应用管理页面，点击"创建应用"，选择适当的应用类型（Web 应用即可）。
2. 在应用的Basic Settings（基本设置）中找到App ID与App Secret，复制备用。

然后在 Orchard Core 管理后台进入 Meta 应用的设置页：

https://localhost:5001/Admin/Settings/OrchardCore.Facebook

把复制的AppId和AppSecret填入对应输入框并保存。

核心设置项说明

此设置页对应源码模型 FacebookSettings.cs，各字段含义如下：

其中FBInitParams的默认值在源码中即为：

status: true, xfbml: true, autoLogAppEvents: true

分别表示启用登录状态检测、启用 XFBML 社交插件解析、自动记录应用事件。

五、将 Facebook Quote Widget 添加到 Footer 层

Widget 需要挂载到某个图层（Layer）的某个区域（Zone）中才会被渲染。本指南将 Quote 插件放到页脚（Footer）区域：

1. 导航到 Layers（图层）管理页：

https://localhost:5001/OrchardCore.Layers/Admin/Index

2. 在Footer Zone区域点击Add Widget（添加小组件），从弹出的部件列表中选择Facebook Quote。

3. 为该小组件输入一个标题（Title），例如 "Share Quote"，然后点击Publish（发布）。

预置 Widget 的完整清单

OrchardCore.Facebook.Widgets一共预置了七种 Meta 社交插件 Widget（参考文档见 Facebook 模块参考）：

• Chat：网页版 Messenger 聊天插件；
• Comments：评论区插件；
• Continue With：继续使用 Facebook 按钮；
• Like：点赞按钮；
• Quote：引用分享插件（本指南所用）；
• Save：收藏保存按钮；
• Share：分享按钮。

每个 Widget 本质上是携带一段预制 Liquid 模板的FacebookPluginPart实例，你可以按同样方式把任意一种拖入任意图层。

六、验证结果：分享博客标题为引用

发布完成后，访问一篇博客文章，例如：

https://localhost:5001/blog/post-1

在页脚区域应该能看到渲染出来的 Quote 插件。用鼠标选中文章标题或任意一段文本，Meta 的 Quote 插件会在选区附近弹出分享气泡，点击后即可将该段文字作为一条带引用的帖子分享到 Meta/Facebook。

至此，你的博客已经具备"读者选中文字 → 一键生成社交引用分享"的能力。

七、深入底层：FacebookPluginPart 与 Liquid 渲染原理

从界面看，添加 Widget 只是简单的表单操作；从源码看，整个过程由内容部件（ContentPart）体系驱动。

7.1 内容部件与预置模板

每个 Widget 都是FacebookPluginPart的一个实例，该部件在 FacebookPluginPart.cs 中定义，仅包含一个Liquid字符串属性：

public class FacebookPluginPart : ContentPart { public string Liquid { get; set; } }

预置 Widget 的默认 Liquid 模板由两部分提供：

• 部件级别的默认值定义在部件设置模型 FacebookPluginPartSettings.cs（同样只有Liquid属性），由设置显示驱动在编辑页渲染；
• 新增 Widget 时的初始化模板来自OrchardCore.Facebook模块的迁移配方（Widgets/migration.recipe.json），随数据迁移逻辑在启用功能时写入内容定义。

7.2 显示驱动与 Liquid 校验

FacebookPluginPartDisplayDriver.cs 负责三件事：

• Display：在内容项的 Detail（详情）和 Summary（摘要）两个显示类型下，于Content区域输出FacebookPluginPart与FacebookPluginPart_Summary两个 Shape；
• Edit：编辑时若部件自身Liquid为空，则回退使用部件设置里的默认 Liquid；
• Update：保存时用ILiquidTemplateManager.Validate校验模板是否为合法 Liquid，若非法会在ModelState中记录错误（"The FaceBook Body doesn't contain a valid Liquid expression..."），确保非法模板无法入库。

7.3 Liquid 模板的渲染时机

Shape 渲染由 LiquidShapes.cs 中的ShapeTableProvider完成：它针对FacebookPluginPart与FacebookPluginPart_Summary两个 Shape 注册OnProcessing回调，在显示处理阶段调用ILiquidTemplateManager.RenderStringAsync把部件里的 Liquid 字符串渲染为 HTML，并把当前ContentItem作为ContentItem变量注入模板上下文。

这意味着：你可以自由定制每个 Widget 的 Liquid 模板，模板中可以引用当前内容项、使用 Orchard Core 的 Liquid 过滤器与 Shape 辅助函数，实现高度个性化的社交插件展示。

八、补充：Meta 模块的其余能力与本指南的关联

本指南聚焦社交插件 Widget，但同一个OrchardCore.Facebook模块还提供：

• Meta Core Components：注册resources: fb与resources: fbsdk两个资源，供 Liquid / Razor 模板按需引入 SDK；
• Meta Login：OAuth 登录（依赖OrchardCore.Users.ExternalAuthentication），默认回调路径/signin-facebook；
• Meta Pixel：站点级追踪与服务器端 Conversions API。

若你需要进一步了解这些特性的完整设置项、Recipe 配置方式（settings步骤中的FacebookSettings、FacebookLoginSettings、FacebookPixelSettings）以及通过ConfigureFacebookSettings()扩展方法以 appsettings 覆盖管理后台配置的方式，请阅读 Facebook/Meta 模块参考文档 与 配置参考。

九、总结

通过本指南，你完成了：

1. 在管理后台启用Meta Social Plugins Widgets特性；
2. 在 Meta 开发者平台创建应用，并在Admin/Settings/OrchardCore.Facebook配置AppId/AppSecret；
3. 在 Layers 管理页把Facebook QuoteWidget 添加到 Footer 区域并发布；
4. 在博客文章页选中文本，通过 Quote 插件生成社交引用分享。

这套流程同样适用于 Chat、Comments、Like、Save、Share 等其他六种预置 Widget——它们共享同一个FacebookPluginPart内容部件与 Liquid 渲染管线，只是预置模板不同。理解了部件、显示驱动与 Liquid 渲染三层结构后，你甚至可以手写自定义 Liquid 模板，把 Meta 社交插件以任意形态嵌入站点的任何位置。

• CMS
• 后端
• Web框架