README

生成包含Instagram API返回对象数据的JSON文件（用于沙盒模式）。还可以将JSON文件上传到AWS S3（可选）。

为什么是沙盒模式？

三分钟理解Instagram API

为了与Instagram API一起工作，迟早你需要找到途径穿过模糊不清的API客户端注册和授权流程。理解API访问限制可以避免很多浪费时间，因为它们通常会导致意外的数据，而不是直接的认证错误，后者更容易诊断。

臭名昭著的2016年6月API限制

2016年6月1日，Instagram对其API的访问进行了重大限制，全球的控制台错误亮了起来。首先，要理解这是Instagram故意做出的商业决策，旨在防止他们的API被用于各种目的。了解这个事实并不能修复控制台中的错误，但如果了解它们的意图，会使这些限制更加直观。

沙盒模式与“实时”模式

开发者与完整API访问之间的守护者是沙盒模式。文档将其描述为开发过程中的临时步骤，但绝大多数项目永远不会离开沙盒模式，因为Instagram只为非常具体的使用案例提供完整的API访问权限

“我的应用允许人们使用Instagram登录并分享他们的内容”
“我的产品帮助品牌和广告商了解、管理他们的受众和媒体权利。”
“我的产品帮助广播和出版商发现内容，获取媒体的数字权利，并与适当的归属共享媒体。”

如果你不能说服Instagram贵族你的应用服务于这些具体目的之一，如果你的应用提交到“上线”，它将会被拒绝。
因此，可能更直观地将其视为“替补模式”。

在沙盒模式下你能做什么？

沙盒中的应用限制为10个用户
数据限制为10个用户以及每个用户的20个最新媒体
减少API 速率限制 500/hour

via @ https://www.instagram.com/developer/sandbox/

因此，我开发了此插件，在预定时间生成在上述条件下从Instagram API返回的数据的JSON文件。我还添加了一个将JSON文件上传到AWS S3的功能。这也是为了性能优化 🎉

要求

PHP 5.5+
Composer

安装

将此存储库克隆到您的 wp-content/plugins 目录中。

$ cd /path-to-your/wp-content/plugins/
$ git clone git@github.com:sectsect/wp-instagram-json.git

安装Composer包

$ cd wp-instagram-json/functions/composer/
$ composer install

通过WordPress的“插件”菜单激活插件。
转到您的wordpress管理面板上的 Instagram。
设置以下值并保存。

缓存过期 (分钟)
数量 (范围: 1-20)
账户名称
访问令牌 ⚠️ 你需要提前获取Instagram API访问令牌。

如果你想将JSON文件上传到AWS S3，也请填写以下项（可选）。

S3上传 (开/关切换)
AWS凭证密钥
AWS凭证密钥
区域
存储桶名称
S3上的路径
自定义URL（CDN）

此外，如果您使用AWS CloudFront失效功能，请填写以下项目（可选）。

CloudFront失效 （开关/关闭）
分发ID

这就对了：ok_hand
在首次网络访问时，将在以下位置生成一个文件。

/wp-content/plugins/wp-instagram-json/json/instagram.json

现在，您可以使用javascript变量 wp_ig_json.json_url 获取URL。
📌 如果启用了S3上传，此URL将自动替换为S3的URL。

保存的对象结构

{  
  "pagination":[  

  ],
  "data":[  
    {  
      "id":"",
      "user":{  
        "id":"",
        "full_name":"",
        "profile_picture":"",
        "username":""
      },
      "images":{  
        "thumbnail":{  
          "width":150,
          "height":150,
          "url":""
        },
        "low_resolution":{  
          "width":320,
          "height":320,
          "url":""
        },
        "standard_resolution":{  
          "width":640,
          "height":640,
          "url":""
        }
      },
      "created_time":"",
      "caption":{  
        "id":"",
        "text":"",
        "created_time":"",
        "from":{  
          "id":"",
          "full_name":"",
          "profile_picture":"",
          "username":""
        }
      },
      "user_has_liked":,
      "likes":{  
        "count":
      },
      "tags":[  

      ],
      "filter":"",
      "comments":{  
        "count":
      },
      "type":"",
      "link":"",
      "location":,
      "attribution":,
      "users_in_photo":[  

      ],
      "carousel_media":[  
        {  
          "images":{  
            "thumbnail":{  
              "width":150,
              "height":150,
              "url":""
            },
            "low_resolution":{  
              "width":320,
              "height":320,
              "url":""
            },
            "standard_resolution":{  
              "width":640,
              "height":640,
              "url":""
            }
          },
          "users_in_photo":[  

          ],
          "type":""
        },
        {  
          "images":{  
            "thumbnail":{  
              "width":150,
              "height":150,
              "url":""
            },
            "low_resolution":{  
              "width":320,
              "height":320,
              "url":""
            },
            "standard_resolution":{  
              "width":640,
              "height":640,
              "url":""
            }
          },
          "users_in_photo":[  

          ],
          "type":"image"
        }
      ]
    },
	{
	  "id":"",
	  ...
    }
  ],
  "meta":{  
    "code":200
  },
  "file_generate_datetime":"2019\/12\/31 00:00:00"
}

