Whoops

WordPress IG 貼文教學:Smash Balloon 嵌入實作

WordPress 嵌入 Instagram 教學:用 Smash Balloon 外掛與 [instagram-feed] 短代碼,在頁尾、文章、側邊欄顯示 IG 動態牆,含帳號連接、欄數調校與速度優化。

作者:褚崇名(Sliven)

本頁目錄

其實不少人都有這種感覺:官方網站明明架好了,產品頁、關於我們、聯絡表單都到位,但每次打開就是一片靜止的畫面,好像開了一家裝潢很漂亮、卻永遠沒有客人進門的店。而你同時又每天在 Instagram 發限時動態、傳新品照、拍店面實景,那邊熱鬧得像夜市,這邊卻冷清得像倉庫。

把 Instagram 動態牆嵌進 WordPress 網站,就是把那邊的熱鬧搬過來的低成本做法。這篇要拆解的,是怎麼用 Smash Balloon 這套外掛,在網頁、側邊欄、頁尾把 IG 貼文動態拉進來顯示,同時控制它對網站速度的影響。我會把實作步驟、帳號連接的現實門檻、以及「放在哪裡最有感」全部講清楚,不會只給你一段「複製貼上就會動」的表面教學。

換句話說,嵌入 IG 動態牆這件事,真正的難點從來不在「讓它出現」,真正的考驗在於「讓它出現得有效率、有策略、對轉換有幫助」。很多人裝完外掛、把動態牆塞進頁尾之後就沒再理它,結果三個月後 token 過期、畫面一片空白,自己都不知道。這篇會幫你避開這些坑。

你的官網為什麼需要一面 IG 動態牆:它真正解決的三件事

在動手裝外掛之前,我想先跟你聊「為什麼」。因為不少網站是為了跟風而嵌 IG 動態牆,老闆看到別人的網站有就跟著要,結果放上去之後沒人維護 IG,動態牆變成一面只展示三張半年前照片的尷尬牆。那比不放還糟。

嵌入動態牆真正能解決的問題,我歸納成三件,而這三件都跟你在社群媒體行銷上投入的心血能不能被放大有關。

第一件:讓網站看起來「還活著」

一個網站給訪客的第一印象,取決於一個比設計漂不漂亮更現實的問題:「這家公司還在營業嗎」。靜態的產品頁、兩年前更新的部落格、最新消息停在去年的官網,會讓潛在客戶下意識地懷疑你是不是已經收掉了。而 IG 動態牆的價值在於:只要你還在發 IG,網站就會跟著出現新內容。它仍需要定期檢查授權與版面,但不用逐篇回到官網更新。

第二件:把社群上的社會證明搬進成交路徑

消費者在 IG 上看到你的產品照、客人打卡、開箱短片,那叫做社會證明(social proof)。但問題是,他們離開 IG 之後,這些證明就斷了。當他們 Google 到你的官網、走到產品頁準備下單的那一刻,旁邊如果有一面即時更新的 IG 動態牆,上面是其他客人真實使用產品的畫面,這個成交推力比你自己寫一百句「品質保證」都強。

第三件:讓訪客更容易繼續看品牌內容

一面有明確主題的 IG 動態牆,可以讓訪客從產品頁繼續看到新品、使用情境或幕後內容。不過,停留時間與瀏覽頁數不能直接當成 Google 排名訊號;這一段的價值在於改善站內瀏覽與品牌理解,而不是用動態效果換排名。

以在地咖啡烘焙品牌為例,如果 IG 固定更新新品與店面實景,把動態牆放進首頁主視覺下方,訪客就能直接看到正在烘焙的豆子、剛上架的限定款與店內氛圍,比只讀一段「我們堅持新鮮烘焙」更具體。這就是 IG 動態牆實在的價值:把抽象的品牌承諾變成視覺證據。

先搞懂三條路線:Instagram 嵌入不是只有一種做法

