English Title
简体标题
type
Post
status
Published
date
Apr 18, 2022
slug
add-facebook-fanpage-notionnext
summary
我們今天就來打造一個 Facebook 粉絲團的小工具插件給 NotionNext 吧!
插件
我使用
react-facebook
這個套件來使用它整合好的 Page
元件
使用 FACEBOOK_APP_ID
與 FACEBOOK_PAGE
這兩個 BLOG
內的參數來渲染小工具
美化
置中
Facebook 的 Page 小工具預設是置左的擺放,在桌面的瀏覽器觀看,小工具大多在側欄,問題並不嚴重。不過,當我拿起手機要欣賞我最新版部落格傑作的時候,發現置左實在太醜。
NotionNext
使用 tailwind
作為 CSS
美化工具,我們只要在元件外用個 div
包起來,加入 justify-center
在 className
內即可將元件置中。
加框
Facebook 小工具並非原生 react
,而是使用 iframe
的方式嵌入,這樣使得網站載入都會有時間差,同時,小工具的直角性質跟我們的主題有許多圓角搭配不上,所以我將它加了一個框,使用 tailwind
做起來很簡單!
標題
為了避免側欄小工具突然出現有點突兀,我在小工具上方加入了 “FACEBOOK 粉絲團” 的標題,並且在標題前面加入了好看的 Facebook icon,並且為 icon 與標題加入了連結,這樣既美觀也可確保
如果小工具沒有畫出來,使用者也可ㄧ點選標題來找到我的粉絲頁!
使用 BLOG.FACEBOOK_PAGE_TITLE && (
的語法是確保如果有 FACEBOOK_PAGE_TITLE
這個標題參數,再去畫出標題元件。使用參數來表示標題提供使用者客製化標題的可能性,並且提供 NotionNext
專案的多國使用者可以挑選他們要的主題字,讓多國語言的使用者在 config
調整即可,不用到程式內改動!
結論
目前,此功能已經 PR 到 GitHub 上了,作者同意後,大家就可以用啦!
這邊順便推廣一下我客戶的新網站 https://tw.julies.protags
Next.js
Facebook
插件
Plugin
Bug
Debug
錯誤
程式
開發
小工具
Widget
fanpage
粉絲頁
NotionNext
category
程式開發
blog
youtube
link
Property
Bilibili
TikTok
抖音
icon
動機
目前部落格使用
NotionNext
這個插件,可以使用 Next.js
來開發網頁,Notion 來當作後台。看到有不少的部落客經營部落格都會在側欄使用 Facebook 粉絲團的小工具插件。我們今天就來打造一個吧!插件
我使用
react-facebook
這個套件來使用它整合好的 Page
元件<FacebookProvider appId={BLOG.FACEBOOK_APP_ID}>
<Page href={BLOG.FACEBOOK_PAGE} tabs="timeline" />
</FacebookProvider>
使用
FACEBOOK_APP_ID
與 FACEBOOK_PAGE
這兩個 BLOG
內的參數來渲染小工具美化
置中
Facebook 的 Page 小工具預設是置左的擺放,在桌面的瀏覽器觀看,小工具大多在側欄,問題並不嚴重。不過,當我拿起手機要欣賞我最新版部落格傑作的時候,發現置左實在太醜。
NotionNext
使用 tailwind
作為 CSS
美化工具,我們只要在元件外用個 div
包起來,加入 justify-center
在 className
內即可將元件置中。加框
Facebook 小工具並非原生
react
,而是使用 iframe
的方式嵌入,這樣使得網站載入都會有時間差,同時,小工具的直角性質跟我們的主題有許多圓角搭配不上,所以我將它加了一個框,使用 tailwind
做起來很簡單!<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">
<FacebookProvider appId={BLOG.FACEBOOK_APP_ID}>
<Page href={BLOG.FACEBOOK_PAGE} tabs="timeline" />
</FacebookProvider>
</div>
標題
為了避免側欄小工具突然出現有點突兀,我在小工具上方加入了 “FACEBOOK 粉絲團” 的標題,並且在標題前面加入了好看的 Facebook icon,並且為 icon 與標題加入了連結,這樣既美觀也可確保
如果小工具沒有畫出來,使用者也可ㄧ點選標題來找到我的粉絲頁!
{BLOG.FACEBOOK_PAGE_TITLE && (
<div className="flex items-center pb-2">
<a
href={BLOG.FACEBOOK_PAGE}
target="_blank"
rel="noopener noreferrer"
className="p-1 pr-2 pt-0"
>
<FacebookIcon size={28} round />
</a>
<a href={BLOG.FACEBOOK_PAGE} rel="noopener noreferrer" target="_blank">
{BLOG.FACEBOOK_PAGE_TITLE}
</a>
</div>
)}
使用
BLOG.FACEBOOK_PAGE_TITLE && (
的語法是確保如果有 FACEBOOK_PAGE_TITLE
這個標題參數,再去畫出標題元件。使用參數來表示標題提供使用者客製化標題的可能性,並且提供 NotionNext
專案的多國使用者可以挑選他們要的主題字,讓多國語言的使用者在 config
調整即可,不用到程式內改動!結論
目前,此功能已經 PR 到 GitHub 上了,作者同意後,大家就可以用啦!
這邊順便推廣一下我客戶的新網站 https://tw.julies.pro
- Author:Andy
- URL:https://tw.andys.pro/article/add-facebook-fanpage-notionnext
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
Relate Posts
留言區
如果你想使用 Facebook, Google, Twitter 帳號留言,或是匿名分享,可以使用 Disqus 留言。
擁有 Facebook 帳號的朋友可以使用 Facbook 原生社群插件留言。
若是有 Github 帳號可以使用 Giscus 留言!