vue多图片发布到 Facebook 绑定的 Instagram

前提：可以连外网，可以使用 FB.API

1.授权，获取该 facebook 用户的公共主页的信息

export const initsendfacebook = () => {
  return new Promise((resolve, reject) => {
    FB.getLoginStatus(function (response) {
      if (response.status === "connected") {
        var id = 0;
        var accessToken = response.authResponse.accessToken;
        FB.api("/me", function (response) {
          id = response.id;
          FB.api(
            "/" + id + "/accounts",
            "GET",
            {
              access_token: accessToken,
            },
            function (res) {
              if (res.data == null) {
                reject("您的公共主页未开通或权限未开通,请开通后再尝试");
              }
              if (res.data.length > 0) {
                resolve(res.data);
              }
            }
          );
        });
      } else {
        FB.login(
          function (response) {
            var id = 0;
            if (response.authResponse) {
              FB.api("/me", function (response) {
                id = response.id;
                FB.getLoginStatus(function (response) {
                  if (response.status === "connected") {
                    var accessToken = response.authResponse.accessToken;
                    FB.api(
                      "/" + id + "/accounts",
                      "GET",
                      {
                        access_token: accessToken,
                      },
                      function (res) {
                        if (res.data == null) {
                          reject(
                            "您的公共主页未开通或权限未开通,请开通后再尝试"
                          );
                        }
                        if (res.data.length > 0) {
                          resolve(res.data);
                        }
                      }
                    );
                  }
                });
              });
            } else {
              reject("授权登录失败");
            }
          },
          {
            scope:
              "public_profile,email,pages_show_list,pages_read_engagement,pages_manage_posts,publish_video",
          }
        );
      }
    });
  });
};

返回的格式如下：两个公共主页：一个为“你的公共主页名字 1”，一个为“你的公共主页名字 2”

{
  "data": [
    {
      "access_token": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      "category": "游戏/玩具",
      "category_list": [
        {
          "id": "0000000000000000",
          "name": "游戏/玩具"
        }
      ],
      "name": "你的公共主页名字1",
      "id": "0000000000000000",
      "tasks": [
        "ADVERTISE",
        "ANALYZE",
        "CREATE_CONTENT",
        "MESSAGING",
        "MODERATE",
        "MANAGE"
      ]
    },
    {
      "access_token": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      "category": "商业供应服务",
      "category_list": [
        {
          "id": "0000000000000000",
          "name": "商业供应服务"
        }
      ],
      "name": "你的公共主页名字2",
      "id": "0000000000000000",
      "tasks": [
        "ADVERTISE",
        "ANALYZE",
        "CREATE_CONTENT",
        "MESSAGING",
        "MODERATE",
        "MANAGE"
      ]
    }
  ],
  "paging": {
    "cursors": {
      "before": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      "after": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    }
  }
}

2.保存，选择你要发布的 facebook 公共主页，如果你选择的是“你的公共主页名字 1”的公共主页，那么就把该公共主页的 id 和 access_token 保存下来。这里，我把这两个记录为 FacebookHomPageID 和 FacebookHomPageaccess_token

3.获取 Facebook 绑定的 Instagram 主页的 ID,记录为：InstagramHomePageID

export const getinscountid = (
  FacebookHomPageID,
  FacebookHomPageaccess_token
) => {
  return new Promise((resolve, reject) => {
    FB.api(
      "/" + FacebookHomPageID + "?fields=instagram_business_account",
      "GET",
      {
        access_token: FacebookHomPageaccess_token,
      },
      function (response) {
        if (response.instagram_business_account) {
          // InstagramHomePageID
          resolve(response.instagram_business_account.id);
        } else {
          reject("该公共主页没有绑定ins");
        }
      }
    );
  });
};

4.上传图片,返回结果为图片的 ID，分为几个部分

1.首先要判断图片是否符合发布到 Instagram 的规范，如长宽比要大于 0.6 小于 1.91(具体不太清楚多大，但差不多)

// 筛选符合要求的图片url
function filterimage(imgurl) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = imgurl;
    // 设置加载完成后的回调函数
    img.onload = function () {
      let bil = this.width / this.height;
      if (bil >= 0.6 && bil <= 1.91) {
        resolve(imgurl);
      } else {
        resolve(false);
      }
    };
    img.onerror = function () {
      resolve(false);
    };
  });
}
// oldimgarr：为需要过滤的图片数组
export const panduantupianshifoufuhe = (oldimgarr) => {
  return new Promise(async (resolve) => {
    let newimgarr = [];
    for (let index = 0; index < oldimgarr.length; index++) {
      let url = await filterimage(oldimgarr[index]);
      if (url) {
        newimgarr.push(url);
      }
    }
    // 返回符合要求的图片URL数组
    resolve(newimgarr);
  });
};

2.上传图片到 Instagram

// imageurl：图片URL,图片的地址如：https://www.xxxx.com/xxxx.png
export const uploadInsimage = (
  InstagramHomePageID,
  imageurl,
  FacebookHomPageaccess_token
) => {
  return new Promise(function (resolve) {
    FB.api(
      "/" + InstagramHomePageID + "/media",
      "POST",
      {
        access_token: FacebookHomPageaccess_token,
        image_url: imageurl,
        is_carousel_item: true, // 是否为多图（这里是告诉Instagram我要发多图）
      },
      function (response) {
        if (response.id) {
          // 返回结果为图片的iD
          resolve(response.id);
        } else {
          resolve(false);
        }
      }
    );
  });
};

5.创建轮播容器

/* 
caption:发布帖子的标题，自定义的
imgidlist：图片ID的数组 [id,id,id....],id为第三步中返回的图片的 ID
 */
FB.api(
  "/" + InstagramHomePageID + "/media",
  "POST",
  {
    access_token: FacebookHomPageaccess_token,
    caption: caption,
    media_type: "CAROUSEL",
    children: imgidlist,
  },
  function (response) {
    if (response.id) {
      //创建轮播容器成功
      // 返回response.id为创建轮播容器id
    } else {
      reject("创建轮播容器失败");
    }
  }
);

6.发布轮播容器

/*
imgidlist：一个对象数组[{ media_fbid: id },{ media_fbid: id },{ media_fbid: id }...],其中id就是第三步中返回的图片ID
 */

FB.api(
  "/" + InstagramHomePageID + "/media_publish",
  "POST",
  {
    access_token: FacebookHomPageaccess_token,
    creation_id: "创建轮播容器id",
  },
  function () {
    console.log("发布成功", true);
  }
);