Merge pull request tangly1024#153 from txs/feature_facebook_messenger_customer_chat_plugin

Add Facebook Customer Chat for the blogging system

Author: tangly1024

blog.config.js

@@ -9,7 +9,11 @@ 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: 'https://www.facebook.com/tw.andys.pro', // Facebook Page 的連結
+
+  FACEBOOK_PAGE_ID: process.env.NEXT_PUBLIC_FACEBOOK_PAGE_ID || '', //Facebook Page ID 來啟用 messenger 聊天功能
+  FACEBOOK_APP_ID: process.env.NEXT_PUBLIC_FACEBOOK_APP_ID || '', //Facebook App ID 來啟用 messenger 聊天功能
+  FACEBOOK_PAGE: process.env.NEXT_PUBLIC_FACEBOOK_PAGE  || 'https://www.facebook.com/tw.andys.pro', // Facebook Page 的連結
+
   THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题， 支持 ['next','hexo',"fukasawa','medium']
   THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮
   LANG: 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.

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

@@ -21,7 +21,12 @@ import { ThemeSwitch } from '@/components/ThemeSwitch'
 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 Messenger = dynamic(() => import('@/components/FacebookMessenger'), {
+  ssr: false
+})
 
 const MyApp = ({ Component, pageProps }) => {
   return (
@@ -32,10 +37,14 @@ const MyApp = ({ Component, pageProps }) => {
       {BLOG.ANALYTICS_GOOGLE_ID && <Gtag />}
       {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <Busuanzi />}
       {BLOG.ADSENSE_GOOGLE_ID && <GoogleAdsense />}
+      {BLOG.FACEBOOK_APP_ID && BLOG.FACEBOOK_PAGE_ID && <Messenger />}
       {/* FontawesomeCDN */}
-      <link href={BLOG.FONT_AWESOME_PATH} rel="stylesheet" referrerPolicy="no-referrer" />
+      <link
+        href={BLOG.FONT_AWESOME_PATH}
+        rel="stylesheet"
+        referrerPolicy="no-referrer"
+      />
       <Component {...pageProps} />
-
     </GlobalContextProvider>
   )
 }