如何在 WordPress 中顯示您的 Facebook 時間軸

您想在 WordPress 中顯示您的 Facebook 時間線帖子嗎?

通過將您的 Facebook 更新添加到 WordPress,您可以讓您的網站保持新鮮和有趣,同時也鼓勵訪問者在 Facebook 上關注您。

在本文中,我們將向您展示如何在 WordPress 中輕鬆顯示您的 Facebook 時間線。

如何在 WordPress 中顯示您的 Facebook 時間線

在 WordPress 中顯示您的 Facebook 時間軸

在 WordPress 中嵌入 Facebook 時間線的最簡單方法是使用Smash Balloon Custom Facebook Feed 外掛程式。

此外掛程式可讓您在您的網站上嵌入 Facebook 相冊、評論、評論、社區帖子等。

使用 Smash Balloon 建立的 Facebook 時間線示例

對於本指南,我們將使用 Smash Balloon premium,因為它允許您顯示 Facebook 時間軸中的照片和視頻。

訪問者還可以在燈箱彈出視窗中滾動瀏覽您的內容,而無需離開您的網站。 但是,還有一個免費版本,無論您的預算是多少,都可以讓您顯示時間軸上的文本和連結。

啟動後,您需要前往Facebook Feed » 設置,然後在“許可證密鑰”欄位中輸入您的許可證密鑰。

將許可證金鑰添加到 Smash Balloon

您可以在 Smash Balloon 網站上的帳戶下找到此資訊。

輸入金鑰後,按兩下「啟動」 按鈕。

將 Facebook 頁面或組連接到 WordPress

接下來,您需要決定是從 Facebook 頁面還是群組時間線顯示時間線。 我們將使用Facebook頁面,但Facebook群組的步驟基本相同。

要將您的 Facebook 頁面或組連接到 WordPress,請轉到Facebook Feed » 所有 Feeds,然後按兩下「添加新的」。。

在 WordPress 中顯示您的 Facebook 時間線

Smash Balloon 讓您可以創建不同的提要來顯示您的 Facebook 相冊、活動、時間線等。

由於我們想在 WordPress 中顯示我們的 Facebook 時間線,您需要點擊「時間線」,然後點擊「下一步」。

如何將 Facebook 時間線添加到您的 WordPress 網站

之後,您可以選擇要添加到網站的 Facebook 頁面或群組。

只需按下「添加新」即可開始。

將 Facebook 組或頁面時間線添加到 WordPress

在下一個螢幕上,選擇是否要從頁面或組嵌入時間線。

做出此決定後,繼續並按兩下連接到 Facebook。

將 Facebook 頁面或組連接到 WordPress

這將打開一個彈出視窗,您可以在其中登錄您的 Facebook 帳戶並選擇您要使用的頁面或組。

之後,按兩下一步。

在 WordPress 中嵌入 Facebook 頁面或群組

完成後,Facebook 將顯示 Smash Balloon 可以存取的所有資訊,以及它可以在您的 Facebook 頁面或群組上執行的操作。

要限制 Smash Balloon 訪問您的 Facebook 帳戶,只需按下任何開關將其從“是”變為“否”。 請注意,這可能會限制出現在您的WordPress 博客或網站上的Facebook內容。

考慮到這一點,您應該儘可能啟用所有開關。

授予 Smash Balloon 訪問您的 Facebook 頁面或群組的許可權

接下來,按兩下完成按鈕。

片刻之後,您應該會看到一條消息,確認您已將WordPress 網站連結到Facebook。 現在你已經完成了,是時候點擊“確定”了。

連結 WordPress 和 Facebook

Smash Balloon 現在會自動將您帶回 WordPress 儀錶板。

如何在 WordPress 中嵌入您的 Facebook 時間軸

此時,您會看到一個彈出視窗,其中包含您剛剛連接到 WordPress 的組或頁面。

只需選擇此來源旁邊的單選按鈕,然後按下「添加」按鈕。

將 Facebook 頁面時間線添加到 WordPress

如果您不小心關閉了彈出視窗,請不要擔心。 只需刷新選項卡即可重新打開彈出視窗。

之後,WordPress 會自動將您帶回Facebook Feed » All Feeds頁面。 就像以前一樣,按兩下添加新按鈕,選擇「時間軸」,然後按下「下一步」按鈕。

現在,選擇您的 Facebook 頁面或群組,然後按兩下一步。

選擇 Facebook 頁面或群組作為時間線來源

您可以選擇一個範本作為嵌入時間線的起點。 所有這些範本都是完全可定製的,因此您可以根據您希望如何在 WordPress 網站上顯示時間線來微調設計。

我們使用的是“預設”範本,但您可以選擇任何您想要的範本。 如果您對範本不滿意,也可以在以後更改範本。

為您的嵌入式 Facebook 時間線選擇範本

準備就緒后,按兩下一步按鈕。

Smash Balloon 現在將繼續並根據您的範本和您的 Facebook 頁面或群組創建時間線提要。 這是一個好的開始,但您可能想要微調時間線在您的 WordPress 網站上的外觀。

如何自定義您的嵌入式 Facebook 提要

