在网站 HTML 上嵌入 Instagram 提要

如果你正在构建一个网站，想要让它更有吸引力并展示更多的内容，嵌入 Instagram 提要是一个绝佳的办法。这可以让你在网站上展示你的 Instagram 帐户上的照片和视频，并且可以让访问者更好地了解你的品牌或个人。

前置条件

在开始之前，你需要确保以下几点:

1. 有一个 Instagram 帐户。
2. 已经使用有效的帐户凭证创建了一个 Instagram 开发者帐户。
3. 确保你有访问你的网站的 HTML 代码的权力。

步骤

步骤1：创建一个 Instagram developper 应用程式

首先，打开 Instagram Developer 网站，登录你的 Instagram 帐户，然后创建一个开发者应用程式。其内部会使你获取一个客戶 ID 和密钥。

步骤2：生成一个 Access Token

接下来，你需要在你的 Instagram 帐户中生成一个 Access Token，该 Access Token 将授权你的网站访问你的 Instagram 帐户。

你可以使用 Postman、CURL 或直接在浏览器中请求的方式，发起一个 HTTP(s) 请求，获取 Access Token。请求方式麻烦，开发者从这里可以学习 Python requests 库 的用法。请求 API 的 endpoint 应该为 https://api.instagram.com/oauth/access_token。你需要使用你的客戶 ID，密钥和重定向 URI 构造 GET 请求。该 URI 的示例如下：https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token。

步骤3：嵌入 Instagram 提要

在 HTML 文件中嵌入 Instagram 提要，实际上就是使用 JavaScript SDK 从 Instagram API 中请求数据，并将它展示在你的网站上。以下是一个示例代码片段：

<!-- 添加 Instagram 提要的 div 元素 -->
<div id="instafeed"></div>

<!-- 引入 jQuery 和 Instagram API SDK -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/stevenschobert/instafeed.js/instafeed.min.js"></script>

<!-- 在你的网站中添加以下 JavaScript 代码，用于请求数据和在网站上展示 Instagram 提要 -->
<script type="text/javascript">
  var feed = new Instafeed({
    accessToken: 'YOUR-ACCESS-TOKEN',
    limit: 10,
    resolution: 'standard_resolution',
    template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>',
    get: 'user',
    userId: YOUR-USER-ID,
    clientId: 'YOUR-CLIENT-ID'
  });
  feed.run();
</script>

在上面的代码片段中，你需要将 YOUR-ACCESS-TOKEN、YOUR-USER-ID、YOUR-CLIENT-ID 替换成你的 Instagram 帐户相关信息。另外，你还可以配置显示的图片数量、分辨率以及模板等。

结论

现在你已经学会了在网站 HTML 上嵌入 Instagram 提要的基本步骤。通过适当调整代码，你可以创建一个具有视觉吸引力的 Instagram 提要，并展示你帐户中的最佳照片和视频。