【WordPress】IG、FB嵌入WP外掛完整設定教學,讓使用者快速成為粉絲

by | 3 月 15, 2020 | 14 comments

【WordPress】IG、FB嵌入WP外掛完整設定教學,讓使用者快速成為粉絲

by | 3 月 15, 2020 | 14 comments

目前這個社群媒體淹沒的時代,大多數人經營自媒體,同時也會使用IG Instagram或者FB Facebook與粉絲互動或者放更多分享,然而若你是在使用Wordpress架站的情況下,要如何將自己的IG或FB粉絲頁置入網站中呢?

這篇文章教你使用兩個免費的Wordpress外掛將Instagram及Facebook嵌入網站中,或者是放入側邊欄,讓讀者能夠更快地看到你的粉絲頁或IG,並且點下追蹤按鈕,增加你的粉絲人數。


Instagram

1.安裝外掛 Smash Balloon Social Photo Feed

Smash Balloon Social Photo Feed

首先,進入Wordpress的控制台後,點選左邊工具列的外掛安裝外掛,並且搜尋Smash Balloon Social Photo Feed,點擊立即安裝,並在安裝完成後啟用此外掛。


2.連接Instagram帳號

Connect to Instagram

接著,再到左側工具列,點擊Instagram feed,進入外掛的設定區。

一進入設定區就會看見外掛請你連接Instagram帳號,看你的Instagram帳號是屬於Personal(個人帳號)還是Business(商業帳號)直接選擇後,系統會導向至Instagram的登入畫面,輸入帳號密碼,就會成功連接你的IG帳號。


3.顯示樣式調整

adjust style
Follow Butoon

要調整之後的顯示方式,請點選上方的2.自訂資訊提供,上圖是我個人的建議設定,之後Instagram就會呈現出九宮格,像平常瀏覽的樣式(如下圖)。不過你也可以依照個人的需求喜好作調整跟嘗試,不一定要像我的設定一樣。

Finished

停用行動版版面配置」如果沒有勾選的話,讀者在使用手機瀏覽網站時,就會看到照片呈現直排,而不是九宮格狀態,會造成瀏覽網站的困難。


4.展示短代碼

shortcode

最後到「3.展示資訊提供」就會看到外掛提供給你的短代碼 [instagram-feed] ,將這個代碼複製貼到側邊欄、底邊欄或者是文章、頁面中,之後該區域就會顯示出你的Instagram。

補充說明

這裡的短代碼可以依照你個人需求不同而修改,例如你希望顯示貼文數量有20篇,那麼短代碼後方就加上num=10,變成[instagram-feed num=10],希望在貼文中間間隔加大,那麼就使用imagepadding=10(數字即寬度,可自行調整),變成[instagram-feed imagepadding=10]。

其他相關設定都可以參考下方表格,幫你的短代碼作調整,而表格白色底的是免費版即可使用,如果想要使用紅色底的部分,就需要加價購買進階版。

往下看如何顯示於網站側邊欄示範


5.影片教學

如果對於操作過程有疑惑,也可以觀看Smash Balloon Social Photo Feed官方提供的操作教學影片,缺點是目前只有提供英文的版本。


Facebook

1.安裝外掛 Smash Balloon Social Post Feed

Smash Balloon Social Post Feed

接著來到「Smash Balloon Social Post Feed」,則是專門用來嵌入Facebook的外掛,這個外掛不僅可以顯示Facebook的粉絲專頁,如果你需要置入的是Facebook的社團也沒問題。

那麼安裝過程就跟剛才的Instagram外掛Smash Balloon Social Photo Feed差不多,一樣到左側功能列→外掛→安裝外掛,搜尋Smash Balloon Social Post Feed,點擊安裝外掛→啟用即可。


2.連接Facebook帳號

Connect to Facebook

接著左側功能列會顯示Facebook Feed,點擊進入設定頁面後,第一件事情也是先連結你的Facebook帳號,過程按照畫面提示照做即可,不難但它不像Instagram一樣有中文版本。


choose page or group

如果你要連結的是Facebook粉絲專頁,就在中間選單選擇Facebook Page,如果你要連結的是Facebook社團,那就選擇Facebook Group,然後點選Continue繼續下一步。


log in account

接著系統會像你確認是否使用這個Facebook的帳號登入,確認的話就點擊藍色按鈕「Continue as (你的帳號名稱)」,如果要使用其他帳戶來設置的話,就點選Log in to another account使用其他帳號。


choose page or group

找到你要連結的Facebook粉絲專頁或群組,在右側的欄位勾選即可,連結可以一次連結多個,但是網站上能夠顯示的只有一個,所以這邊點擊一個就好囉。


allow smash balloon manage page

這一步問你是否同意使用Smash Balloon外掛管理你的粉絲專頁,選擇Done完成即可。


check page again

