介绍
jquery-instagram 是一个基于 jQuery 的 Instagram API 插件，可以方便地获取和展示 Instagram 用户的照片。
安装
安装 jquery-instagram 可以使用 npm 命令：
npm install jquery-instagram
引入
在 HTML 文件中引入 jQuery 和 jquery-instagram：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="node_modules/jquery-instagram/jquery.instagram.min.js"></script>
API 准备
由于 Instagram API 需要授权才能获取数据，我们需要先去 Instagram Developer 注册开发者账号，并创建应用，获取 client_id 和 access_token。
使用
初始化
在 JavaScript 中初始化插件，传入配置项：
$('.instagram').instagram({
userId: '12345678',
accessToken: 'YOUR_ACCESS_TOKEN',
});其中 userId 是你的 Instagram 用户 ID， accessToken 是你的 access_token。
获取数据
插件提供了多个方法来获取数据，包括用户信息、用户媒体、媒体详情等。这里以获取用户媒体为例：
$('.instagram').instagram({
userId: '12345678',
accessToken: 'YOUR_ACCESS_TOKEN',
}).done(function (photos) {
// 处理 photos 数组
}).fail(function (error) {
console.log(error);
});展示数据
得到数据后，我们可以根据需求进行展示。例如，展示用户最新的 6 张照片：
-- -------------------- ---- -------
---------------------------
------- -----------
------------ --------------------
---------------- -------- -
--- ----- - --
--- ---- - - -- - - ------ ---- -
--- ----- - ----------
---------------------------- ------ - ------------------------------------ - ------
-
---------------- ------- -
-------------------
---指导意义
jquery-instagram 是一个非常方便的工具，可以在网页中轻松展示 Instagram 用户的照片。同时，通过学习这个插件的实现原理，我们也可以深入了解 jQuery 的插件开发和 JavaScript 对 API 的调用方法。
示例代码
HTML:
<div class="instagram"></div>
JavaScript:
-- -------------------- ---- -------
---------------------------
------- -----------
------------ --------------------
---------------- -------- -
--- ----- - --
--- ---- - - -- - - ------ ---- -
--- ----- - ----------
---------------------------- ------ - ------------------------------------ - ------
-
---------------- ------- -
-------------------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36116