如何輕鬆地將 Instagram 嵌入 WordPress(逐步)

你想在 WordPress 中嵌入 Instagram 提要嗎?

在您的網站上顯示 Instagram 照片和視頻有助於保持內容新鮮、提高用戶參與度並建立信任。 這也是宣傳您的 Instagram 帳戶並獲得更多關注者的好方法。

在本文中,我們將逐步向您展示如何在 WordPress 中嵌入 Instagram。

如何輕鬆地將 Instagram 嵌入 WordPress(一步一步)

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

Instagram 每月活躍用戶超過12.1億,是推廣您的產品和服務、建立品牌知名度和擴大受眾群體的理想場所。

但是,如果人們只是訪問您的網站,他們將看不到您的Instagram內容。 考慮到這一點,將您的 Instagram 提要嵌入 WordPress 是明智之舉,這樣每個人都可以看到它。

這是宣傳您的社交媒體頁面並鼓勵更多人在 Instagram 上關注您的簡單方法。 它還可以讓您的 WordPress 網站保持新鮮,因為新的 Instagram 帖子會自動出現在您的網站上。

所有這些新內容都可以改善您網站的搜尋引擎優化 (SEO),並鼓勵訪問者不斷回來查看最新帖子。

您甚至可以在 WordPress 中顯示評論、顯示主題標籤提要,並嵌入任何已標記您的帖子。 所有這些都是強大的社會證明,可以建立信任併為您帶來更多銷售。

話雖如此,讓我們看看如何在 WordPress 中嵌入 Instagram 提要。

如何安裝 Instagram 照片外掛程式

將 Instagram 嵌入 WordPress 的最佳方式是使用Smash Balloon Social Photo Feed

這個免費外掛程式可讓您在完全可定製的動態中顯示來自一個或多個 Instagram 帳戶的照片。

使用 Feeds for Instagram 建立的嵌入式 Instagram 提要示例

在本指南中,我們將使用免費版的 Smash Balloon,因為它具有將 Instagram 提要添加到 WordPress 網站所需的一切。 但是,還有一個專業版,允許您顯示主題標籤提要、添加 Instagram 可購買圖片等。

在開始之前,您需要將您的 Instagram 帳戶連接到 Facebook 頁面。 如果您有個人 Instagram 帳戶,那麼您可能還想將其轉換為企業帳戶,因為這允許 Smash Balloon 自動顯示您的 Instagram 簡歷和標題。

準備就緒后,請繼續安裝並啟動 Smash Balloon Social Photo Feed 外掛程式。

如何將 Instagram 帳戶連接到 WordPress

啟動外掛程式後,您的第一個任務是將您的 Instagram 帳戶連接到 WordPress。 只需轉到Instagram Feed» 設置,然後按兩下「添加新」。

如何在 WordPress 中創建新的 Instagram 提要

借助 Smash Balloon pro,您可以從帶標籤的帖子和主題標籤創建提要,甚至可以使用來自許多不同社交媒體網站的內容創建社交牆。

由於我們使用的是免費外掛程式,只需選擇“用戶時間軸”,然後按兩下一步“。

如何將 Instagram 時間線添加到您的 WordPress 帳戶

現在,只需選擇您將從中獲取照片源的 Instagram 帳戶。

要開始,請按下「添加源」按鈕。

添加 Instagram 帳戶作為 Smash Balloon 來源

在下一個螢幕上,選擇是否要顯示來自個人或企業 Instagram 帳戶的照片。

如果您選中「個人」旁邊的框,則默認情況下,Smash Balloon 不會在您的標題中包含 Instagram 頭像和簡介。 但是,您始終可以稍後在外掛程式設置中添加 Instagram 頭像和個人簡介。

將個人或企業 Instagram 帳戶添加到 WordPress

選擇「個人」或「企業」後,繼續並按兩下使用Facebook登錄。

您現在可以選擇要在您的WordPress 網站上展示的Instagram帳戶,然後按兩下一步。

選擇要與 Smash Balloon 一起使用的 Instagram 帳戶

之後,選中連結到您的 Instagram 帳戶的 Facebook 頁面旁邊的框。

完成後,按兩下一步按鈕。

如何將 Facebook 頁面添加到您的 WordPress 網站

您现在会看到一个弹出窗口,其中包含 Smash Balloon 可以访问的所有信息以及它可以执行的操作。

要限制 Smash Balloon 访问您的 Instagram 帐户,只需单击任何开关将其从“是”变为“否”。请注意,这可能会影响您可以在WordPress 博客或网站上显示的照片和视频。

