如何在您的网站上显示来自 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 插件。