如何在您的網站上嵌入 Instagram Reels [簡易指南]

已發表: 2022-09-19

您想在您的網站上嵌入 Instagram 捲軸嗎?

通過在您的網站上展示 Instagram 捲軸,您可以吸引訪問者並讓他們繼續觀看您的內容。

但是在您的網站上嵌入來自 Instagram 的內容可能很困難——尤其是如果您還不習慣編碼的話。

解決方案? 我們將在本教程中向您展示如何在 WordPress 網站上嵌入 Instagram 捲軸。

在此之前,讓我們看一下 Instagram reels 可以如何幫助您的業務。

或者你可以點擊這裡直接跳到我們的教程。

為什麼在您的網站上嵌入 Instagram Reels?

您可以通過多種方式通過嵌入 Instagram 捲軸來幫助您的業務。

當人們訪問您的網站時,您可以向他們展示 Instagram 捲軸並讓他們與您的內容保持互動。

畢竟,捲軸的參與度比普通的 Instagram 視頻高 67%。

Instagram 視頻內容

因此,您可以讓人們在您的網站上停留更長時間,同時獲得更多的瀏覽量、喜歡和關注者。

此外,您還可以使用 Instagram 捲軸展示用戶生成的內容 (UGC) ,例如您網站上的評論和演示。

這樣,您就可以使用 Instagram 用戶的社交證明來開始增加銷售額。

而這僅僅是開始! 您可以通過多種方式使用捲軸進行 Instagram 營銷並輕鬆發展業務。

有了這個,讓我們看一下開始嵌入 Instagram 內容的最簡單方法。

在 WordPress 上嵌入 Instagram 捲軸的方法

如果您想在您的網站上嵌入 Instagram 內容,您有 2 個選項可供選擇:

  • 手動:收集所有 Instagram 帖子的 HTML 嵌入代碼,然後手動將代碼插入您的網站。
  • 自動:只需使用可以在您的網站上自動嵌入 Instagram 內容的 WordPress 插件。

如果您選擇第一種方法,則將 Instagram 帖子嵌入您的網站可能需要更多時間和精力。 如果您想顯示大量 Instagram 捲軸,則必須處理大量自定義 HTML 代碼。

Instagram 的嵌入代碼

最重要的是,如果您想自定義 Instagram 內容的外觀,則必須手動自定義此代碼。

如果您不精通技術,這意味著花錢聘請開發人員為您定制它。

如果在您的網站上嵌入此代碼時遇到任何問題,您將沒有支持團隊來幫助您。

好消息是,您可以使用自動方式輕鬆地將 Instagram 捲軸嵌入您的網站。

在 WordPress 中嵌入 Instagram Reels 的最簡單方法

您只需要一個像 Instagram Feed Pro 這樣的 WordPress 插件,只需單擊幾下即可嵌入 Instagram 內容。

最好的 instagram feed pro 插件

使用此插件,您可以輕鬆地在您的 WordPress 網站上創建、自定義和嵌入帶有 Instagram 內容的提要。

在 Instagram 捲軸之上,當涉及到要嵌入的 Instagram 內容類型時,您可以獲得大量選項。 您可以顯示 Instagram 視頻、照片、主題標籤供稿、Instagram 故事等等。

您所要做的就是遵循 3 步引導流程,它將帶您完成嵌入 Instagram 提要的整個過程。

為了幫助您輕鬆創建漂亮的提要,您可以使用插件的實時提要編輯器,它具有實時預覽功能。

Instagram 點擊嵌入按鈕

除了擁有大量功能之外,Instagram Feed Pro 還從頭開始構建,輕巧快速。

因此,您可以根據需要顯示盡可能多的 Instagram 內容,並且您的網站仍然會以閃電般的速度加載。 通過更快的網站,您可以獲得更好的 SEO 並輕鬆吸引更多人。

憑藉所有這些驚人的功能,它很容易成為市場上最好的 Instagram 動態插件,超過 100 萬用戶的評分為4.9/5 星

評論 instagram feed pro 插件

想要輕鬆開始嵌入 Instagram 捲軸嗎? 立即獲取 Instagram Feed Pro。

現在讓我們繼續看看如何使用此插件在您的網站上顯示 Instagram 捲軸。

如何在您的網站上嵌入 Instagram 捲軸

讓我們開始吧,看看如何使用這個插件輕鬆地將 Instagram 捲軸嵌入 WordPress。

您所要做的就是按照以下步驟操作:

第 1 步:安裝 Instagram Feed Pro 插件

首先,在此處獲取您的 Instagram Feed Pro 副本,然後將其安裝在您的 WordPress 網站上。

不知道怎麼做? 您可以查看此分步指南,了解如何安裝 WordPress 插件。

安裝並激活插件後,您可以繼續執行下面的步驟 2。

第 2 步:創建 Instagram 供稿

插件準備就緒後,您現在可以創建一個 Instagram 供稿,用於顯示您的捲軸。