考虑到这一点,我们建议启用所有开关。

当您对设置感到满意时,点击“完成”。

如何使用 Smash Balloon 更改 Instagram 許可權

您現在會看到一個彈出視窗,其中包含您剛剛添加到網站的 Instagram 帳戶。

只需選中該帳戶旁邊的框,然後按下“添加”。

選擇要添加到您的 WordPress 網站的 Instagram 帳戶

Smash Balloon 現在將帶您返回Instagram Feeds » All Feeds螢幕。

要創建Feed,只需選取您要使用的Instagram帳戶旁邊的複選框即可。 然後,按兩下一步。

如何使用 Smash Balloon 創建 Instagram 提要

該外掛程式現在將創建一個 Instagram 照片提要,您可以將其添加到任何頁面、帖子或小部件就緒區域。

但是,在嵌入 Instagram 提要之前,您可能需要自定義它的外觀並添加任何缺失的資訊。

如何自定義您的 Instagram 照片提要

默認情況下,Smash Balloon 將在其編輯器中打開您的提要,供您自定義。

在右側,您會看到 Instagram 照片源的預覽。 左側是您可以用來自定義照片源的所有設置。

粉碎氣球 instagram 編輯器

大多數這些設置都是不言自明的,但我們將很快介紹一些關鍵領域。

首先,您可以更改 Instagram 照片佈局並通過從左側功能表中選擇「動態佈局」來添加填充。

當您進行更改時,預覽會自動更新,因此您可以嘗試不同的設置以查看最佳效果。

在 WordPress 中更改 Instagram 提要的佈局

默認情況下,無論使用者是在台式電腦還是在行動裝置上,Smash Balloon都顯示相同數量的照片。

你可以通過右上角的一排按鈕來預覽Instagram feed在台式電腦、平板電腦和智慧手機上的效果。

image 27

智慧手機和平板電腦的螢幕通常較小,處理能力較弱,因此你可能希望在行動裝置上顯示較少的Instagram照片和視頻。

要做到這一點,只需在 「帖子數量 」下的 「移動 」字段中鍵入一個不同的數位。

image 28

通過為智慧手機、平板電腦和台式電腦創建不同的佈局,你可以確保無論訪客使用什麼設備,飼料看起來都很棒。

默認情況下,與台式電腦相比,該外掛程式在智慧手機和平板電腦上顯示較少的欄目。 這有助於你的照片和視頻在小螢幕上舒適地顯示。

要更改這些預設設置,只需在「列」設置中鍵入新數位即可。

在台式機、智慧手機和平板電腦上顯示不同數量的 Instagram 專欄

進行更改後,按兩下自定義連結。

這會將您帶回到 Smash Balloon 主編輯器,準備好探索下一個設置螢幕,即「配色方案」。

粉碎氣球的配色方案設置

默認情況下,Smash Balloon 使用從您的WordPress 主題繼承的配色方案,但它也有您可能想要使用的「淺色」和「深色」主題。

另一種選擇是通過選擇「自定義」來創建您自己的配色方案。 完成後,只需使用控件更改背景顏色、更改 WordPress 中的文字顏色等。

使用 Smash Balloon 更改 Instagram 欄方案

默認情況下,Smash Balloon 會在 Instagram 提要中添加一個標題,這是您的個人資料圖片和頁面名稱。 要更改此部分的外觀,請按下左側功能表中的「頁眉」。

在此螢幕上,您可以更改標題的大小、添加新顏色或顯示您的 Instagram 簡介。

image 29

有時,您可能想要顯示不同的個人資料圖片。 例如,您的 Instagram 頭像可能無法從您的主題中脫穎而出,因此您想顯示自定義徽標。

要更改個人資料圖片,請按兩下顯示自定義頭像「下的」添加圖片」。。 然後您可以從 WordPress 媒體庫中選擇一張圖片或上傳一張新照片。

將自定義頭像添加到 WordPress 中嵌入的 Instagram

您還可以添加不同的簡歷。 例如,您可以鼓勵人們訪問您在 Instagram 上的個人資料或關注您的帳戶。

要創建獨特的 Instagram 簡介,只需在“添加自定義簡介”框中輸入內容即可。

將自定義 Instagram 簡介添加到您的 WordPress 網站

Smash Balloon 會自動分析您的 Instagram 照片並以最佳解析度顯示它們。 我們建議使用這些預設設置,但您可以根據需要放大或縮小 Instagram 圖片。