很多人以為「嵌入 IG」就是裝一個外掛搞定,但其實技術上有三條完全不同的路線,每條路線的成本、效果、維護負擔都不一樣。選錯路線,你會花三倍力氣做一半的事。我先用一張表把三條路線攤開來比:

路線 運作原理 優點 缺點 適合誰
官方單篇 embed 在 IG 網頁版每篇貼文點「嵌入」,複製一段 iframe 嵌入碼貼進 WordPress 免費、不需外掛、可指定特定貼文 要手動一篇篇嵌入、不會自動更新、載入慢(iframe)、行動裝置體驗差 只想強調某一篇公告或活動貼文的情境
外掛動態牆(本篇主題) 用 Smash Balloon 這類外掛透過 Instagram API 拉取最新貼文,自動排成網格 自動更新、可放側邊欄與頁尾、有 Follow 按鈕、版型可調 需連接 API(新連線通常要專業帳號)、有效能代價、lightbox 等進階功能要付費 有在持續經營 IG、想把動態牆當網站元素的任何品牌
手動截圖替換 定期把 IG 貼文截圖,用圖片區塊排成網格,過陣子手動換圖 完全沒有效能負擔、不被 API 政策綁架 超級耗人力、永遠不是最新的、無法點擊導回 IG 極度重視網站速度、且 IG 更新頻率極低的站

這張表裡藏著一個關鍵認知:官方 embed 與手動截圖,都是「把 IG 內容搬成靜態資產」的做法;只有外掛動態牆是「把 IG 當成一個活的資料來源」。對絕大多數會持續經營 IG 的品牌來說,第二條路線(外掛)才是合理的長期選擇,這也是這篇文章後面要專注拆解的方向。

至於官方 embed,它的價值在於「精準指定」。例如你在寫一篇活動回顧文章,想要嵌進那篇活動的 IG 公告貼文,這時候用單篇 embed 比拉整面動態牆更合理。它跟動態牆是互補關係,不是二選一。如果你常需要在文章裡嵌特定貼文,也可以參考我寫的WordPress 嵌入 Facebook那篇,邏輯是相通的。

為什麼我的選擇總是收斂到 Smash Balloon

WordPress 生態裡能嵌 IG 的外掛其實不少,免費的、付費的、包在某個全能社群外掛裡的都有。但只要是需要 IG 動態牆的需求,評估到最後通常會收斂到 Smash Balloon 這一套。原因跟它紅不紅無關,真正關鍵是它解決了三個別人沒處理好的工程問題。

原因一:它把 Instagram API 的地獄級複雜度封裝起來

Instagram 的 API 與授權方式改過多次,Meta 也在 2024 年底淘汰舊的個人帳號連線方式。以目前的新連線流程來說,應先把 IG 切成商業或創作者帳號;接著可能從 Instagram 直接授權,也可能依外掛提供的連線類型改走 Facebook。Facebook 粉絲專頁是否必要,要看你選的是哪一條授權路徑,不能再一概而論。

Smash Balloon 把授權流程包裝成「Connect」按鈕,你只要依畫面選擇 Instagram 或 Facebook 登入並同意必要權限,外掛會處理 token 的取得與儲存。授權仍可能因密碼、權限或 Meta 政策變動而失效,所以不能把連線當成永久設定。

原因二:它有完整的本地快取機制

這一點跟網站速度直接相關。動態牆仍要載入每張圖片,但 Smash Balloon 會在伺服器保留動態資料與最佳化圖片的快取,減少每次瀏覽都即時呼叫 Instagram API 的需要。實際效能還是取決於圖片數量、尺寸、主機與延遲載入設定,後面講速度那一節會再展開。

原因三:它的版型彈性夠應付大多數品牌需求

免費版包含基本方格、欄數與間距調整、Follow 按鈕、Load More 與區塊編輯器區塊,也能連接多個自有帳號。Masonry、輪播、lightbox、hashtag 篩選與 shoppable(商品導購連結)則屬於 Pro 功能。先按實際需求分清楚版本,才不會照著付費版畫面找不到設定。