這裡會顯示出你有連結的粉絲專頁,點選你要顯示的專頁(底色變成淡綠色),再按Connect this page,終於完成Facebook的連結囉。


save settings

記得完成後再按一次Save Settings儲存設定,以確認剛剛做完的步驟都確實有存在Wordpress網站系統中。


3.顯示樣式調整

stylize

在上方的功能選單,選擇「自訂」後,就可以看到很多顯示的設定,我建議可以先看看預設的樣子你喜不喜歡,不喜歡的話再去嘗試做調整。而預設的樣貌則會顯示如下圖。

finished

4.展示短代碼

shortcode

這個外掛一樣是使用短代碼來呈現,把 [custom-facebook-feed],複製貼到你要顯示的地方(可以是頁面、文章、側邊欄、底邊欄),回到網站點選鍵盤F5重新整理,就會看到你的Facebook外掛囉。

往下看如何顯示於網站側邊欄示範


5.教學影片

雖然官方也有提供Smash Balloon Social Post Feed的教學操作影片,但是只有比較舊的版本,沒有最新版本的影片,大家還是可以參考著觀看。


sidebar

如果你不了解如何使用短代碼,這邊以側邊欄作為示範。

  1. 點開左側功能列的外觀→小工具,你會看到最右側有Sidebar側邊欄、Footer底邊欄(依每個人選擇的佈景主題而有所些微不同)
  2. 將「可用的小工具」下方的「自訂HTML」滑鼠按著拖拉至側邊欄。
  3. 接著在內容貼上剛才提到的短代碼。
  4. 點擊儲存。
  5. 回到網站頁面按鍵盤的F5重新整理確認樣式。
  6. 完成外掛嵌入。

如果你對於此篇教學有任何疑問,歡迎在底下留言發問問題喔!


讀者優惠

以下優惠都是本網站與各大服務商爭取到,專屬於讀者的優惠代碼,只要你點擊以下連結,或者使用優惠碼購買產品,除了你能享受到特殊的優惠價格以外,我也會額外獲得一點來自服務商的獎金,這都是我能夠持續分享的動力來源之一:)
服務商優惠取得優惠
主機+網域第一年1折起點擊連結
.com網域只要$8.88點擊連結
全新網域7折起點擊連結
網域只要$4.99點擊連結

服務商優惠取得優惠
共享主機六折起 每月$5.95點擊連結
前三個月主機九折優惠使用優惠碼NJD4U註冊會員
註冊即得$15優惠金點擊連結
專用主機優惠79折點擊連結
主機+網域第一年1折起點擊連結
共用主機第一年優惠5折點擊連結
共享主機54折點擊連結
服務商優惠取得優惠
SSL優惠65折點擊連結
SSL年付$299特價$269.99點擊連結

服務商優惠取得優惠
DIVI Elegant
終生會員優惠8折
$249$199
點擊連結
DIVI Elegant
一年會員折扣$19
$89$70
點擊連結
DIVI Elegant
獲得全部主題及外掛
優惠價$70
點擊連結

服務商優惠取得優惠
1個網站加速優惠八折
$49$39.2
點擊連結前往購買
使用期限至4月16日止
3個網站加速優惠八折
$99$79.2
點擊連結前往購買
使用期限至4月16日止
無限網站加速優惠八折
$249$199.2
點擊連結前往購買
使用期限至4月16日止

服務商優惠取得優惠
專屬電子信箱優惠67折點擊連結

14 Comments

  1. ChengLin

    超級詳細的外掛整理,最近自己也碰到將訂閱、連結社群帳號放上網站的問題,站長分享的外掛教學非常實用,非常謝謝你的分享!

    Reply
    • LiLing

      有問題都可以再問我:)

      Reply
  2. 黃詠謙

    原來還可以這樣插入外掛連結到社群帳號!! 長知識了,謝謝分享~

    Reply
    • LiLing

      不客氣!有需要記得試試看唷!

      Reply
  3. Sammy

    很實用的文章,謝謝版主私藏分享!

    Reply
    • LiLing

      謝謝你~~

      Reply
  4. Evelyn

    這個方式不錯耶,同時把FB粉絲和 IG 加入網站,且介紹的很清楚詳細易懂,太好了,感謝分享!

    Reply
    • LiLing

      不客氣! 😀

      Reply
  5. Yao

    感謝分享! 最近剛好在找可以連FB的外掛

    Reply
    • LiLing

      很開心有幫到你:)

      Reply
  6. 土狗

    很詳細又實用的文章分享~
    已收藏~感謝版主~

    Reply
    • LiLing

      謝謝你特地來留言~

      Reply
  7. sam

    感謝教學,非常受用

    Reply
    • LiLing

      謝謝你的留言,很高興有幫到你!

      Reply

Leave a Reply to Evelyn 取消回覆

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