README

Craft CMS 的 Instagram API 集成，允许您使用 Instagram Basic Display API 和 Meta 的 OAuth 2 在您的网站上显示您的 Instagram 个人资料中的媒体。

特性

• Craft 5 支持！
• 使用 Meta 的 OAuth 2 验证 Instagram Basic Display API
• 获取 Instagram 媒体和资料数据
• Twig、JavaScript 和 PHP API
• 完全缓存支持，带有预热/清除控制
• 支持 Cron 作业刷新访问令牌
• 从控制面板或 CLI 手动刷新令牌

要求

此插件需要 Craft CMS 5.0.0 或更高版本，以及 PHP 8.2 或更高版本。

安装

您可以从插件商店或使用 Composer 安装此插件。

从插件商店

转到项目控制面板中的插件商店，搜索“Instagram API”，然后点击“安装”。

使用 Composer

打开您的终端并运行以下命令

# go to the project directory
cd /path/to/my-project.test

# tell Composer to load the plugin
composer require bubalubs/craft-instagram-api

# tell Craft to install the plugin
./craft plugin/install craft-instagram-api

设置

步骤 1

首先您需要创建一个 Instagram 应用。您可以通过访问 Facebook 开发者页面来完成此操作。在创建应用时选择使用案例 其他，然后 消费者，然后您将能够设置 Instagram Basic Display。

将您的 Instagram 账户添加到您的 Instagram 应用设置的 App 角色 -> 角色 中。

注意：您可以在以下位置找到您的 App ID、App 密钥和有效的 OAuth 重定向 URI： Facebook 开发者 -> 应用设置 -> 产品 -> Instagram Basic Display -> Basic Display

步骤 2

将来自插件设置的 URI 添加到您的 Instagram 应用设置的“有效的 OAuth 重定向 URI”字段中。

注意：如果您处于开发环境，请记住将您的实时域名也添加到“有效的 OAuth 重定向 URI”字段中。

步骤 3

在插件设置中填写您的 Instagram 应用 ID 和 Instagram 应用密钥。

步骤 4

保存您的 Instagram 应用 ID 和密钥后，您需要通过 Instagram 进行验证以获取访问令牌。在插件设置中点击按钮以启动与 Instagram 的授权流程。

用法

JavaScript API 示例

获取 Instagram 媒体

端点： /actions/instagram-api/api/media

fetch('/actions/instagram-api/api/media')
  .then(response => response.json())
  .then(data => {
      console.log(data);
  });

获取 Instagram 个人资料

端点： /actions/instagram-api/api/profile

fetch('/actions/instagram-api/api/profile')
  .then(response => response.json())
  .then(data => {
      console.log(data);
  });

Twig 示例

遍历 Instagram 媒体

{% set instagramMedia = craft.instagram.getMedia() %}

{% if instagramMedia|length %}
    <div class="grid grid-cols-4 gap-4">
        {% for media in instagramMedia %}
            <div>
                <a href="{{ media.permalink }}" title="View on Instagram" target="_blank">
                    <img src="{{ media.media_url }}" alt="{{ media.caption }}" />
                </a>
            </div>
        {% endfor %}
    </div>
{% endif %}

获取资料数据

{% set instagramProfile = craft.instagram.getProfile() %}

{% if instagramProfile %}
  <h2>Instagram Profile</h2>

  <p>
      <strong>ID:</strong> {{ instagramProfile.id }}<br>
      <strong>Username:</strong> {{ instagramProfile.username }}<br>
      <strong>Account Type:</strong> {{ instagramProfile.account_type }}<br>
      <strong>Media Count:</strong> {{ instagramProfile.media_count }}<br>
  </p>
{% endif %}

PHP 示例

遍历 Instagram 媒体并本地保存

use bubalubs\instagramapi\InstagramAPI;

// ...

$instagramMedia = InstagramAPI::getInstance()->instagram->getMedia();

foreach ($instagramMedia as $media) {
    $mediaUrl = $media['media_url'];
    $file = file_get_contents($mediaUrl);

    // Strip query string from filename
    $newFilename = pathinfo(explode('?', $mediaUrl)[0], PATHINFO_BASENAME);
    
    // Check if directory exists
    if (!file_exists(Craft::$app->path->getStoragePath() . '/instagram')) {
        mkdir(Craft::$app->path->getStoragePath() . '/instagram', 0775, true);
    }

    // Save file locally
    file_put_contents(Craft::$app->path->getStoragePath() . '/instagram/' . $newFilename, $file);
}

获取资料数据

use bubalubs\instagramapi\InstagramAPI;

// ...

$instagramProfile = InstagramAPI::getInstance()->instagram->getProfile();

CLI 命令

刷新访问令牌

./craft instagram-api/refresh-token