當然,如果你正在全面盤點 WordPress 該裝哪些外掛,可以把我寫的WordPress 外掛終極推薦清單對照著看,把 IG 動態牆放進整體的外掛策略裡一起評估,避免單獨決定。

免費版夠用嗎,什麼時候才需要升級 Pro

這題幾乎每個要架站的人都會問。對只需要基本品牌照片牆的中小網站,免費版通常就夠了,先把免費版跑穩再談升級。免費版涵蓋方格排列、Follow 按鈕、Load More、顯示數量與欄數調整;需要站內 lightbox 或進階版型時,再評估 Pro。

什麼情境才值得升 Pro?第一,你要顯示特定 hashtag 的貼文,例如辦活動、讓客人在 IG 用指定標籤投稿。第二,你需要 Masonry、輪播或站內 lightbox。第三,你要 shoppable 功能,讓產品照直接連到商品頁。多帳號顯示目前免費版也有,不該再當成升級理由。

除了這三個明確需求之外,免費版的價值已經足夠支撐一面稱職的品牌動態牆。不少站長在還沒搞清楚自己要什麼之前就先買 Pro,結果那些進階功能一年用不到兩次。升級這件事,等你用免費版跑三個月、看清楚自己到底缺哪一塊再決定,是最務實的節奏。

連接帳號的真實門檻:專業帳號與兩種授權路徑

這一節是整個流程裡最多人卡住的地方。Instagram 有個人、創作者與商業帳號;Meta 淘汰舊連線方式後,新連線應優先使用創作者或商業帳號:

  • 個人帳號(Personal):不適合作為新的 API 動態牆連線來源。先切換成專業帳號再設定,能避開舊授權流程淘汰後的相容性問題。
  • 創作者帳號(Creator):適合個人品牌與內容創作者,可作為目前的專業帳號連線來源。
  • 商業帳號(Business):適合品牌與商家,也可作為專業帳號連線來源。只有選擇經 Facebook 登入的連線方式時,才要確認粉絲專頁與管理權限。

對終端使用者來說,Smash Balloon 會把可用的授權方式列在 Connect 流程裡。你先確認 IG 已切成創作者或商業帳號;若畫面提供「Login with Instagram」,就依 Instagram 授權;若你選「Login with Facebook」,再確認 IG 已連到你有管理權的粉絲專頁。以外掛當下顯示的回呼與權限清單為準,不要套用舊教學的固定路徑。

如果 IG 還是個人帳號,先到 App 的「帳號類型與工具」切換成專業帳號(商業或創作者皆可)。是否還要連結 Facebook 粉專,依你在外掛裡選擇的授權方式決定。

存取權杖(access token)可能因帳號改密碼、撤回授權、管理權限變動或 Meta 政策調整而失效。外掛會盡量維持連線,但仍應定期確認動態牆是否正常;發現來源失效,就回到設定頁重新 Connect。

從零裝起:Smash Balloon 上線的完整流程

前置觀念講完了,現在進入實作。我把流程拆成五個明確的步驟,你跟著走一遍就能把第一面 IG 動態牆掛上網站。如果你連裝外掛本身都還不熟,可以先看一篇WordPress 外掛安裝教學打底,下面的步驟會假設你已經會從後台搜尋並安裝外掛。

第一步:安裝並啟用 Smash Balloon Instagram Feed

從 WordPress 後台左側選單點「外掛 → 安裝外掛」,在搜尋框輸入「Smash Balloon Social Photo Feed」。找那個由 Smash Balloon 開發、活躍安裝數破百萬的那一個(同名的外掛不少,認開發商名稱最準),點「立即安裝」再「啟用」。啟用之後,後台左側選單會多出一個「Instagram Feed」的獨立選項。

