✨ 更新日志
🚀 安装部署
✒ 写作指引
🛠 站点配置
📊 网站统计
⭐ 主题配置
📩 评论插件
🧷 外部插件
🔊 站点订阅
⌨ 开发指引
👨👦👦 联系方式
🤝 购买服务
Facebook聊天插件
category
tags
type
status
slug
date
password
Last edited time
May 10, 2024 10:08 AM
summary
icon
通知
Facebook 官方宣布了一项重大更新:从 2024 年 5 月 9 日起,聊天插件将不再可用。
您可以选择使用SaleSmartly 插件作为页面聊天客服。
文档
以下是旧文档
最后更新域于0230906, 修改了原文档中第四点,获取PAGE_ID的方式;用原先方法获取的PAGE_ID,将导致聊天插件加载失败。
FaceBook 官方提供的聊天插件,可以方便您与访客实时聊天。
全程大约10分钟,即可获得你的facebook插件。
使用效果
网页
右下角
弹出一个聊天框,用户可以与站长聊天,可以选择访客匿名、或登录Facebook的Messenger。![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F25af4e76-9354-4b15-8fac-a6a4859574fe%2FUntitled.png?table=block&id=f37833d4-3a87-413e-b597-47a5612d1f57&t=f37833d4-3a87-413e-b597-47a5612d1f57&width=415&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fdb77b670-ae94-48e3-9bd9-26767377c610%2FUntitled.png?table=block&id=d173c543-f765-4ee5-825a-e760679a82d3&t=d173c543-f765-4ee5-825a-e760679a82d3&width=383&cache=v2)
站长在pc端的后台,或者app上都可以事实查看消息
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F298066c7-9d5a-4dcb-bb4a-2d0cd4ba3851%2FUntitled.png?table=block&id=d64c3620-b71c-4839-972c-338805bdb88b&t=d64c3620-b71c-4839-972c-338805bdb88b&width=1804&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa79fc963-4f68-4556-8921-0c058812fa0f%2FUntitled.jpeg?table=block&id=d79a405e-13dc-4cfd-885f-7015c3610408&t=d79a405e-13dc-4cfd-885f-7015c3610408&width=108&cache=v2)
配置方式
在NotionNext后台添加两个环境变量即可开启FBChat插件 , 对应配置文件路径 blog.config.js 。
变量名 | 变量说明 | 示例 |
NEXT_PUBLIC_FACEBOOK_PAGE_ID | 你的公共主页ID,类似于公众号ID | 10xxxxxxx215 |
NEXT_PUBLIC_FACEBOOK_APP_ID | 你的开发者应用ID | 6xxxxxxxxx18 |
这两个参数如何获得,请阅读下方的注册方法部分。
开通方法
注册并登录您的facebook账号
一、开通你的公共主页
facebook上创建一个公共主页很简单,按照步骤创建好主页后,即可获得你的
PAGE-ID
- 点击页面左侧的公共主页
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa55138a9-0bce-4238-83e0-3886b6562351%2FUntitled.png?table=block&id=4a458057-c158-404b-9442-3bb361302bdb&t=4a458057-c158-404b-9442-3bb361302bdb&width=384&cache=v2)
- 点击新建公共主页
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F88cde9f7-ea18-41ca-90cf-44d8ecff6bd9%2FUntitled.png?table=block&id=003df6f7-41c9-4aab-a620-0378e28405bb&t=003df6f7-41c9-4aab-a620-0378e28405bb&width=432&cache=v2)
- 填写资料完成注册
填写完成后,会引导你完成一些基础的主页配置,自行选择配置即可。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7b03d54d-d2ae-4c2c-a76c-c50466aa55ab%2FUntitled.png?table=block&id=9947128a-c0c0-49ae-8af8-aebe771cfd98&t=9947128a-c0c0-49ae-8af8-aebe771cfd98&width=432&cache=v2)
- 如何获取
PAGE_ID
- 原先获取PAGE_ID的方式是错误的:
PAGE_ID
100095411623547
错误截图
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fac938137-2696-4337-b905-2f1581db4c49%2FUntitled.png?table=block&id=5ac3dabd-5dd6-45cf-8228-1f0161b92b80&t=5ac3dabd-5dd6-45cf-8228-1f0161b92b80&width=240&cache=v2)
正确方式,在公共主页左侧点击
设置
→ 点击品牌内容
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F9e39704b-8bbe-4ad1-b472-af9faf4d1562%2FUntitled.png?table=block&id=317f43a5-1ece-4431-a8c7-3ce8b81bdd33&t=317f43a5-1ece-4431-a8c7-3ce8b81bdd33&width=288&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F65b6c717-bfcc-4c5e-a1e8-f53b561f57ca%2FUntitled.png?table=block&id=f331483c-d121-473a-b072-ca6f282aa83c&t=f331483c-d121-473a-b072-ca6f282aa83c&width=336&cache=v2)
点击品牌内容后跳转的页面中就包含了页面ID PAGE_ID 参数,此处我的PAGE_ID是
100411122875215
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F4d2c2acd-9782-48bd-a31c-cbcc1191fe58%2FUntitled.png?table=block&id=e57812ce-5ff1-4563-a0a6-3d6f3d78f146&t=e57812ce-5ff1-4563-a0a6-3d6f3d78f146&width=2408&cache=v2)
- 配置白名单
为了让您的网站允许使用该公共主页的messenger功能,需要如下配置:
点击右上角头像 → 设置与隐私 → 设置 ; 来到你的设置中心
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9a802245-21e6-4b48-aad9-03c412592b0f%2FUntitled.png?table=block&id=1c982cee-6529-48e9-ad30-d4ccc3588936&t=1c982cee-6529-48e9-ad30-d4ccc3588936&width=432&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fca5f5570-edfe-42dd-9cc0-5b59aeab665b%2FUntitled.png?table=block&id=19fe0277-e6cd-4b0c-92aa-4a112dd5d0e1&t=19fe0277-e6cd-4b0c-92aa-4a112dd5d0e1&width=355&cache=v2)
设置中心左侧点击新版公共主页体验
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0e8cf872-82b7-4ad9-84e0-40a4e5f76a4b%2FUntitled.png?table=block&id=635eea1a-3ec7-4777-9a9c-171f67f5e85c&t=635eea1a-3ec7-4777-9a9c-171f67f5e85c&width=576&cache=v2)
在新版公共主页体验中,点击高级消息功能,并输入您的站点域名,点击添加即可。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F02563de0-c6d3-4e31-9c83-34287348ee55%2FUntitled.png?table=block&id=ea66fdec-3d08-4d49-b4c5-566467d63cf7&t=ea66fdec-3d08-4d49-b4c5-566467d63cf7&width=528&cache=v2)
二、开通开发者权限
完成此步骤,你就能获得自己的专属应用id,用此id可以调用facebook的功能
- 点击下方链接,申请开发者
- 点击继续
并按照要求验证手机号和邮箱
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd6039f00-70ac-478f-a436-5b64d9b8d3f3%2FUntitled.png?table=block&id=9672cfa8-3555-448f-a0ae-a3a8e2fcf02c&t=9672cfa8-3555-448f-a0ae-a3a8e2fcf02c&width=1171&cache=v2)
- 最后一步,完成注册
这里选择你的属性,可以任选,不影响后续操作
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F930e5112-86f4-4f86-9974-3b92d7188921%2FUntitled.png?table=block&id=97190ee4-d7bc-4ce7-b0fd-892096e1b192&t=97190ee4-d7bc-4ce7-b0fd-892096e1b192&width=1080&cache=v2)
- 创建一个应用
注册完成自动会来到此开发者首页,您以后也可以随时访问 https://developers.facebook.com/apps/ 来查看您的应用。
点击创建
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0d439df4-df48-46c2-9089-b366a66433f8%2FUntitled.png?table=block&id=2f35be30-e7a0-4740-8a74-124f472ccaeb&t=2f35be30-e7a0-4740-8a74-124f472ccaeb&width=624&cache=v2)
- 配置应用
选择facebook,点击继续
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F102c535b-79f6-4787-9b8a-ce7f258d3aba%2FUntitled.png?table=block&id=d1eb126a-160a-456c-960b-96fcbf059f5f&t=d1eb126a-160a-456c-960b-96fcbf059f5f&width=624&cache=v2)
填写完应用名字,直接点击创建应用即可。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F4d2ce762-3b8f-4fc0-8db7-6dcfdf26dd2b%2FUntitled.png?table=block&id=7e3541a4-5e41-4d50-91e6-21e9a98822fa&t=7e3541a4-5e41-4d50-91e6-21e9a98822fa&width=624&cache=v2)
- 获取
APP_ID
在应用首页即可看到
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F23d85595-6821-40d2-ade1-c081dca1516f%2FUntitled.png?table=block&id=4fd5141f-f80b-4166-b94c-50d5779856ba&t=4fd5141f-f80b-4166-b94c-50d5779856ba&width=893&cache=v2)
完成
至此,你已经获取到了
APP_ID
和PAGE_ID
。在NotionNext后台添加两个环境变量即可开启FBChat插件 , 对应配置文件路径 blog.config.js 。
变量名 | 变量说明 | 示例 |
NEXT_PUBLIC_FACEBOOK_PAGE_ID | 你的公共主页ID,类似于公众号ID | 10xxxxxxx215 |
NEXT_PUBLIC_FACEBOOK_APP_ID | 你的开发者应用ID | 6xxxxxxxxx18 |
关于Facebook后台设置
您可以在facebook后台设置这个聊天插件的预设回复,营业时间等等属性,这里不做赘述。
配置入口:在您的facebook公共主页的设置菜单中,点击 Meta Business Suite (商务套件)。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa8e4a49a-f0b8-4ff5-a49a-0a142bdf5578%2FUntitled.png?table=block&id=8cdfd7f1-a28a-4a36-bfb3-b72087399297&t=8cdfd7f1-a28a-4a36-bfb3-b72087399297&width=1912&cache=v2)
商务后台页面
除了上面的入口,你也可以直接访问右边链接 https://business.facebook.com/
后台可以查看所有和你聊天的信息,右上角可以配置对应的自动回复等功能,和微信公众号类似。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F28000704-5fce-4be1-99da-673ca775416a%2FUntitled.png?table=block&id=4c79f97b-b2c3-4bdc-b269-941a1a4cf4f7&t=4c79f97b-b2c3-4bdc-b269-941a1a4cf4f7&width=672&cache=v2)
同时,后台也支持您自定义插件的样式、位置、以及自动回复的内容~
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Fa2f914a1-4b8e-46bd-ad55-a74f1a60fe4c%2FUntitled.png?table=block&id=8cfb3ec6-2f62-414b-b725-13cd449b356a&t=8cfb3ec6-2f62-414b-b725-13cd449b356a&width=1443&cache=v2)
客户端
这个功能使用的是Facebook的Messenger聊天工具,你可以下载一个Facebook、或者Messenger、或者和我一样下载一个 Business Suite (facebook的运营全家桶)。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F093dd4c9-7949-4df8-bee1-5098d5a6a59f%2FUntitled.jpeg?table=block&id=aaa7dcba-7117-4682-9ae8-89584a881678&t=aaa7dcba-7117-4682-9ae8-89584a881678&width=432&cache=v2)
参考
- 官方介绍
- React插件代码
Loading...
Last update: