Facebook聊天插件

category
tags
type
status
slug
date
password
Last edited time
Jan 31, 2024 08:15 AM
summary
icon
💡
最后更新域于0230906, 修改了原文档中第四点,获取PAGE_ID的方式;用原先方法获取的PAGE_ID,将导致聊天插件加载失败。
💡
FaceBook 官方提供的聊天插件,可以方便您与访客实时聊天。
 
全程大约10分钟,即可获得你的facebook插件。

使用效果

网页右下角弹出一个聊天框,用户可以与站长聊天,可以选择访客匿名、或登录Facebook的Messenger。
notion image
notion image
 
站长在pc端的后台,或者app上都可以事实查看消息
notion image
notion image
 

配置方式

在NotionNext后台添加两个环境变量即可开启FBChat插件 , 对应配置文件路径 blog.config.js
变量名
变量说明
示例
NEXT_PUBLIC_FACEBOOK_PAGE_ID
你的公共主页ID,类似于公众号ID
10xxxxxxx215
NEXT_PUBLIC_FACEBOOK_APP_ID
你的开发者应用ID
6xxxxxxxxx18
这两个参数如何获得,请阅读下方的注册方法部分。

开通方法

注册并登录您的facebook账号
 

一、开通你的公共主页

facebook上创建一个公共主页很简单,按照步骤创建好主页后,即可获得你的PAGE-ID
  1. 点击页面左侧的公共主页
    1. notion image
  1. 点击新建公共主页
    1. notion image
  1. 填写资料完成注册
    1. 填写完成后,会引导你完成一些基础的主页配置,自行选择配置即可。
      notion image
  1. 如何获取PAGE_ID
      • 原先获取PAGE_ID的方式是错误的:
        • 完成后,按照提示返回主页。在你的公共主页地址栏URL中可以看到你的 PAGE_ID;例如此处我的PAGE_ID 就是 100095411623547
          错误截图
          notion image
      正确方式,在公共主页左侧点击设置 → 点击品牌内容
      notion image
      notion image
      点击品牌内容后跳转的页面中就包含了页面ID PAGE_ID 参数,此处我的PAGE_ID是100411122875215
      notion image
  1. 配置白名单
    1. 为了让您的网站允许使用该公共主页的messenger功能,需要如下配置:
      点击右上角头像 → 设置与隐私 → 设置 ; 来到你的设置中心
      notion image
      notion image
      设置中心左侧点击新版公共主页体验
      notion image
      在新版公共主页体验中,点击高级消息功能,并输入您的站点域名,点击添加即可。
      notion image

二、开通开发者权限

完成此步骤,你就能获得自己的专属应用id,用此id可以调用facebook的功能
  1. 点击下方链接,申请开发者
  1. 点击继续
    1. 并按照要求验证手机号和邮箱
      notion image
  1. 最后一步,完成注册
    1. 这里选择你的属性,可以任选,不影响后续操作
      notion image
  1. 创建一个应用
    1. 注册完成自动会来到此开发者首页,您以后也可以随时访问 https://developers.facebook.com/apps/ 来查看您的应用。
      点击创建
      notion image
  1. 配置应用
    1. 选择facebook,点击继续
      notion image
      填写完应用名字,直接点击创建应用即可。
      notion image
  1. 获取APP_ID
    1. 在应用首页即可看到
      notion image
 

完成

至此,你已经获取到了APP_IDPAGE_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://business.facebook.com/
 
后台可以查看所有和你聊天的信息,右上角可以配置对应的自动回复等功能,和微信公众号类似。
notion image
同时,后台也支持您自定义插件的样式、位置、以及自动回复的内容~
notion image
 

客户端

这个功能使用的是Facebook的Messenger聊天工具,你可以下载一个Facebook、或者Messenger、或者和我一样下载一个 Business Suite (facebook的运营全家桶)。
notion image

参考

ChatBaseGoogle广告营收插件
  • Twikoo
  • Giscus
  • Cusdis