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

Question

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

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

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

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

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

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

Answer 1

您可以在 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.

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

How to customize / automate embedded Instagram on website?

javascript

html

instagram

instagram-api

squarespace