From cd16275b0ad3760501960b3d5aaec332be84185c Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 19 Apr 2022 15:48:02 +0800
Subject: [PATCH] =?UTF-8?q?facebook-page=20=E4=BD=9C=E4=B8=BA=E5=8F=AF?=
 =?UTF-8?q?=E9=80=89=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js             | 10 +++++-----
 components/FacebookPage.js | 15 +++++++++------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/blog.config.js b/blog.config.js
index 3a4a12b3..328ef914 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -10,13 +10,13 @@ const BLOG = {
   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.NEXT_PUBLIC_FACEBOOK_PAGE_ID || '', // Facebook Page ID 來啟用 messenger 聊天功能
-  FACEBOOK_APP_ID: process.env.NEXT_PUBLIC_FACEBOOK_APP_ID || '', // Facebook App ID 來啟用 messenger 聊天功能
+  // 一个小插件展示你的facebook fan page~ @see https://tw.andys.pro/article/add-facebook-fanpage-notionnext
   FACEBOOK_PAGE_TITLE:
-    process.env.NEXT_PUBLIC_FACEBOOK_PAGE_TITLE || 'FACEBOOK 粉絲團', // 邊欄 Facebook Page widget 的標題欄，填''則無標題欄
+    process.env.NEXT_PUBLIC_FACEBOOK_PAGE_TITLE || null, // 邊欄 Facebook Page widget 的標題欄，填''則無標題欄 e.g FACEBOOK 粉絲團'
   FACEBOOK_PAGE:
-    process.env.NEXT_PUBLIC_FACEBOOK_PAGE ||
-    'https://www.facebook.com/tw.andys.pro', // Facebook Page 的連結
+    process.env.NEXT_PUBLIC_FACEBOOK_PAGE || null, // Facebook Page 的連結 e.g https://www.facebook.com/tw.andys.pro
+  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 聊天功能 获取: https://developers.facebook.com/
 
   THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题， 支持 ['next','hexo',"fukasawa','medium']
   THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮
diff --git a/components/FacebookPage.js b/components/FacebookPage.js
index eda8a7df..e4e52c93 100644
--- a/components/FacebookPage.js
+++ b/components/FacebookPage.js
@@ -2,9 +2,12 @@ import BLOG from '@/blog.config'
 import { FacebookProvider, Page } from 'react-facebook'
 import { FacebookIcon } from 'react-share'
 
-const FacebookPage = () => (
-  <div className="shadow-md hover:shadow-xl dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100 justify-center">
-    {BLOG.FACEBOOK_PAGE_TITLE && (
+const FacebookPage = () => {
+  if (!BLOG.FACEBOOK_APP_ID && !BLOG.FACEBOOK_PAGE) {
+    return <></>
+  }
+  return <div className="shadow-md hover:shadow-xl dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100 justify-center">
+    {BLOG.FACEBOOK_PAGE && (
       <div className="flex  items-center pb-2">
         <a
           href={BLOG.FACEBOOK_PAGE}
@@ -19,9 +22,9 @@ const FacebookPage = () => (
         </a>
       </div>
     )}
-    <FacebookProvider appId={BLOG.FACEBOOK_APP_ID}>
+    {BLOG.FACEBOOK_APP_ID && <FacebookProvider appId={BLOG.FACEBOOK_APP_ID}>
       <Page href={BLOG.FACEBOOK_PAGE} tabs="timeline" />
-    </FacebookProvider>
+    </FacebookProvider>}
   </div>
-)
+}
 export default FacebookPage