如何在网站上自定义/自动化嵌入式 Instagram?

How to customize / automate embedded Instagram on website?

我正在为一个朋友编辑一个 Squarespace 网站,他希望他的 Instagram 个人资料显示在其中一个页面上,但他想要的不仅仅是照片,这是 Instagram 目前提供的。

他需要能够显示与每张照片关联的文本,最好是在照片的右侧或下方,带有可点击的 links 到#hashtags 和@friends。如果最简单的设置与实际的 Instagram 网站类似,并在其中添加点赞和评论,那也很棒。

我知道我需要摆脱与 CMS 合并的 SquareSpace "Instagram Block",并添加我自己的代码。我知道您可以直接从 Instagram 的照片页面嵌入代码,但我们需要它是自动化的。

老实说,我对此很陌生,只是在学习 HTML 和 CSS 之外的东西,学习一点 JS,所以我想朝着正确的方向推动以帮助解决这个问题,如果我说得太含糊,肯定会提供更多信息。

我不确定这是否可以通过 Instagram 的 API 或一些 Javascript 或什么来实现?


下面是一个 link 来帮助说明我正在努力实现的目标。同样,如果使用 Instagram 的 "embed" 代码嵌入每张照片更容易,那同样很棒,但我需要确保它是自动化的,这样我们就不必在每次上传时都进入我们的网站一张照片到 Instagram。

您可以在 SquareSpace Javascript 代码块中使用 instagram javascript 客户端——参见 Adding custom HTML, CSS, and JavaScript

然后尝试一些 javascript 客户端——即人们已经编写的代码,您基本上可以 "plug-n-play" 使用和自定义您需要更改到 SquareSpace 代码块中的内容。

据我所知,最受欢迎的 instagram javascript 客户端是 instafeed.js

以下是使用 instafeed.js

获取好友用户 ID 的方式
<script type="text/javascript">
    var userFeed = new Instafeed({
        get: 'user',
        userId: YOUR_USER_ID,
        accessToken: 'YOUR_ACCESS_TOKEN'
    });
    userFeed.run();
</script>

要获取标题,请使用 instafeed.js 文档中所述的 {{caption}} 模板变量。

{{caption}} - Image's caption text. Defaults to empty string if there isn't one.