Smash Balloon Custom Facebook Feed 外掛程式為您提供了多種方法來自定義時間線在您網站上的顯示方式。 考慮到這一點,讓我們看看您可以對Facebook時間線進行哪些不同的更改。

Facebook Feed » All Feeds頁面上,找到您的時間線 Feed,然後按兩下它的“編輯”按鈕,它看起來像一支小鉛筆。

編輯 Smash Balloon Facebook 提要

這將打開 Smash Balloon 提要編輯器,它會在右側顯示 Facebook 組或頁面時間線的預覽。

在左側,您會看到所有可用於更改時間線外觀的設置。 大多數這些設置都是不言自明的,但我們將快速介紹每個區域。

自訂Facebook時間線提要

如果您對提要的外觀不滿意,則可以通過單擊“範本”功能表選項嘗試使用不同的範本。

然後,選擇“更改”按鈕。

粉碎氣球社交媒體範本

之後,您可以通過按兩下“Feed Layout”來更改帖子的顯示方式。

在此螢幕上,您可以在清單佈局和磚石佈局之間切換。 當您進行更改時,預覽會自動更新,因此您可以嘗試不同的佈局,看看哪種佈局最適合您的 Facebook 時間線。

更改Facebook社交媒體源的佈局

你還可以改變饋送高度,以及Smash Balloon在台式電腦、智慧手機和平板電腦上顯示的帖子數量。

如果你確實改變了帖子的數量,那麼你可以使用右上角的一排按鈕預覽你的feed在桌面電腦和行動裝置上的樣子。

image 36

在測試你的WordPress網站的移動版本時,你可能還想改變Smash Balloon在桌面、平板電腦和智慧手機上顯示的列數。

例如,在下圖中,我們在桌面上將內容分成4列,在平板電腦上分成3列,在行動裝置上分成2列。 這可以説明你的時間軸在螢幕上舒適地排列,無論訪客使用哪種設備。

image 37

當你對佈局感到滿意時,點擊 「自定義 」連結。

這會將您帶回到 Smash Balloon 主編輯器,這樣您就可以轉到下一個功能表選項,即“配色方案”。

更改社交媒體供稿的配色方案

默認情況下,您的時間軸將使用與WordPress 主題相同的顏色,但此螢幕還允許您在“淺色”和“深色”布局之間切換。

您甚至可以通過選擇「自定義」 然後使用設定更改背景顏色、連結顏色、更改 WordPress 中的文字顏色等來創建自己的配色方案。

更改嵌入式 Facebook 時間線的顏色

默認情況下,Smash Balloon 會在您的動態中添加標題,即您的封面照片、個人資料圖片和您的 Facebook 頁面名稱。

要更改此部分的外觀,請按下左側功能表中的「頁眉」。

將封面照片和標題添加到嵌入式 Facebook 時間軸

在這個螢幕上,你可以改變標題的大小和顏色,隱藏或顯示你的Facebook個人資料圖片,以及更多。

你也可以在預設的 「視覺 」頁眉和 「文本 」頁眉之間切換。

image 38

想完全刪除頁眉嗎? 那麼只需點擊 「啟用 」切換鍵即可將其關閉。

之後,你可以通過從左側功能表中選擇 「帖子風格 」來改變單個帖子在你的群組飼料中的外觀。

image 39

在下一個螢幕上,你會有兩個不同的選擇。

要開始,繼續點擊『帖子風格』。

image 40

在這個螢幕上,你可以選擇常規和盒式佈局。

如果你選擇 「盒裝」,那麼你可以為每個帖子創建一個彩色的背景。 這可以説明你的Facebook帖子從你網站的其他部分中脫穎而出,也可能使文字更容易閱讀。

在您的Facebook提要中使用盒裝帖子樣式

您還可以使 border-radius 變大以創建彎曲的角,或者您可以添加陰影。

如果您選擇「常規」,則可以更改分隔不同社交媒體帖子的線條的粗細和顏色。

粉碎氣球的常規帖子樣式

您還可以通過返回主設置螢幕自定義每個帖子中的各個部分。

再次選擇「發佈樣式」 但這次選擇「編輯單個元素」。

在此螢幕上,您將看到 Smash Balloon 在每個時間線帖子中包含的所有不同內容,例如帖子作者、事件標題、共用連結框等。

要從您的帖子中刪除一段內容,只需按下以取消選中它的框。

如何編輯Facebook提要中的單個元素

您還可以更改這些單個元素的大小和顏色。 只需按兩下元素的名稱,例如“發佈作者”或“發佈文字”。

然後您可以使用設定來自定義此內容。 例如,您可以使文本變大以突出顯示,或添加新顏色。

Smash Balloon 帖子編輯器設置

默認情況下,Smash Balloon 不在您的時間線中包含 Facebook“讚”按鈕。 要增加您的 Facebook 關注者,您可能希望通過從編輯器的左側功能表中選擇“讚框”來添加此按鈕。

之後,只需按下「啟用」按鈕,使其變為藍色。

將 Facebook Like 按鈕添加到您的 WordPress 網站

