如何將 IG 嵌入 WordPress 網頁 / 側邊欄 / 頁尾？（ Instagram Feed 教學）

這是一篇完整「 Instagram Feed WordPress 」嵌入教學，將使用「 Smash Balloon Social Photo Feed 」外掛，在 WordPress 網頁、頁尾、側邊欄等 .. 順利嵌入 Instagram 帳號＆貼文。

經營個人部落格、 公司品牌官網、架設電商網站，可能會有將 Instagram 帳號＆貼文，嵌入自架網站的需求。

將網站流量有效導向社群軟體，就能夠在線下利用 Instagram 社群功能，與粉絲交流互動，也方便品牌的人性化經營，培養忠實粉絲唷：）

我們將會使用非常簡單的方式，幫助大家完成 Instagram Feed 教學，準備好的話，就開始囉～

• 1. Smash Balloon Social Photo Feed 是什麼？
• 2. 安裝＋啟用 Smash Balloon Social Photo Feed
• 3. 串接 Instagram 帳號＋設計面板
• 4. WordPress 嵌入 Instagram 帳號＆貼文
• 常見問題
• WordPress 學習資源

影片學習：如何將 IG 嵌入 WordPress 網頁 / 側邊欄 / 頁尾？

---

1. Smash Balloon Social Photo Feed 是什麼？

Smash Balloon Social Photo Feed 是一款熱門 WordPress Instagram 外掛，目前安裝數量高達 100 萬，並且有著極佳的評分。

安裝後，只需要簡單的設置，就能在 WordPress 網頁任意位置（頁尾、文章、側邊欄等 .. ）嵌入 Instagram 帳號。

還可顯示多個帳戶的貼文，這讓 WordPress 嵌入 Instagram 有了不一樣的玩法：）

設計方面，我們可訂製貼文的佈局、按鈕樣式＆顏色、變更照片寬度 / 高度、顯示的貼文數量等 .. 。

Smash Balloon Social Photo Feed 進階版，功能就更加強大了，可以選擇更多的貼文顯示方式、佈局模版設計、讀取加速等 .. 功能。

也能結合同時開發的 Facebook、Twitter、Youtube 等 .. 社交軟體的免費串接外掛，集合成社交牆。

如果你想在 WordPress 嵌入 Instagram，那 Smash Balloon Social Photo Feed 會是個相當不錯的選擇唷：）

---

2. 安裝＋啟用 Smash Balloon Social Photo Feed

這個章節，我們直接安裝＋啟用 Smash Balloon Social Photo Feed 外掛吧：）

前往 WordPress > 外掛 > 安裝外掛，輸入 Smash Balloon Social Photo Feed 選擇安裝＋啟用。

---

3. 串接 Instagram 帳號＋設計面板

安裝＋啟用完成，我們就可以來串接 Instagram 帳號＋設計面板，具體分為以下 4 個步驟：）

Step 1：串接 Instagram 帳號

WordPress 左側邊欄，找到 Instagram Feed > 設定，進入外掛設定頁面 > 1. 設定資訊提供頁面 > 點選「 連接 Instagram 帳號 」。

進入串接 Instagram 帳號頁面，選擇個人 / 商業帳戶，選擇要串接哪個帳號。

如果是選擇商業帳號，就會跳轉至 Facebook 頁面，勾選 Instagram 帳號，按下「 Connect Accounts 」連接帳號。

小備註：若是選擇串接「 個人帳號 」，會跳轉至 Instagram 頁面，一樣按照步驟，選擇要串接的 Instagram 帳號即可：）

Step 2：設定貼文檢查頻率

設定貼文檢查方式，以及貼文更新速度，設定完成，選擇「 儲存設定 」。

Step 3：設計版面配置

前往「 2. 自訂資訊提供 」面板，這裡可進行 Instagram 版面設計，有快速連結，可快速前往區塊面板。

還有許多排版、設計功能，可以進行簡單的設定，像是：調整顯示照片數量、一行顯示幾篇貼文等 .. 。其餘被鎖住的，就是 Pro 版功能唷！

Step 4：設計追蹤按鈕

往下滑，我們會看見更改按鈕顏色區塊，這邊依據站長喜好調整，完成儲存。

以上就是串接帳號＋設計版面的 4 個步驟，是不是很簡單呢～

---

4. WordPress 嵌入 Instagram 帳號＆貼文

這個章節，我們來實際進行「 在 WordPress 網頁嵌入 Instagram 」操作吧：）

以下教學，會分別在：頁尾、單一文章、側邊欄進行嵌入範例，準備好的話，就開始囉。更多 WordPress 後台基礎教學。

頁尾

這邊我們以 Astra 主題的 Footer Builder 作為示範，進入編輯頁尾頁面。更多 Astra 基礎教學。

選擇自訂 > Footer Builder ，在欄位新增「 Widget 小工具 」，選擇加入「 Instagram Feed 」，確認想呈現的位置，按「 發佈 」儲存設定。

刷新前台網站，發現頁尾成功串接 Instagram 帳號囉！

單一文章

在文章中，我們也可以加入 Instagram Feed 短代碼，嵌入 Instagram 帳號。

前往 Instagram Feed > 設定 > 3. 展示資訊提供面板，這邊我們可以找到 Instagram 帳號短代碼，進行複製。

往下滑，也可參考、複製後方外掛幫忙整理好的短代碼，進行客製化設定。

Instagram Feed 原始代碼為： [instagram-feed] ，我們可以在後方，新增不同指令，來調整版面配置、按鈕設計等 .. 。

這邊我們調整：全部版面展示貼文數量、每行貼文數量，將短代碼變更為：[instagram-feed num=2 cols=2] 。

短代碼變更完成，先複製下來，接著我們前往新增文章。更多 WordPress 新增文章教學。

前往新增 WordPress > 新增文章，填寫好文章內容 > 在想新增的區塊，新增「 短代碼 」小工具，將剛剛更改的短代碼貼上，進行儲存。

前往文章頁面刷新，發現成功嵌入 Instagram 帳號，也成功顯示修改過的短代碼，應該呈現的效果囉：）

側邊欄

前往 WordPress 外觀 > 小工具，新增「 Instagram Feed 」小工具，到 Main Sidebar ，確認成功顯示，儲存更新。更多 新版小工具分享。

刷新前台網站，發現成功將 Instagram 嵌入側邊欄囉！

---

常見問題

---

WordPress 學習資源

學習 WordPress 網站架設流程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！

接下來，額外分享 3 項架站資源，可有效幫助大家處理網站問題。

資源一：WP 高手架站課（線上課程）

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗，從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站，3 大類型網站建置方法等 .. 豐富內容，一次教會你。

課程內容非常的紮實（長度超過 20 小時）。如果你剛學習自架網站，這門課程可以讓你用最快的速度，就學會這項技能！

幫你增加網路曝光，提高你的線上營收！

資源二：犬哥數位（專業 WordPress 網頁設計公司）

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位（WordPress 網頁設計公司），請專家製作會更有效率！

資源三：更多犬哥教學資源

如果你在操作過程中遇到問題，可以加入 引力行銷圈 – 犬哥網站（目前有超過 9000+ 團員）。除了有網友一同幫你解惑外，犬哥團隊也會同步在社團幫助大家。

如果你想學更多網頁設計、數位行銷知識，也歡迎追蹤 犬哥網站 IG。或是喜歡看影片學習，可關注 YouTube 頻道。