第二步:點 Connect 連接你的 IG 帳號

點進「Instagram Feed」,設定頁通常會顯示「Connect an Instagram Account」按鈕。點下去後,依外掛版本與帳號類型選擇 Instagram 或 Facebook 授權;逐項確認帳號、必要權限與回呼網站,完成後會回到 WordPress 後台並顯示來源已連接。

這一步如果卡住,先確認 IG 是專業帳號,再看你選的是 Instagram 登入還是 Facebook 登入。只有走 Facebook 連線路徑時,才需要檢查 IG 與 Facebook 粉絲專頁的連結及帳號權限;也可能是密碼變更、權限撤銷或 token 失效,應依外掛顯示的錯誤重新授權。

第三步:在 Configure 頁面調整要顯示的內容

帳號連接完成後,到「Instagram Feed → All Feeds」新增 User Timeline feed,再進入即時編輯器調整貼文數、欄數、間距、按鈕與其他版面設定。免費版可顯示自有帳號的基本時間軸;hashtag、Stories、shoppable 與部分進階版型屬 Pro 功能,實際選項以目前版本的 feed type 與編輯器畫面為準。

我的建議是:第一面動態牆先別調太多參數,用預設值跑起來再說。很多時候你以為需要的進階功能,實際放上去會發現根本沒人點。先用最小可行版本上線,看一陣子數據再決定要不要升級。

第四步:複製 shortcode 或用 Gutenberg 區塊放進頁面

設定完之後,頁面上方會給你一段 shortcode,長得像 [instagram-feed]。這段短碼就是動態牆的「插入鍵」,你把它貼到任何想要動態牆出現的地方就會生效。最常見的三種貼法:

  • 貼在頁面或文章內文裡:用區塊編輯器編輯首頁時,加一個「Shortcode」區塊,把短碼貼進去。這是最直覺的做法,首頁主視覺下方通常就是放這個。
  • 貼在小工具區(側邊欄、頁尾):到「外觀 → 小工具」,在有提供「自訂 HTML」或「Shortcode」區塊的側邊欄或頁尾區,把短碼貼進去。這個流程跟一般小工具設定完全一樣。
  • 用 Smash Balloon 自己的 Gutenberg 區塊:新版的 Smash Balloon 會在區塊編輯器裡註冊一個專屬區塊,你不用背短碼,直接從區塊選單插入「Instagram Feed」區塊即可,設定都做在區塊面板裡。

第五步:儲存、清除快取、重新整理前台看成果

這一步很多人會漏掉。你把短碼放進頁面、儲存之後,如果前台還是看不到動態牆,通常是因為你的網站裝了快取外掛(像是 WP Rocket 或快取主機層),舊的 HTML 還沒被刷新。到快取外掛設定裡手動清一次快取,或者如果主機層有快取也清一下,再回到前台強制重整,動態牆就會出現。

如果你對網站快取這件事還不熟,可以參考我寫的WordPress 快取外掛那篇的觀念說明,搞懂快取機制之後,往後遇到「改了後台前台沒變」這類問題,你會很有感地知道要往哪裡找答案。

放在哪裡最有效:首頁、側邊欄、頁尾的取捨

動態牆能放的位置很多,但「能放」不等於「該放」。位置選錯,要嘛佔掉寶貴的首屏、拖慢關鍵轉換頁面,要嘛塞在永遠沒人捲到的頁尾深處、根本沒人看見。根據常見的網站配置,把三個最常被問的位置做一份取捨比較:

位置 曝光效果 對轉換的影響 速度風險 我的建議
首頁主視覺下方 最高,幾乎每個訪客都會經過 正向,延長停留、強化品牌印象 中高,因為在關鍵頁面、又可能落在首屏附近 品牌官網首選,但務必搭配延遲載入(後面講)
側邊欄 中,文章讀者才看得到 中性,較難直接促成轉換,但有 Follow 按鈕可導流量 中,每篇文章都會載入 內容站、部落格適合,配一個固定側邊欄效果更穩
頁尾 低,只有認真捲到底的人才看得到 低,作為收尾點綴、引導追蹤 低,因為通常在頁面很後面,可用延遲載入完全壓掉 輔助位置,當作「順手追蹤我們」的出口,不要當主力

這張表裡有一個容易被輕忽的重點:速度風險跟位置強相關。原因很直覺,動態牆放在越前面的位置,它越可能落在「訪客一進站立刻要載入」的範圍,對首屏載入速度的拖累就越直接。放在頁尾,因為訪客要先捲到底才看得到,你可以用延遲載入(lazy load)技術,讓動態牆的使用者真正捲到附近才開始載入,這對網站速度幾乎零影響。這也是為什麼很多重視效能的站會把 IG 動態牆挪到頁尾,避開首頁主視覺下方這個敏感位置。

如果你的網站是用 Astra 這類主打效能的主題架的,側邊欄與頁尾的小工具區通常都很乾淨,放動態牆不會跟主視覺打架。關於主題選擇你可以回頭參考我寫的品牌官網架設思路,先把骨架搭對,再決定動態牆這類裝飾性元素放哪。

側邊欄的進階用法:固定不動的 IG 縮圖

如果你的網站是內容導向,側邊欄其實是放 IG 動態牆的好地方。但普通的側邊欄有個問題:讀者往下捲文章,側邊欄就跟著往上跑消失了。有一個小技巧可以解決這件事,就是搭配固定小工具(fixed widget)外掛,讓側邊欄裡的某一個區塊在讀者捲動時釘在螢幕上。把 IG 動態牆設定成小型網格,搭配這個釘選效果,讀者讀完整篇文章的過程中,那面小小的 IG 牆會一直在視線範圍裡。實作細節可以併著我寫的側邊欄固定教學一起看,兩套外掛是互補的。

把動態牆調到好看:欄數、間距、lightbox、Follow 按鈕

預設裝起來的動態牆能用,但通常稱不上好看。欄數可能太多擠成一團、間距太密、圖片被裁切成奇怪的形狀、沒有點開大圖的功能。這些都是要在 Customize 分頁裡微調的。我把幾個最影響視覺的參數列出來。

欄數與間距

欄數決定一排要塞幾張照片。桌機上常見的設定是 4 到 6 欄,手機上自動縮成 2 到 3 欄。欄數越多、每張圖越小、整面牆越像馬賽克拼貼;欄數越少、每張圖越大、視覺越聚焦但佔的版面高度越高。我的經驗是,放在首頁主視覺下方這種需要「快速掃過」的位置,4 欄是甜點區;放在側邊欄這種窄欄位,1 到 2 欄就好,再多會擠到看不清。

間距(padding)的影響比你想的大。預設的間距有時候太鬆,照片跟照片之間留太多白,整面牆看起來稀稀落落;有時候又太密,照片黏在一起沒有呼吸感。我習慣把間距設在 5 到 10 像素之間,這個範圍通常能兼顧緊湊與留白。這跟設計排版裡講的「鄰近性」原則是同一件事,間距是引導視線節奏的工具,不是隨便填的數字。

Lightbox 大圖檢視

Lightbox 是訪客點照片時,在原頁面開啟大圖覆蓋層,不必立刻跳到 IG。這是 Pro 功能;升級後可在 Customize 分頁找「Popup」或「Lightbox」相關選項,並調整貼文文字與互動資訊的顯示方式。免費版點擊貼文時,應以實際連到 Instagram 的行為為準。

Follow 按鈕與載入更多

Follow 按鈕是動態牆上方或下方的一顆「在 Instagram 追蹤我們」按鈕,點下去會導到你的 IG 個人頁。這是把網站訪客轉成 IG 粉絲的關鍵出口,強烈建議開啟。「載入更多」(Load More)按鈕則是讓訪客主動點擊才載入更多貼文,避免一次把幾十張照片全部載下來,這對速度有幫助,後面會再提到。