要更改圖像大小,請按兩下左側選單中的「帖子」。 然後,選擇「圖像和視頻」 選項。

更改嵌入的 Instagram 照片和影片的解析度

您現在可以使用出現的下拉功能表在縮圖、中型和全尺寸圖像之間進行選擇。

如果您對提要的外觀不滿意,可以隨時返回此螢幕並從下拉清單中選擇“自動檢測(推薦)”。

image 30

默認情況下,Smash Balloon 會在您的 Instagram 動態底部添加一個“載入更多”按鈕,以便訪問者可以滾動瀏覽您的照片和視頻。

您可以通過選擇「載入更多按鈕」 來更改此按鈕的外觀。

image 31

在這裡,您可以通過更改背景顏色、文本顏色和懸停狀態來説明“載入更多”按鈕脫穎而出。

您還可以嘗試通過在「文字」 字段中鍵入來向按鈕添加您自己的消息。 這樣您的訪問者將更傾向於點擊。

將自訂消息添加到「載入更多」 按鈕

雖然我們建議啟用此按鈕,但您可以將其刪除。 例如,您可以通過限制人們可以在您的網站上看到的照片數量來鼓勵人們訪問您的 Instagram。

要删除该按钮,只需将“启用”滑块切换为灰色即可。

如何轻松地将 Instagram 嵌入 WordPress

如果访问者喜欢他们所看到的内容,他们可能会决定使用嵌入提要下方显示的“在 Instagram 上关注”按钮进行订阅。

由于它是一个如此重要的按钮,您可能希望添加一些自定义样式以帮助它脱颖而出。

您可以通过选择左侧菜单中的“关注按钮”来执行此操作。在这里,您可以更改按钮的背景颜色、悬停状态和文本颜色。

自定義社交媒體關注按鈕

默認情況下,該按鈕顯示“在 Instagram 上關注”標籤。

您可以通過在「文字」字段中輸入您自己的號召性用語來替換它。

image 32

當您對 Instagram 提要的外觀感到滿意時,請不要忘記按下“保存”以存儲您的更改。

您現在已準備好將 Instagram 提要添加到您的 WordPress 網站。

如何在 WordPress 中嵌入 Instagram Feed

您可以使用塊、小部件或短代碼將 Instagram 提要添加到您的網站。

如果您使用 Smash Balloon Social Photo feed 創建了多個 feed,那麼如果您要使用小部件或塊,則需要知道 feed 的代碼。

要獲得這段代碼,請進入Instagram Feed “所有Feeds”,然後查看短代碼的feed=“”部分。 你需要把這個代碼添加到塊或小工具中,所以要記下它。

在下面的圖片中,我們需要使用feed=“1”

image 33

如果你想在一個頁面或帖子中嵌入Instagram feed,那麼我們建議使用Instagram Feed塊。

注意:如果你使用的是支援區塊的主題,你可以按照下面的說明,使用全站編輯器在網站的任何地方添加區塊。

只要打開你想嵌入你的Instagram照片和視頻的頁面或帖子。 然後,點擊『+』圖示,添加一個新的區塊,開始輸入『Instagram Feed』。

當右邊的塊出現時,點擊將其添加到頁面或帖子中。

image 34

默認情況下,該塊將顯示您的 Smash Balloon 提要之一。 如果您想改為顯示不同的 Instagram 提要,請在右側功能表中找到“簡碼設置”。

在這裡,只需添加代碼,然後按兩下應用更改。 feed=""

將 Instagram 提要代碼添加到 WordPress

該區塊現在將顯示您 Instagram 帳戶中的照片和視頻。 只需發佈或更新頁面即可使提要在您的網站上生效。

如果您使用的主題不使用全網站編輯,您可以將 Smashballoon Instagram Feed 添加到任何小部件就緒區域,例如側邊欄或類似部分,以便訪問者可以在他們訪問您網站的任何地方看到它。

只需轉到WordPress 儀錶板中的外觀 » 小部件,然後按兩下藍色的“+”按鈕。

將 Instagram 提要添加到 WordPress 小部件

在搜索欄中,輸入「Instagram Feed」,然後在出現時選擇正確的小部件。

WordPress 有一個內置的“Instagram Feed”塊,因此請確保選擇顯示官方 Instagram 徽標的塊。

如何將 Instagram Feed 添加到小部件就緒區域

