如何在您的網站上顯示來自 Instagram 的照片

交互式小部件提供了一種在 WordPress 網站上實時顯示真實 Instagram 照片的簡單方法。 我們會告訴你怎麼做。

您有一個包含大量信息和圖片的Instagram 個人資料。 您希望您的網站訪問者看到這一點。 這是相當真實的。 在這種情況下，Instagram 插件小部件將為您提供幫助。

此小部件支持的照片顯示方式有兩種。 第一種方法是顯示帶有特定標籤的照片。 第二個是選擇我的照片選項，從而您可以從您的帳戶中提取照片。

由於來自其他帳戶的照片的顯示受到 Instagram 政策的限制，我們將告訴您如何獲得在 Instagram 上顯示圖像的權限。 為了訪問您的照片並確認您是帳戶的所有者並確認使用照片以及網站上所有內容的權限，首先，您需要設置Instagram 訪問令牌。

什麼是 Instagram 訪問令牌以及如何顯示來自 Instagram 的照片？

Instagram 訪問令牌是您帳戶獨有的一組字符，允許其他應用程序訪問您的 Instagram 供稿。 如果您沒有令牌，您的網站將無法連接到 Instagram 服務器。 該令牌為網站提供了一種安全的方式來請求 Instagram 訪問您的個人資料並顯示其圖像的權限。

而且，如果您想在 Shopify 商店中展示可購買的Instagram 畫廊，您只需安裝 Growave 的應用程序並連接您的企業 Facebook 帳戶即可。

如何獲取我的 Instagram 訪問令牌？

為了讓您成功獲得Instagram 訪問令牌，請按照此分步指南進行操作，您一定會學習如何輕鬆顯示來自 Instagram 的照片。

第 1 步。創建 Facebook 應用程序

為此，您需要訪問 developers.facebook.com，選擇My Apps並創建一個應用程序。 在App Dashboard的面板中，選擇Settings > Basic ，滾動到頁面底部，然後單擊Add Platform 。

接下來，選擇網站，輸入您網站的 URL，然後保存更改。 在這裡我們將使用網站，但稍後您將能夠更改平台。

步驟 2. 設置基本 Instagram 視圖

因此，單擊產品，找到Instagram 產品，然後單擊設置添加。

點擊Basic Display ，滾動到頁面底部，然後點擊Create New App 。

如下所述填寫表格。

顯示名稱

輸入您剛剛創建的 Facebook 應用程序的名稱。

OAuth 重定向的有效 URI

輸入您網站的 URL。 此字段用於註冊重定向參數的特殊 URI，但在此示例中，為方便起見，我們將使用您網站的 URL。

例如https://zemez.io/

輸入 URL 後，保存更改並再次檢查。 根據結構，可能會自動將斜杠添加到 URL。 保留完整的 URL：您將需要它來獲取授權代碼和訪問令牌。

取消授權回調 URL

再次輸入您網站的 URL。 然後，您需要將其替換為 URL 以處理取消授權通知。

數據刪除請求回調 URL

再次輸入您網站的 URL。 然後，您需要將其替換為相應的 URL 以處理數據刪除請求。

應用審查

跳過時，我們還不需要它。

步驟 3. 添加 Instagram 測試用戶

選擇角色 > 角色並滾動到Instagram測試人員部分。 單擊添加 Instagram 測試人員，輸入您的 Instagram 用戶名並發送邀請。

打開一個新的瀏覽器窗口，訪問 www.instagram.com 並登錄您受邀的 Instagram 帳戶。 選擇（配置文件圖標）> 編輯配置文件 > 應用程序和站點 > 測試員邀請並接受邀請。

現在，即使在開發模式下，您的 Facebook 應用程序也可以訪問您的 Instagram 帳戶。

步驟 4. 登錄測試用戶以快速顯示來自 Instagram 的照片

構建下面的授權窗口 URL，將 {app-id} 替換為您的 Instagram 應用 ID（從App Dashboard > Products > Instagram > Basic Display > Instagram App ID字段），並將 {redirect-uri} 替換為您在其中提供的網站 URL第 2 步（“有效的 OAuth 重定向 URI”）。 URL 必須完全相同。

打開一個新的瀏覽器窗口並轉到生成的授權窗口 URL。 該頁面應顯示Instagram用戶名、應用程序名稱以及它請求的權限的描述。

授權Instagram 測試用戶（即授予應用程序訪問您的個人資料數據的權限）。 為此，請在授權窗口中登錄您的帳戶，然後單擊授權。 如果成功，頁面會將您重定向到上一步中指定的 URI，並添加授權代碼。

請注意：重定向 URI 的末尾是字符#_，但它們不包含在代碼中。 複製此代碼（不帶字符#_ 部分）：您將在下一步中使用它。

步驟 5. 用代碼交換代幣

打開支持 cURL 請求的命令行工具或應用程序並向 API 發送 POST 請求，如下所示：

curl -X POST \ https://api.instagram.com/oauth/access_token \ -F client_id={app-id} \ -F client_secret={app-secret} \ -F grant_type=authorization_code \ -F redirect_uri={重定向-uri} \ -F 代碼={代碼}

替換您的 Instagram 應用程序的 {app-id} ID，而不是 {app-secret} - Instagram 應用程序的密鑰，而不是 {redirect-uri} - 重定向 URI，以及從我們收到的代碼而不是 {code }。 請注意：重定向 URI 必須與上一步中指定的完全匹配，直到最後的斜線（應用程序面板在設置 Instagram 應用程序時會自動將其添加到 URI）。

如果成功，API 將返回一個 JSON 編碼對象，其中包含一個有效期為一小時的短期 Instagram 用戶訪問令牌，以及您的 Instagram 測試用戶 ID。

步驟 6. 請求用戶節點顯示來自 Instagram 的照片

使用命令行或應用程序，將 cURL 請求發送到如下所示的用戶節點以獲取用戶名和 ID。 將 {user-id} 和 {access-token} 分別替換為上一步獲得的 ID 和訪問令牌。

curl -X GET \'https://graph.instagram.com/{user-id}?fields=id, username&access_token={access-token}'

如果成功，API 將顯示 Instagram 用戶名和 ID。

步驟 7. 將訪問令牌添加到插件設置

導航到 WordPress 儀表板> JetPlugins> JetElements 設置。 轉到集成選項卡，找到 Instagram 部分，然後將您的令牌粘貼到訪問令牌字段中，然後單擊保存按鈕。

完畢！ 現在，您可以返回 Elementor 並使用 Instagram 小部件顯示您帳戶中的照片。 此外，要為您的網站帶來更多功能，請嘗試使用 ZeGuten 插件。