效能這一關:動態牆會拖慢網站,怎麼把代價壓到最低

IG 動態牆會增加圖片與指令碼,所以要把網站速度納入取捨。速度直接影響使用體驗與轉換,也是 Google 頁面體驗所考量的眾多訊號之一,但不該把單一外掛或 PageSpeed 分數直接等同於排名。

先講為什麼動態牆會拖慢網站。每一面 IG 動態牆,背後要做的工程動作包括:跟 Instagram API 溝通拉取貼文清單、載入每一張照片的圖檔、載入外掛自己的 CSS 與 JavaScript 來渲染網格與 lightbox。一個沒做優化的動態牆,可能讓你的網頁多載入十幾張外部圖片、外加幾十 KB 的腳本,這些加總起來,就是你的 PageSpeed 分數往下掉的元兇。

Google 已把速度納入搜尋系統考量(見 2018 年 1 月的 Google Search Central Blog 公告),但相關訊號的權重有限,內容相關性仍更重要。web.dev 整理的資料也顯示,載入時間越長,訪客越容易離開。依 Statista 的統計(2026 年 4 月),全球有超過五成的網站造訪來自行動裝置,因此應特別檢查動態牆在手機與較慢網路下的實際載入情況。

講完「為什麼」,接下來講「怎麼補救」。把 IG 動態牆的效能代價壓下來,我整理成四個動作,依優先順序排:

  1. 開啟 Smash Balloon 的本地圖片快取。在設定裡找到「Caching」或「Local Image Caching」相關選項,把它打開。這會讓 IG 照片被存一份在你自己主機,訪客不必每次都去 Instagram 拉圖。這是性價比最高的一個動作,幾乎零成本就能大幅減少外部請求。
  2. 限制預設顯示的貼文數量。不要貪心一次顯示 20 張照片,預設顯示 6 到 8 張就好,剩下的用「Load More」按鈕讓訪客主動點擊才載入。這樣首屏只會載入少量圖片,剩下的等到真有人想看才下載。
  3. 把動態牆放到頁面後段,並啟用延遲載入。位置越後面,越能用延遲載入技術讓它在訪客捲到附近時才開始載入。延遲載入的完整觀念可以看我寫的Lazy Loading 延遲載入那篇,原理套用到動態牆是一樣的,把「用到才載」這個原則貫徹下去,對網站速度的幫助非常直接。更全面的網站加速觀念,則可以搭配網站速度的實戰拆解一起讀。
  4. 圖片本身的格式與壓縮。雖然 IG 圖片是外掛拉的,但你整個網站的圖片優化做得越徹底,動態牆的相對負擔就越不顯眼。確認你站上其他圖片都做過壓縮、轉成現代格式,這部分的觀念可以併著我寫的WordPress 圖片優化一起檢視。

這四個動作做完,IG 動態牆對速度的拖累可以壓到非常低,低到多數訪客根本察覺不到它的存在。這才是「放動態牆而不犧牲效能」的正確做法,而不是「裝了就放著爛」。做完之後,我會建議你拿 Google 的 PageSpeed Insights 或 Lighthouse 跑一次前後對比,親眼看到那個分數的變化,你會更有感地理解每一個動作到底換來了多少速度,這比看任何教學文字都紮實。

卡關排錯:token 過期、白屏、圖片不更新

就算你照著上面的流程做對了每一個步驟,動態牆還是會在某些時刻出狀況。這一節把最常見的三種問題與排錯方向整理出來,你之後遇到類似狀況,可以先照這個順序自查,避免慌張地把外掛刪掉重裝。

狀況一:動態牆突然變空白,什麼都不顯示