默認情況下,Smash Balloon 會在時間線下方添加此按鈕,但您可以通過打開“位置”下拉功能表並選擇“頂部”來更改此設置。

在此螢幕上,您還可以更改「喜歡」部分的外觀,包括添加自定義號召性用語、顯示在Facebook上關注您的人數、添加您頁面的封面照片等。

自訂Facebook點讚按鈕

當您對“喜歡”按鈕的外觀感到滿意時,您可以繼續進行“載入更多按鈕”設置。

“載入更多”按鈕讓訪問者可以輕鬆滾動流覽更多 Facebook 時間線,因此 Smash Balloon 預設將其添加到 Feed。

這是一個好的開始,但由於它是一個如此重要的按鈕,您可能希望通過更改其背景顏色、懸停狀態和標籤來説明它脫穎而出。

您還可以透過在「文字」 字段中鍵入來更改按鈕上顯示的文字。

自定義 WordPress 中的載入更多按鈕

如果您希望刪除「載入更多」按鈕,請繼續並按下「啟用」開關。

默認情況下,Smash Balloon 允許訪問者在您的時間線中流覽照片和視頻,而無需離開您的網站。

訪問者只需按兩下任何照片或視頻即可打開燈箱彈出視窗,如下圖所示。

image 41

然後,訪問者可以使用箭頭滾動流覽你的Facebook時間線中的所有照片和視頻。

如果他們想喜歡一張照片,留下評論,或與他們的Facebook朋友分享圖片,那麼他們可以點擊 「在Facebook上評論 」連結。

image 42

這將打開一個新的標籤,把訪問者直接帶到你的Facebook頁面上的帖子。

有幾種不同的方式來定製Smash Balloon的燈箱功能。 要查看您的選項,請點擊左側功能表中的 「燈箱」。

image 43

在這裡,你可以改變燈箱文本、連結和背景的顏色。

默認情況下,燈箱顯示人們在你的照片和視頻上留下的任何評論。 如果你喜歡隱藏這些評論,那麼你可以點擊 「顯示評論 」開關,把它從藍色(啟用)變成灰色(禁用)。

image 44

燈箱功能允許人們直接在您的 WordPress 網站上滾動瀏覽您的照片和視頻。

但是,您可能更願意鼓勵人們訪問您的 Facebook 頁面。 在這種情況下,您可以通過按兩下啟用「開關來禁用燈箱功能」。

image 45

現在,訪問者需要按兩下「在Facebook上查看」連結才能仔細查看任何照片或視頻。

當您對 Facebook 時間線的外觀感到滿意時,請不要忘記按下「保存」以儲存您的更改。

保存您的自定義社交媒體時間線

如何將您的Facebook時間線添加到 WordPress

您現在已準備好使用塊、小部件或短代碼將時間線添加到您的網站。

如果您使用 Smash Balloon 創建了多個提要,那麼您需要知道提要的代碼才能將其添加到塊或小部件。

只需轉到Facebook Feed » All Feeds,然後查看簡碼部分。 您需要將此代碼添加到塊或小部件中,因此請記下它。 feed=""

在下圖中,我們需要使用.feed="2"

使用短代碼將 Facebook 頁面添加到 WordPress

如果您想在頁面或帖子中嵌入您的Facebook時間軸,我們建議您使用「自定義Facebook動態」塊。

只需打開您想要顯示Facebook時間線的頁面或帖子。 然後,點擊“+”圖示並開始輸入“Custom Facebook Feed”。

當出現正確的塊時,按兩下以將其添加到頁面或帖子中。

自訂Facebook Feed塊

默認情況下,該塊將顯示您的 Smash Balloon 提要之一。 如果這不是您要顯示的提要,只需在右側功能表中找到“簡碼設置”即可。

您現在可以將代碼添加到此框中。 之後,點擊“應用更改”。 feed=""

image 46

該塊現在將顯示來自您的 Facebook 頁面或組的時間線。 只需發佈或更新頁面即可使時間線在您的網站上生效。

或者,您可以將提要添加到任何小部件就緒區域,例如側邊欄或類似部分。 這是在整個網站上推廣您的Facebook頁面的簡單方法。

只需轉到外觀 » 小部件,然後按兩下“+”按鈕。

WordPress 小部件螢幕

之後,找到自定義 Facebook Feed 小部件。

然後,將其拖到要顯示Facebook時間線的區域。

Facebook 自定義提要小部件

就像塊一樣,自定義Facebook Feed 小部件將顯示您使用 Smash Balloon 建立的一個 Feed。

要顯示不同的提要,只需將該提要的代碼輸入「簡碼設置」框中,然後按兩下「應用更改」。

使用小部件將 Facebook 時間線添加到您的 WordPress 博客

您現在可以通過按兩下更新按鈕使小部件生效。

最後,您可以使用短代碼將時間線嵌入任何頁面、帖子或小部件就緒區域。

只需轉到Facebook Feed » All Feeds並複製“簡碼”列中的代碼。 您現在可以將此代碼添加到您的 WordPress 博客或網站。

此外,如果你使用的是塊狀主題,你可以使用全站編輯器在你的網站上的任何地方添加 「自定義Facebook提要」。

分享你的喜愛

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *