犬哥網站

希望這篇文章對你有幫助!

如果希望我協助「 網站建置、講座教學等 .. 」,歡迎 聯絡我
如何將 IG 嵌入 WordPress 網頁 / 側邊欄 / 頁尾?( Instagram Feed 教學)

如何將 IG 嵌入 WordPress 網頁 / 側邊欄 / 頁尾?( Instagram Feed 教學)

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

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

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

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


1. Smash Balloon Social Photo Feed 是什麼?

Smash Balloon Social Photo Feed:最受歡迎的 Instagram Feed 外掛

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

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

Smash Balloon Social Photo Feed:嵌入 Instagram 網格樣式

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

Smash Balloon Social Photo Feed 可設定多個帳戶

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

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

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

Smash Balloon Social Photo Feed:社交牆功能

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


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

這個章節,我們直接安裝+啟用 Smash Balloon Social Photo Feed 外掛吧:)

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

安裝+啟用 Smash Balloon Social Photo Feed

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

安裝+啟用完成,我們就可以來串接 Instagram 帳號+設計面板,具體分為以下 4 個步驟:)

Step 1:串接 Instagram 帳號

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

Instagram Feed WordPress:串接 Instagram 帳號
Instagram Feed WordPress:串接 Instagram 帳號

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

選擇帳號類型、按下串接帳號按鈕

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

Instagram Feed WordPress:勾選 Instagram 帳號,選擇串接
Instagram Feed WordPress:勾選 Instagram 帳號,選擇串接

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

Step 2:設定貼文檢查頻率

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

設定 Instagram 貼文檢查方式

Step 3:設計版面配置

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

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

Instagram Feed WordPress 教學:設計版面配置
Instagram Feed WordPress 教學:設計版面配置

Step 4:設計追蹤按鈕

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

設計「 載入更多 」、「 追蹤 」按鈕

以上就是串接帳號+設計版面的 4 個步驟,是不是很簡單呢~


4. WordPress 嵌入 Instagram 帳號&貼文

這個章節,我們來實際進行「 在 WordPress 網頁嵌入 Instagram 」操作吧:)

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

頁尾

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

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

前往 Astra Footer Builder 新增「 Instagram Feed 」小工具

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

成功在 WordPress 嵌入 Instagram 帳號~

單一文章

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

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

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

前往外掛設定,找到短代碼進行複製

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

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

依照外掛整理清單,客製化短代碼

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

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

前往文章新增短代碼小工具,貼上短代碼

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

成功嵌入 Instagram 帳號+顯示修改過的短代碼效果

側邊欄

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

在側邊欄新增 Instagram 小工具

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

成功在 WordPress 側邊欄嵌入 Instagram 帳號~

常見問題

Smash Balloon Social Photo Feed 是什麼?

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

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

如何在 WordPress 網頁嵌入 Instagram?

使用 Smash Balloon Social Photo Feed 外掛,安裝後串接 Instagram 個人 / 商業帳戶。

串接帳號完成,前往外掛設定,複製+修改短代碼,到頁面、文章、頁尾、側邊欄進行貼上,就可以順利顯示囉:)

本文已有詳細教學,可供大家參考流程,進行學習~

除了 Instagram,我還能嵌入其他社群軟體嗎?

可以,犬哥網站已經有串接 Facebook 粉絲專頁 / 社團Facebook Messenger 教學文章,有需要的站長,可以前往學習唷:)

除了社群軟體外,還有 串接 Google Map 教學,若是有實體店家 / 公司地址的網站,想在網站上嵌入地點,也可參考看看~


WordPress 學習資源

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

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能配上 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 犬哥網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

犬哥網站:wordpress教學社團

Leave a Comment

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

回到頂端