开发者注意

此插件在前端不执行任何操作。仅生成JSON文件。
您可以根据需要以任何方式访问生成的JSON文件，并将其输出到前端。
参见使用示例。
WordPress内置的cron在某些特定环境下存在一些问题。
为了避免这些风险，此插件使用周期性处理WordPress 临时而不是WP-Cron。
此插件内部使用AWS SDK for PHP v3。
AWS CloudFront失效功能仅在手动删除缓存时生效。
当缓存过期时，它不起作用。

使用示例

📝 如果您在AWS S3上托管该文件，您还需要在S3上配置CORS(跨源资源共享)。

使用jQuery (ES6)的Ajax

<div id="app">
  <ul id="instagram"></ul>
</div>

jQuery(() => {
  jQuery.ajax({
    url: wp_ig_json.json_url,
    type: "GET",
    dataType: 'json',
    beforeSend() {}
  }).done(res => {
    if (res && res.data) {
      let list = '';
      jQuery.each(res.data, (i, {id, link, images}) => {
        list += `<li data-id="${id}">
                  <a href="${link}" target="_blank">
                    <img src="${images.standard_resolution.url}">
                  </a>
                </li>`;
      });
      jQuery('#instagram').html(list);
    }
  }).fail(() => {
    alert("Load Error. Please Reload...");
  }).always(res => {
    jQuery('#instagram').addClass('ready');
  });
});

使用Vue.js的Ajax

<div id="app" v-cloak>
  <ul id="instagram" :class='{"ready": readyclass !== null}'>
    <li v-for="photo in photos" v-bind:data-id="photo.id">
      <a v-bind:href="photo.link" target="_blank">
        <img v-bind:src="photo.images.standard_resolution.url" />
      </a>
    </li>
  </ul>
</div>

import Vue from 'vue';
import axios from 'axios';

const app = new Vue({
  el: '#app',
  props: {
    'readyclass': null,
  },
  data: {
    photos: [],
    errors: [],
  },
  created() {
    axios.get(wp_ig_json.json_url)
      .then((response) => {
        if (response.status === 200 && response.data.data.length > 0) {
          this.photos = response.data.data;
        }
      })
      .catch((e) => {
        this.errors.push(e);
      });
  },
  updated() {},
});

async / await版本

import Vue from 'vue';
import axios from 'axios';

const app = new Vue({
  el: '#app',
  props: {
    'readyclass': null,
  },
  data: {
    photos: [],
    errors: [],
  },
  async created() {
    try {
      const response = await axios.get(wp_ig_json.json_url);
      if (response.status === 200 && response.data.data.length > 0) {
        this.photos = response.data.data;
      } else {
        console.log('Error!!');
      }
    } catch (e) {
      this.errors.push(e);
    }
  },
  updated() {},
});

AWS S3

IAM策略

在AWS上创建用户，并将策略附加到用户。
以下是需要的最小策略。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject"
            ],
            "Resource": "*"
        }
    ]
}

如果您使用AWS CloudFront失效

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "cloudfront:CreateInvalidation",
                "cloudfront:GetDistribution",
                "cloudfront:GetInvalidation",
                "cloudfront:GetStreamingDistribution",
                "cloudfront:GetDistributionConfig",
                "cloudfront:ListDistributions",
                "cloudfront:ListInvalidations",
                "cloudfront:ListStreamingDistributions"
            ],
            "Resource": "*"
        }
    ]
}

变更日志

参见变更日志文件。

贡献

创建问题并描述您的想法
分支它
创建您的功能分支（git checkout -b my-new-feature）
提交您的更改（git commit -am 'Add some feature'）
发布分支（git push origin my-new-feature）
创建新的Pull Request
获利！✅

许可证

参见许可证文件。

sectsect / wp-instagram-json

维护者

详情