首先,從您的 WordPress 儀表板導航到Instagram Feed » All Feeds菜單。

在此頁面上,單擊頂部的添加新按鈕。

創建新的提要 instagram feed pro

完成此操作後,插件將要求您從 3 個選項中選擇 Instagram 供稿:

  • 用戶時間線:顯示您 Instagram 個人資料中的內容
  • 公共標籤:嵌入所有帶有您選擇的標籤的 Instagram 帖子
  • 標記帖子:顯示已標記您帳戶的 Instagram 照片和視頻

您還可以選擇多個選項並將不同的 Instagram 提要類型組合為一個。

要繼續,請選擇您的提要類型,然後單擊下一步

選擇您的供稿類型 instagram feed pro

現在您已經創建了您的提要,您可以繼續進行第 3 步並將其連接到您的 Instagram 帳戶。

第 3 步:將您的 Feed 連接到 Instagram

通過連接您的 Instagram 帳戶,您的提要可以在您的網站上顯示來自 Instagram 的照片、視頻和捲軸。

準備好開始了嗎? 首先,單擊添加源按鈕。

Instagram 添加供稿源

這樣做會打開一個彈出窗口,您可以在其中選擇連接個人帳戶或企業Instagram 帳戶。

使用個人帳戶,您只能嵌入您自己帳戶中的 Instagram 內容。

另一方面,企業帳戶可讓您顯示各種 Instagram 內容,包括 Instagram 主題標籤供稿、標記供稿、可購物供稿等。

只需在彈出窗口中選擇您的帳戶類型,然後單擊使用 Instagram 登錄以繼續。

選擇 Instagram 帳戶類型彈出窗口

這將在您的網絡瀏覽器中打開 Instagram,您可以在其中完成將您的提要連接到您的 Instagram 帳戶。

在這裡,Instagram Feed Pro 將要求對您的帳戶進行只讀訪問。 使用此訪問權限,插件只能查看 Instagram 內容,無法進行任何更改。

只需單擊“允許”即可完成連接您的 Instagram 帳戶。

允許訪問 Instagram

現在,該插件將帶您回到您的網站。

在這裡,您可以通過單擊下一步確認此帳戶作為您的 Instagram 源的來源。

確認您的 Instagram 供稿源

當您將來創建新的 Instagram 訂閱源時,只需單擊一下即可選擇此來源。

現在您已連接您的 Instagram 帳戶,您可以在步驟 4 中自定義您的提要。

第 4 步:自定義您的 Instagram 捲軸

完成連接 Instagram 帳戶後,該插件會將您發送到實時提要編輯器。

在這裡,您可以向左查看並找到自定義提要佈局、配色方案、標題樣式、畫廊大小等的選項。

在右側,您可以看到 Instagram 動態的實時預覽。

首先,您可以過濾您的 Instagram 供稿並開始顯示您的視頻捲軸。

首先,選擇頂部的設置選項,然後單擊下面的過濾器和審核選項。

從這裡,您可以選擇在您的提要中顯示哪些類型的 Instagram 帖子。

要顯示您的捲軸,請查找“顯示特定類型的帖子”選項,然後取消選中照片”選項。

顯示視頻

之後,單擊“保存”按鈕以確認您的更改。

接下來,您可以通過單擊頂部的“設置”按鈕繼續自定義您的 Instagram 提要。

返回設置 instagram

之後,單擊自定義以從此處返回主要自定義選項。

打開自定義選項

使用 Instagram Feed Pro 插件,您可以更改捲軸的佈局。

為此,請在左側查找Feed Layout選項。

選擇提要佈局選項 instagram

您現在可以看到 4 種不同的供稿佈局選項供您選擇:網格、輪播、砌體亮點

讓我們看看下面的這些選項:

使用網格佈局,您可以以整齊的行和列顯示 Instagram 捲軸。 這樣,您可以在您的網站上同時擁有大量視頻內容。

網格佈局 instagram 視頻源

接下來,您擁有輪播佈局,可用於在 Instagram 輪播滑塊中顯示 Instagram 捲軸。

這是使您的網站更輕鬆地更具交互性的好方法。

輪播佈局 instagram 視頻提要

想要保持 Instagram 捲軸視頻的原始比例?

在這種情況下,您可以簡單地選擇砌體選項。

砌體佈局 instagram 視頻提要

您還可以使用突出顯示選項,通過刪除標題等額外信息,可以將焦點放在您的 Instagram 捲軸上。

這種佈局可以幫助您在您的網站上清楚地顯示 Instagram 捲軸。

Instagram 突出顯示提要

選擇您的 Instagram 供稿佈局後,再次單擊“保存”按鈕。

現在單擊自定義按鈕返回到主要的自定義選項。

返回主要自定義選項

接下來,您可以使用 Instagram Feed Pro 插件來更改 Instagram Feed 的顏色。

只需選擇左側的配色方案選項即可開始。

配色方案選項添加 instagram 視頻源