之後,只需將小部件拖動到您想要顯示 Instagram 提要的區域,例如側邊欄或類似部分。

該小部件將自動顯示您使用 Smash Balloon 建立的其中一個提要。 如果您想顯示不同的 Instagram 提要,只需將提要的簡碼輸入「簡碼設置」框即可。

只要您將簡碼添加到「簡碼設置」框中,就不需要在其兩邊加上方括號。

之後,點擊“應用更改”。

將 Instagram Feed 塊添加到側邊欄或其他小部件就緒區域

您現在可以通過按兩下更新按鈕使小部件生效。

另一種選擇是使用短代碼將 Instagram 提要嵌入任何頁面、帖子或小部件就緒區域。

只需轉到Instagram Feed »All Feeds並複製“簡碼”列中的代碼。 您現在可以將此代碼添加到任何簡碼塊中。

最後,如果您有啟用塊主題,則可以使用全站編輯器在您網站的任何位置添加 Instagram Feed 塊。

在 WordPress 儀錶板中,只需轉到外觀 » 編輯器

開啟全站編輯器 (FSE)

默認情況下,全網站編輯器將顯示主題的主頁範本。 如果您想將 Instagram 提要添加到其他範本,請按兩下「主頁」旁邊的箭頭。

然後您可以從下拉清單中選擇任何設計,例如頁腳範本。

在 WordPress FSE(全網站編輯器)中選擇範本

如果您沒有在清單中看到該範本,請按下「流覽所有範本」。。

全網站編輯器現在將顯示您可以編輯的所有範本的清單。 只需按下要顯示 Instagram 提要的範本。

image 35

選擇範本後,只需將滑鼠懸停在要添加 Instagram 照片源的區域上即可。

然後,按兩下藍色的“+”按鈕。

image 36

之後,開始輸入“Instagram Feed”。

當出現正確的塊時,按兩下以將其添加到範本中。 這將是帶有官方 Instagram 徽標的那個。

image 37

與往常一樣,如果您不添加特定的簡碼,Smash Balloon 將默認顯示提要。 您可以按照上述相同過程添加短代碼來更改此提要。

關於在 WordPress 中嵌入 Instagram 的常見問題解答

Smash Balloon讓你很容易在你的網站上顯示Instagram的照片和視頻。 既然如此,這裡有一些關於在WordPress中添加Instagram feed的最常見的問題。

我如何創建一個Instagram商業帳戶?

Smash Balloon Social Photo Feed可以顯示來自個人或企業Instagram帳戶的照片。

然而,Smash Balloon不能自動從個人Instagram帳戶獲取Instagram頭像和簡歷。 考慮到這一點,你可能想檢查一下你是有個人帳戶還是企業帳戶,然後切換到企業帳戶,這樣Smash Balloon就能自動獲取你的頭像和簡歷。

要檢查,只需訪問你的Instagram帳戶並點擊側面功能表中的三條線圖示。

image 38

之後,選擇『設置』。

如果您沒有企業帳戶,則此螢幕將在左側功能表中顯示「切換到專業帳戶」。。

image 39

如果您目前擁有個人帳戶並想切換到企業帳戶,那麼只需點擊此連結即可。

如何將 Facebook 頁面關聯到 Instagram 帳戶?

在將 Instagram 提要添加到 WordPress 之前,您需要將 Instagram 帳戶連接到 Facebook 頁面。

為此,請轉到您要使用的 Facebook 頁面,然後按下左側功能表中的「設置」。

之後,點擊「關聯帳戶」。 您現在可以選擇「Instagram」 並按兩下「連接」 按鈕。

image 40

Facebook 現在將顯示它可以訪問的所有資訊,以及它可以在 Instagram 上執行的操作。

如果您願意繼續,請按兩下「連接」 按鈕。

授予 Smash Balloon 訪問您的 Instagram 帳戶的許可權

請注意,管理您的 Facebook 頁面的任何其他人都可以看到您的 Instagram 消息並進行回復。 如果您想將您的 Instagram 消息保密,請按下以禁用該選項。

當您滿意並準備好繼續前進時,請點擊“確認”。

如何使用 Smash Balloon 配置您的 Instagram 許可權

這將打開一個彈出視窗,您可以在其中輸入您的 Instagram 使用者名和密碼。

之後,繼續並按兩下登錄。

登錄您的 Instagram 帳戶

片刻之後,您會看到一條消息,說明您的 Instagram 和 Facebook 帳戶現已連接。

分享你的喜愛

發佈留言

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