Smash Balloon Social Photo Feed:WordPress嵌入Instagram貼文完整教學

更新 發佈

想在WordPress網站嵌入Instagram貼文,但Meta官方工具總是出問題?Smash Balloon Social Photo Feed外掛是你的最佳選擇!這款外掛穩定、易用,支援多種自定義選項,讓你的IG貼文完美融入網站。本文提供詳細的安裝與設定教學,幫助你快速打造專業的社群媒體展示區塊。

為什麼選擇Smash Balloon Social Photo Feed?

Smash Balloon Social Photo Feed是一款專為WordPress設計的Instagram Feed外掛,相較於Meta官方工具,它提供更高的穩定性和靈活的版面配置功能。不論是個人部落格、電商網站還是品牌官網,這款外掛都能讓你的IG貼文更具吸引力。以下是使用步驟:

步驟1:安裝Smash Balloon Social Photo Feed外掛

1. 登入WordPress後台,前往「外掛」>「新增外掛」。

2. 在搜尋欄輸入「Smash Balloon Social Photo Feed」,找到外掛後點擊「立即安裝」,並啟用。

raw-image

 

步驟2:進入Instagram Feed設定選單

1. 安裝完成後,在WordPress左側選單找到「Instagram Feed」選項。

2. 點擊進入外掛的主設定頁面,開始自定義你的IG Feed。

raw-image


步驟3:連結Instagram帳號

1.在Instagram Feed設定頁面,點擊「新增來源」。

2. 按照提示登入你的Instagram帳號,授權外掛存取貼文。

3. 若連線失敗,請確認帳號是否為公開帳號,或檢查Meta API權限設定。

raw-image

 

步驟4:自定義Instagram Feed顯示模式

Smash Balloon提供多種設定選項,讓你調整IG貼文在網站上的顯示方式。以下是主要設定項目:

raw-image

4-1 版面配置(Feed Layout)

Feed Height:設定Feed區塊總高度,建議600-800px,確保內容完整顯示。

Padding:調整圖片間距,推薦10-20px,打造乾淨的視覺效果。

Desktop & Mobile:指定電腦和手機顯示的貼文數量,例如電腦6篇,手機4篇。

Columns:設定每排貼文數量,可針對電腦(3-4欄)、平板(2-3欄)、手機(1-2欄)分別設定。

raw-image


 

4-2 配色方案(Color Scheme)

選擇適合網站風格的配色:

Inherit from Theme:沿用網站主題配色。

Light:明亮風格,適合淺色背景。

Dark:深色風格,適合夜間模式。

Custom:自定義顏色,打造獨特品牌風格。

raw-image


4-3 標題(Header)

決定是否在Feed上方顯示標題(例如IG帳號名稱)。

自定義標題文字大小、顏色,或上傳個人頭像。

raw-image


4-4 貼文(Post)

選擇圖片解析度(低、中、高),建議使用「高」以確保清晰度。

啟用或禁用貼文說明文字、點讚數等顯示內容。

raw-image

4-5 載入更多按鈕(Load More Button)

決定是否顯示「載入更多」按鈕。

自定義按鈕文字(例如「查看更多貼文」)與顏色樣式。

raw-image

4-6 追蹤按鈕(Follow Button)

啟用「追蹤」按鈕,鼓勵訪客關注你的IG帳號。

自定義按鈕文字(例如「Follow Us」)與樣式。

raw-image

步驟5:儲存設定

完成所有設定後,點擊右上角的「Save」按鈕,儲存你的自定義選項。

 

步驟6:使用Elementor嵌入Instagram Feed

1.開啟Elementor編輯器,進入你要放置IG Feed的頁面。

2. 在Elementor小工具中搜尋「Instagram Feed」,拖曳至指定區塊。

3. 選擇剛剛設定的Feed,即可在頁面預覽效果。

raw-image

 

注意事項

帳號連線問題:若無法連線IG帳號,請檢查Meta API設定或更新外掛版本。

免費版限制:免費版功能有限,進階功能(如進階版面、過濾器)需升級至付費版。

效能優化:使用圖片壓縮工具(如TinyPNG)減少圖片大小,提升網站載入速度。

 

 

參考來源

https://prosabrina.com/plugin_smash-balloon-social-photo-feed/

留言
avatar-img
留言分享你的想法!
avatar-img
TechWayfarer 技術旅者
0會員
102內容數
歡迎光臨TechWayfarer 技術旅者
2025/07/30
為什麼想用本機帳戶? 隨著 Windows 10 更新,微軟越來越強迫使用者綁定 Microsoft 帳號。對某些使用情境(如企業部署、Kiosk 模式、單機環境)來說,本機帳戶其實更方便、簡潔,也能少一層遠端同步的資安疑慮。 那要怎麼跳過 Microsoft 帳號、改用本機帳戶來完成安裝呢?
2025/07/30
為什麼想用本機帳戶? 隨著 Windows 10 更新,微軟越來越強迫使用者綁定 Microsoft 帳號。對某些使用情境(如企業部署、Kiosk 模式、單機環境)來說,本機帳戶其實更方便、簡潔,也能少一層遠端同步的資安疑慮。 那要怎麼跳過 Microsoft 帳號、改用本機帳戶來完成安裝呢?
2025/07/23
🔧 問題說明 你是否遇到以下狀況? 筆電預載的是 Windows 10/11 家用版(Home)OEM 序號 購買新的 Windows Pro(專業版)正版序號,輸入後卻無法啟用 系統依然顯示為「家用版」 ✅ 解決方法:四步驟快速完成 升級啟用 斷網 在正式啟用之前,請先關閉所有網路
2025/07/23
🔧 問題說明 你是否遇到以下狀況? 筆電預載的是 Windows 10/11 家用版(Home)OEM 序號 購買新的 Windows Pro(專業版)正版序號,輸入後卻無法啟用 系統依然顯示為「家用版」 ✅ 解決方法:四步驟快速完成 升級啟用 斷網 在正式啟用之前,請先關閉所有網路
2025/07/22
為什麼想用本機帳戶? 隨著 Windows 10 更新,微軟越來越強迫使用者綁定 Microsoft 帳號。對某些使用情境(如企業部署、Kiosk 模式、單機環境)來說,本機帳戶其實更方便、簡潔,也能少一層遠端同步的資安疑慮。 那要怎麼跳過 Microsoft 帳號、改用本機帳戶來完成安裝呢?
2025/07/22
為什麼想用本機帳戶? 隨著 Windows 10 更新,微軟越來越強迫使用者綁定 Microsoft 帳號。對某些使用情境(如企業部署、Kiosk 模式、單機環境)來說,本機帳戶其實更方便、簡潔,也能少一層遠端同步的資安疑慮。 那要怎麼跳過 Microsoft 帳號、改用本機帳戶來完成安裝呢?
看更多
你可能也想看
Thumbnail
不是每個人都適合自己操盤,懂得利用「專業」,才是績效拉開差距的開始
Thumbnail
不是每個人都適合自己操盤,懂得利用「專業」,才是績效拉開差距的開始
Thumbnail
生產力爆發帶來的過剩,會讓過去的「還可以啦」成為最低標準。市場需求對於出類拔萃、獨一無二的需求還是存在,但是對於那些價格高度敏感,或是只需要穩定、便宜、還可以啦的需求端來說,AI 正在迅速取代這部分的供給,中間長尾的服務提供者被 AI 替換。
Thumbnail
生產力爆發帶來的過剩,會讓過去的「還可以啦」成為最低標準。市場需求對於出類拔萃、獨一無二的需求還是存在,但是對於那些價格高度敏感,或是只需要穩定、便宜、還可以啦的需求端來說,AI 正在迅速取代這部分的供給,中間長尾的服務提供者被 AI 替換。
Thumbnail
年末總有一種莫名的魔力,讓人特別容易感到孤單。 聖誕節、跨年、緊接著農曆新年……滑開社群,不是甜蜜放閃,就是一群人早早訂好跨年行程。 明明日子算得上順遂,工作穩定無憂,生活也按部就班地往前走着,可總在萬籟俱寂的夜晚,獨自對着空蕩的房間時,心底會悄悄冒出一個念頭:今年,是不是可以不一樣?不再獨自抵
Thumbnail
年末總有一種莫名的魔力,讓人特別容易感到孤單。 聖誕節、跨年、緊接著農曆新年……滑開社群,不是甜蜜放閃,就是一群人早早訂好跨年行程。 明明日子算得上順遂,工作穩定無憂,生活也按部就班地往前走着,可總在萬籟俱寂的夜晚,獨自對着空蕩的房間時,心底會悄悄冒出一個念頭:今年,是不是可以不一樣?不再獨自抵
Thumbnail
寫作Blogger和一般Blogger最大的不同,就是有無上、下章和回目錄的按鈕了。又由於是個人創作的部落格,不可能會有專屬手機APP,這些按鈕最好是能夠,自動調節成合適的大小。 那麼會不會很難呢?其實並不難,一樣是編輯CSS就能辦到,這次會利用到的,還有無序清單元素的<li>。但要先說明的是
Thumbnail
寫作Blogger和一般Blogger最大的不同,就是有無上、下章和回目錄的按鈕了。又由於是個人創作的部落格,不可能會有專屬手機APP,這些按鈕最好是能夠,自動調節成合適的大小。 那麼會不會很難呢?其實並不難,一樣是編輯CSS就能辦到,這次會利用到的,還有無序清單元素的<li>。但要先說明的是
Thumbnail
在上一篇文章1-1 利用免費Blogger版型創建寫作部落格,可以知道我使用的版型是2018年的,那時的圖片還不興導圓角,可是在今年新出的樣版,都將圖片加上圓角,實在有些羨慕,那該怎麼辦呢? 其實是非常容易的,只要按滑鼠右鍵,之後就是剪下、貼上的事。 不過首先,你得知道圓角的CSS語法為bo
Thumbnail
在上一篇文章1-1 利用免費Blogger版型創建寫作部落格,可以知道我使用的版型是2018年的,那時的圖片還不興導圓角,可是在今年新出的樣版,都將圖片加上圓角,實在有些羨慕,那該怎麼辦呢? 其實是非常容易的,只要按滑鼠右鍵,之後就是剪下、貼上的事。 不過首先,你得知道圓角的CSS語法為bo
Thumbnail
你是否常常覺得自己文章的版面長的不好看?想要去找圖片來放,但是又覺得很麻煩,其實你可以使用Pexels來輕鬆解決這個問題,只要一張圖片,版面就會大大加分。
Thumbnail
你是否常常覺得自己文章的版面長的不好看?想要去找圖片來放,但是又覺得很麻煩,其實你可以使用Pexels來輕鬆解決這個問題,只要一張圖片,版面就會大大加分。
Thumbnail
這是教你插入野頁碼從簡報的第3頁開始為編碼第1頁, 我把第2頁設計成目錄頁我不想讓他有編碼,所以從第3頁開始,這樣有懂嗎?呵呵 首先到最上方的功能選項 [ 插入 ]然後 [ 頁首及頁尾 ] ☑勾選投影片編號 ☑標題投影片中不顯示 然後按全部套用 再來到功能選項的 [ 設計 ] 然後 [ 投影片大小
Thumbnail
這是教你插入野頁碼從簡報的第3頁開始為編碼第1頁, 我把第2頁設計成目錄頁我不想讓他有編碼,所以從第3頁開始,這樣有懂嗎?呵呵 首先到最上方的功能選項 [ 插入 ]然後 [ 頁首及頁尾 ] ☑勾選投影片編號 ☑標題投影片中不顯示 然後按全部套用 再來到功能選項的 [ 設計 ] 然後 [ 投影片大小
Thumbnail
要用什麼樣的構圖法輕鬆拍出「把字放上去也很好看」的照片?首先,你要有一個「版面配置」的概念:這張照片要放字,放哪裡?
Thumbnail
要用什麼樣的構圖法輕鬆拍出「把字放上去也很好看」的照片?首先,你要有一個「版面配置」的概念:這張照片要放字,放哪裡?
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
這次來點更實用的,動態橫幅(Banner)的製作。
Thumbnail
這次來點更實用的,動態橫幅(Banner)的製作。
Thumbnail
最近開始經營自媒體,也因此開始變成重度 Canva使用者,做出了一系列的品牌元素。其中包含了Instagram, Facebook, YouTube以及Zoom。 在這邊跟大家分享這些設計圖片,還有自己在設計的過程。
Thumbnail
最近開始經營自媒體,也因此開始變成重度 Canva使用者,做出了一系列的品牌元素。其中包含了Instagram, Facebook, YouTube以及Zoom。 在這邊跟大家分享這些設計圖片,還有自己在設計的過程。
Thumbnail
這次我們要說到遊戲經常使用到的圖片指令系列。在不使用插件的情況下也可以使用來做對話框背景或是立繪顯示。
Thumbnail
這次我們要說到遊戲經常使用到的圖片指令系列。在不使用插件的情況下也可以使用來做對話框背景或是立繪顯示。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News