Add Facebook Customer Chat for the blogging system

blog.config.js

@@ -9,6 +9,8 @@ const BLOG = {
     process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
   NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
   DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮
+  FACEBOOK_PAGE_ID: process.env.FACEBOOK_PAGE_ID || '', //Facebook Page ID 來啟用 messenger 聊天功能
+  FACEBOOK_APP_ID: process.env.FACEBOOK_APP_ID || '', //Facebook App ID 來啟用 messenger 聊天功能
 
   THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题， 支持 ['next','hexo',"fukasawa','medium']
   THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮

components/FacebookMessenger.js

@@ -0,0 +1,11 @@
+import BLOG from '@/blog.config'
+import MessengerCustomerChat from 'react-messenger-customer-chat'
+
+const Messenger = () => (
+  <MessengerCustomerChat
+    pageId={BLOG.FACEBOOK_PAGE_ID}
+    appId={BLOG.FACEBOOK_APP_ID}
+    language={BLOG.LANG.replace('-', '_')}
+  />
+)
+export default Messenger

next.config.js

@@ -6,16 +6,28 @@ module.exports = withBundleAnalyzer({
     webpack5: true
   },
   images: {
-    domains: ['gravatar.com', 'www.notion.so', 'avatars.githubusercontent.com', 'images.unsplash.com'] // 允许next/image加载的图片 域名
+    domains: [
+      'gravatar.com',
+      'www.notion.so',
+      'avatars.githubusercontent.com',
+      'images.unsplash.com'
+    ] // 允许next/image加载的图片 域名
   },
-  async headers () {
+  async headers() {
     return [
       {
         source: '/:path*{/}?',
         headers: [
+          { key: 'Access-Control-Allow-Credentials', value: 'true' },
+          { key: 'Access-Control-Allow-Origin', value: '*' },
           {
-            key: 'Permissions-Policy',
-            value: 'interest-cohort=()'
+            key: 'Access-Control-Allow-Methods',
+            value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT'
+          },
+          {
+            key: 'Access-Control-Allow-Headers',
+            value:
+              'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
           }
         ]
       }

pages/_app.js

@@ -16,25 +16,32 @@ import dynamic from 'next/dynamic'
 import { GlobalContextProvider } from '@/lib/global'
 import { DebugPanel } from '@/components/DebugPanel'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
+import Messenger from '@/components/FacebookMessenger'
 
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
 const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
 const Busuanzi = dynamic(() => import('@/components/Busuanzi'), { ssr: false })
-const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr: false })
+const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), {
+  ssr: false
+})
 
 const MyApp = ({ Component, pageProps }) => {
   return (
     <GlobalContextProvider>
-        {BLOG.THEME_SWITCH && <ThemeSwitch/>}
-        {BLOG.DEBUG && <DebugPanel/>}
-        {BLOG.ANALYTICS_ACKEE_TRACKER && <Ackee />}
-        {BLOG.ANALYTICS_GOOGLE_ID && <Gtag />}
-        {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <Busuanzi/>}
-        {BLOG.ADSENSE_GOOGLE_ID && <GoogleAdsense/>}
-        {/* FontawesomeCDN */}
-        <link href={BLOG.FONT_AWESOME_PATH} rel="stylesheet" referrerPolicy="no-referrer" />
-        <Component {...pageProps} />
-
+      {BLOG.THEME_SWITCH && <ThemeSwitch />}
+      {BLOG.DEBUG && <DebugPanel />}
+      {BLOG.ANALYTICS_ACKEE_TRACKER && <Ackee />}
+      {BLOG.ANALYTICS_GOOGLE_ID && <Gtag />}
+      {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <Busuanzi />}
+      {BLOG.ADSENSE_GOOGLE_ID && <GoogleAdsense />}
+      <Messenger />
+      {/* FontawesomeCDN */}
+      <link
+        href={BLOG.FONT_AWESOME_PATH}
+        rel="stylesheet"
+        referrerPolicy="no-referrer"
+      />
+      <Component {...pageProps} />
     </GlobalContextProvider>
   )
 }