先檢查 token 是否過期或授權是否被撤銷。Meta 政策、Instagram 或 Facebook 帳號密碼變更,以及相關管理權限調整,都可能讓存取權杖失效。回到 Instagram Feed 設定頁查看來源狀態;若顯示斷線,重新 Connect。若連線正常,再查快取、JavaScript 錯誤與外掛衝突,不要先認定只有 token 一種原因。

狀況二:動態牆有顯示,但圖片是舊的、不會更新

這通常是外掛的快取還沒刷新。Smash Balloon 預設每隔一段時間(例如一小時或幾小時)才去 IG 拉最新貼文,中間顯示的是快取版本。如果你剛發了一篇新貼文想立刻看到,可以到設定頁手動點「Clear Cache」或「Force Resync」,強制它重新拉取。另一個可能是你的 IG 帳號被設定成「不公開」,私密帳號的貼文外部是讀不到的,確認帳號是公開狀態。

狀況三:桌機看正常,手機看整個歪掉

這通常是欄數設太多、或主題的容器寬度跟動態牆的網格設定打架。排查方向是到 Customize 分頁,把行動裝置的欄數獨立設定成 2 或 3,不要跟桌機共用同一組設定。另一個常見原因是主題或頁面編輯器給側邊欄或欄位的內距設得太窄,動態牆被擠壓變形,這要回到主題或編輯器那邊調容器寬度,不是動態牆外掛本身的問題。

如果以上三種排查都沒有結果,通常要繼續檢查主題、其他外掛或主機層的衝突。如果你用的是區塊編輯器架站,搭配的Gutenberg 區塊外掛也可能跟第三方外掛的腳本產生載入順序衝突,這時要在測試環境逐一停用並查瀏覽器 Console,才能確認真正原因。

把動態牆放進品牌經營的核心

走到這裡,你已經知道怎麼把 IG 動態牆裝起來、放在對的位置、調到好看、還不拖慢網站。但我最後想跟你聊一個更上層的觀念,這個觀念決定了你的動態牆到底會變成資產還是擺設。

動態牆的本質,是你 IG 內容經營成果在官網上的延伸顯示器。它的好壞,完全取決於你 IG 經營的紮實程度。如果你 IG 三個月才發一篇、照片隨手拍、沒有統一的視覺風格,那麼就算你把動態牆排得再漂亮,它反映出來的還是一個沒有在認真經營的品牌,反而扣分。反過來說,如果你 IG 有清楚的內容主軸,例如固定發新品、客人實景、幕後製程,動態牆就會自動把這些精華搬進官網,變成最強的品牌說服工具。

所以裝動態牆之前,我會建議你先誠實問自己一個問題:我的 IG 內容夠不夠撐起一面動態牆?如果不夠,先回去把 IG 的內容節奏建立起來再說。關於 IG 內容經營本身,例如怎麼用短影音帶流量、怎麼把限時動態做成轉換入口,這些可以併著我寫的IG Reels 短影音行銷一起思考。動態牆是顯示器,IG 內容才是訊號源,訊號源沒做好,顯示器再高級也沒有用。

行動清單:從今天開始的六步

整篇文章看完,如果你只想帶走一份可以照著做的清單,這份六步執行路徑就是我把所有重點收斂出來的成果。建議你把它存起來,架站或改版的時候逐項打勾。

  1. 確認 IG 帳號類型:到 IG App 把帳號切換成商業或創作者帳號。若選 Facebook 授權路徑,再確認粉絲專頁連結與管理權限。
  2. 安裝 Smash Balloon Instagram Feed 並完成 Connect:從後台搜尋安裝,啟用後依畫面走完 Instagram 或 Facebook 授權流程,確認帳號顯示已連接。
  3. 決定放置位置:品牌官網優先放首頁主視覺下方;內容站放側邊欄搭配固定小工具;頁尾作為輔助追蹤出口。不要三個位置都塞。
  4. 調整視覺參數:依容器調整桌機與手機欄數、間距、Follow 按鈕、預設顯示數量與 Load More。lightbox 需要 Pro,免費版不要照這一步找設定。
  5. 做完四個效能動作:開啟本地圖片快取、限制顯示數量、動態牆放頁面後段搭配延遲載入、檢查全站圖片優化。這一步不做,前面都白搭。
  6. 建立每月檢查習慣:每個月登入後台確認動態牆正常顯示、token 沒斷線。發現斷線就重新 Connect。這是經營官網的基本維護紀律。

