README

通过Instagram Basic Display API获取Instagram内容

要求

此插件需要Craft CMS 4.0.0或更高版本。

安装

要安装插件，请按照以下说明操作。

打开您的终端并进入您的Craft项目
```
 cd /path/to/project
```
然后告诉Composer加载插件
```
 composer require jsmrtn/craftagram
```
在控制面板中，转到设置→插件，并单击craftagram的“安装”按钮。

设置您的Facebook应用

⚠️ 注意第6步 - 您有效的OAuth重定向URI 必须是基础站点的URL，不要尝试使用单个多站点URL。基础站点URL将被附加一个状态参数，以确保Instagram的响应针对正确的站点

登录到https://developers.facebook.com，然后在“所有应用”中单击“创建应用”。
当询问“您想要您的应用做什么？”时，单击“其他”。
选择“消费者”应用类型。
添加合适的应用名称和联系邮箱（您可以忽略添加商业组合）。
您将被重定向到新应用，从仪表板找到Instagram Basic Display产品，并单击“设置”将其添加到您的应用。
一旦重定向，单击“创建新应用”，并为您喜欢的应用命名。
在出现应用页面时，使用以下信息完成每个部分
- 有效的OAuth重定向URI 输入您的 主站点基础URL，后跟 /actions/craftagram/default/auth（例如，https://www.yourwebsite.com/actions/craftagram/default/auth）。
- 注销回调URL 和 数据删除请求回调URL 使用上述相同的URL。
- 保存更改
向下滚动到Instagram测试者部分。单击“添加Instagram测试者”。
单击“添加人员”，选择“Instagram测试者”，然后搜索您要连接的instagram账户，然后单击“添加”。
打开新的网络浏览器并转到www.instagram.com，并登录您刚刚邀请的Instagram账户。单击“更多”>“设置”>“网站权限”>“应用和网站”>“测试者邀请”并接受邀请。

就这样！现在您不需要进行任何额外的设置。您需要做的是转到产品>Instagram>基本显示，然后向下滚动到Instagram应用ID和Instagram应用密钥，因为您需要在下一步中添加这些。

配置craftagram

转到craftagram的设置页面，并将上一步中的App ID和App Secret输入到相应的框中，然后单击“保存”。当页面刷新时，您会看到一个新按钮授权Craft。单击该按钮转到instagram完成授权程序。

提示：App ID和App Secret设置可以设置为环境变量。请参阅Craft文档中的环境配置以了解更多信息。

Instagram可能会要求您进行登录，请处理该登录，然后单击“授权”。您将被重定向回Craft，Long Access Token字段将被填充。

⚠️ 在尝试进行身份验证之前，请检查您是否已登录到正确的账户（或者完全不要登录）。如果您在当前浏览器会话中使用不同的用户登录，您可能会遇到问题。

保持令牌活跃

Instagram的令牌在60天后过期，因此您需要设置一个cron作业来保持令牌活跃。刷新操作是actions/craftagram/default/refresh-token。

例如，这将每月刷新一次所有启用了令牌的网站的令牌

0 0 1 * * /usr/bin/wget -q https://www.yourwebsite.com/actions/craftagram/default/refresh-token >/dev/null 2>&1

如果您只想更新单个网站，可以添加可选的siteId参数

0 0 1 * * /usr/bin/wget -q https://www.yourwebsite.com/actions/craftagram/default/refresh-token?siteId=<your siteId> >/dev/null 2>&1

如果您未能设置cron，您仍然可以通过转到设置页面，点击授权Craft并遵循上述步骤手动刷新令牌。

⚠️ 您无法刷新私有Instagram账户的访问令牌，因此请确保在测试邀请中使用的账户是公开的

使用craftagram

使用该插件非常简单

{% set craftagram = craft.craftagram.getInstagramFeed() %}

{% if craftagram|length %}
    {% for item in craftagram.data %}
        <img src={{item.media_url}} />
    {% endfor %}
{% endif %}

变量有两个可用参数，limit和siteId。Instagram的默认限制是25。

{% set craftagram = craft.craftagram.getInstagramFeed(25, currentSite.id) %}

您获得的是API端点提供的所有选项的所有选项。为了简洁起见，它们是

分页

如果您对您的信息流有限制，可以通过传递after（如果您正在向后分页，则使用before）参数并初始化一个AJAX函数来返回数据。

请记住传递limit，并且如果适当，传递活动网站的正确siteId。

例如，您可以通过这样做来实现“加载更多”按钮

{% set craftagram = craft.craftagram.getInstagramFeed(10) %}

{% if craftagram|length %}
    <div data-js="insta-wrapper">
        {% for item in craftagram.data %}
            <img src={{item.media_url}} />
        {% endfor %}
    </div>

    <a data-after="{{ craftagram.paging.cursors.after }}" data-js="load-more">Load more</a>
{% endif %}

{% js %}
    $("[data-js=load-more]").click(function(e) {
        e.preventDefault();
        $.get("{{ parseEnv(craft.app.sites.primarySite.baseUrl) }}/actions/craftagram/default/get-next-page?siteId={{ currentSite.id }}&limit=10&url=" + $(this).data('after'), function(res) {
            data = $.parseJSON(res);

            // For each, append the item to our wrapper
            $.each(data["data"], function() {
                $("[data-js='insta-wrapper']").append("<img src="+$(this)[0]["media_url"]+" />");
            });

            // Update the paging with the next after.
            $("[data-js=load-more]").data("after", data["paging"]["cursors"]["after"]);
        });
    });
{% endjs %}

无头模式

如果您正在使用Craft无头（或通常只需要JSON格式的结果），您可以通过/actions/craftagram/default/api（如果您想节省一些字节，则可以使用/craftagramApi）访问Instagram信息流，这将返回Instagram的原始JSON数据。您可以传递以下参数

安全性

有一个设置可以启用更安全的API端点。如果您将其打开，则必须传递一个Basic Auth标头才能访问此端点，否则您将收到一个错误。用户名和密码应为一个已激活的Craft用户。请注意您必须为每个网站单独启用安全端点。

速率限制

请注意，您可能会受到Instagram的速率限制，因此如果您在一个流量高的网站上，您可能会受到速率限制。您可以在Instagram的文档中了解更多关于速率限制的信息。

媒体大小

API返回的图像大小是不可变的–曾经您可以使用像large这样的修饰符来获取特定大小的图像，但现在不再是这样了。您需要使用一个支持从远程URL转换图像的插件来调整Instagram返回的图像的大小。

scaramangagency / craftagram

维护者

详情