為了幫助您輕鬆更改 Instagram 捲軸的顏色,您可以在此處從 4 種不同的配色方案中進行選擇:

  • 從主題繼承:複製 WordPress 主題的顏色
  • Light:顯示淺色背景和較深的字體顏色
  • 深色:顯示深色的提要背景和較淺的字體顏色
  • 自定義:自己手動選擇所有顏色
Instagram 視頻源的配色方案選項

選擇提要顏色後,再次單擊“保存”。

如您所見,Instagram Feed Pro 讓您可以非常輕鬆地自定義 Instagram 內容在您網站上的顯示方式。

使用其餘選項,您可以更改標題、帖子樣式、按鈕設計等等。

最後,一旦您對 Instagram 供稿的設計感到滿意,請單擊保存

之後,是時候進入最後一步並嵌入您的 Instagram 供稿了。

第 4 步:嵌入您的 Instagram 捲軸

使用此插件,您可以通過 2 種方式在您的網站上顯示 Instagram 捲軸:

  • 在您的頁面上嵌入 Instagram 捲軸
  • 在側邊欄或頁腳中嵌入 Instagram 捲軸

讓我們看看如何在下面使用這兩種方法。

在您的頁面上嵌入 Instagram Reels

使用實時提要編輯器,您只需單擊幾下即可將 Instagram 捲軸嵌入您的網頁。

為此,首先,單擊頂部的嵌入按鈕。

嵌入 Instagram 提要

之後,Instagram Feed Pro 會要求您選擇 Instagram Feed 的位置。 您可以將其顯示在頁面上,將其作為小部件嵌入,或在此處複製短代碼。

現在,單擊彈出窗口上的添加到頁面按鈕。

將 instagram feed 添加到頁面 instagram feed pro

接下來,彈出窗口將顯示您網站上的 WordPress 頁面列表。

要繼續,只需從列表中選擇您的頁面,然後單擊“添加”按鈕。

將 instagram 提要添加到 wordpress 頁面

完成此操作後,該插件將在 WordPress 編輯器中打開該頁面,以便您可以嵌入您的 Instagram 捲軸。

首先,單擊加號圖標 (+)添加新的內容塊。

添加新的 wordpress 塊

接下來,使用頂部的搜索欄查找“Instagram”塊。

從搜索結果中,單擊Instagram Feed塊以嵌入您的捲軸。

嵌入 instagram 提要頁面

現在您可以點擊更新,您的 Instagram 捲軸將出現在您的網站上。

如果您打開您的網站,您可以看到您的 Instagram 內容顯示在您的網頁上。

示例 instagram 視頻源

有了這個,讓我們來看看在您的網站上嵌入 Instagram 捲軸的下一種方法。

在側邊欄或頁腳中嵌入 Instagram Reels

使用此插件,您可以創建一個 Instagram 小部件以在您網站的側邊欄或頁腳上顯示捲軸。

首先,從您的儀表板打開Instagram 動態 » 所有動態菜單,然後選擇您之前的 Instagram 動態。

選擇您的 Instagram 供稿

這樣,您可以再次在實時提要編輯器中打開提要。

從這裡,單擊右上角的嵌入按鈕開始嵌入您的 Instagram 捲軸。

嵌入 Instagram 提要

單擊該按鈕將打開一個彈出窗口,詢問您要在哪裡嵌入 Instagram 捲軸。

這一次,單擊彈出窗口上的Add to a Widget按鈕。

將 instagram feed 添加到小部件 instagram feed pro

現在,您可以選擇新 Instagram 小部件的位置。

要將 Instagram 捲軸嵌入您的側邊欄,請單擊側邊欄面板。

打開側邊欄面板以嵌入社交媒體小部件

或者,您可以單擊頁腳麵板以在網站頁腳上顯示您的捲軸。

我們將在此處使用側邊欄作為示例。

打開頁腳麵板以嵌入社交媒體小部件

您現在可以通過單擊底部的加號圖標 (+)添加新小部件。 最後,從選項中選擇Instagram Feed小部件。

將 instagram 小部件添加到您的側邊欄

之後,您可以單擊更新,您的 Instagram 捲軸將實時顯示給所有人。

事實上,您現在可以打開您的網站,看看它對您的訪問者的看法。

示例 instagram 視頻提要側邊欄

就是這樣!

只需按照本指南進行操作,您只需單擊幾下即可將 Instagram 捲軸嵌入您的網站 - 無需編碼。

之後,您可以提升 Instagram 關注度、增加轉化率並輕鬆開始發展業務。

準備好嵌入 Instagram 供稿了嗎? 立即獲取您的 Instagram Feed Pro 副本。

尋找一種方法來提高您在 Instagram 上的關注度? 查看我們的便捷指南,了解如何獲得更多 Instagram 關注者。

如果您喜歡這篇文章,請隨時在 Twitter 和 Facebook 上關注我們,獲取更多社交媒體營銷教程。