把 IG 動態牆做好,目的不在讓網站看起來更熱鬧,而是讓合適的社群內容延伸到官網。成效要看貼文點擊、站內互動與實際轉換,不能只用停留時間判斷。上線前先確認帳號類型與授權方式,再用手機實際檢查內容、速度與連結。

常見問題

WordPress 怎麼嵌入 Instagram?
主流做法是安裝 Smash Balloon Social Photo Feed 外掛,串接 IG 帳號後,把短代碼 [instagram-feed] 貼到頁尾、文章或側邊欄即可顯示整面動態牆。不想裝外掛,可改用 Instagram 官方嵌入碼放單篇貼文,或定期手動截圖替換。
Smash Balloon Social Photo Feed 免費嗎?
有免費版,可在 WordPress.org 直接下載。免費版就支援顯示動態牆、調整貼文數量(num)與欄數(cols);hashtag 過濾、Reels、限時動態、讀取加速等進階功能才需要升級 Pro。
嵌入 IG 要選個人帳號還是商業帳號?
建議使用創作者或商業帳號作為新的 API 連線來源;個人帳號的舊連線方式已遭淘汰。兩種專業帳號可用功能會依 Meta API、Smash Balloon 版本與授權路徑不同;走 Facebook 登入時,再確認 IG 已連到有管理權的粉絲專頁。
[instagram-feed] 短代碼怎麼用?
基礎是 [instagram-feed],加參數即可客製:num 控制總張數、cols 控制每行幾篇、hashtag(Pro)顯示指定標籤貼文。例如 [instagram-feed num=8 cols=4] 就是顯示 8 張、每行 4 篇的格狀排列。
IG 嵌入會拖慢 WordPress 網站速度嗎?
會有一點影響,因為動態牆要向 Instagram 拉圖與資料。把 num 設小、貼文檢查間隔調長、搭配快取外掛與延遲載入,就能把影響壓到幾乎感覺不到;外掛預設的本地快取則能讓重複造訪近乎秒開。

操作步驟

  1. 安裝啟用外掛後台 → 外掛 → 安裝外掛 → 搜尋「Smash Balloon Social Photo Feed」→ 安裝並啟用。
  2. 連接 Instagram 帳號左側選單 Instagram Feed → 設定 → 連接 Instagram 帳號,授權流程會導到 Facebook,依序選擇 Facebook 商業帳號、粉絲專頁、連結到該粉專的 IG 商業或創作者帳號,同意外掛讀取 IG 貼文資料。
  3. 調整顯示設定進「自訂資訊提供」面板,設定顯示張數(num)、每行幾篇(cols)、按鈕顏色,貼文檢查頻率與更新速度也在這裡調。
  4. 貼上短代碼到定位複製 [instagram-feed](可加 num/cols 等參數,如 [instagram-feed num=8 cols=4]),貼到想顯示的頁面、文章或小工具區,存檔刷新前台即可看到動態牆。

主題聚落|WordPress 外掛生態系 看「WordPress 與網站架設」中樞 →

相關文章

褚崇名(Sliven) 創辦人・巫普斯科技有限公司

長期投入技術 SEO、GEO/AEO 與 AI 搜尋實務。本站文章以可驗證資料、公開來源與實作觀察整理而成。

完整作者介紹LinkedInGitHubX

想把這篇的方法用在自己的站上?

SEO 健檢、GEO/AEO 引用優化、網頁設計諮詢——把文章裡的方法落地到你的網站。