vue2分享到Facebook个人主页和公共主页

前端小白，分享经验为辅，做记录为主。

1：前言

现在我所在的公司为一家做外贸的公司，于是对国外的软件需要一些了解，而且做外贸，所以要将商品推广到国外宣传，所以就将Facebook作为一个用于宣传商品的平台，而且Facebook用户是真的多啊。

2：准备

首先根据Facebook开发文档一步一步来，下面为官方文档，根据提示一步一步来，看不懂就用Google浏览器，直接翻译一下就可。

https://developers.facebook.com/docs/development

注意事项：

（1）电脑要能翻墙，并且有Facebook账户 （2）在我的应用中，在产品那一栏有Facebook登录，点击设置，打开使用 JavaScript SDK 登录，这些创建应用的具体配置可以在官方文档上查看 （3）我现在还是在测试阶段，所以如果别人想在你的网站上发布东西到Facebook公共主页，别人就要注册成功开发者，然后你还要拉ta进你的应用当测试者，这样才能使用 （4）有些接口是必须放到服务器上才能调用的，具体看你在哪里碰到，Facebook会提示 （5）不能在短时间内发布多个帖子，且帖子直接图片尽量不要重复，重复可能发布不了那个重复的图片

接入Facebook，这里就放在你所需要的vue文件里面，这一步是基础性工作，

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<script>
  window.fbAsyncInit = function() {
    // 上面和这里就相当于跟Facebook建立链接一样，这里建立了链接才能发送Facebook
    // 注意：这里建立链接的前提条件是需要你的电脑能访问外网
    FB.init({
      appId            : 'xxxxxxxxxx',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v18.0'
    });
  };
</script>

3：Facebook分享到个人主页

3-1：不带图片

3-1-1：调官网接口

直接接入Facebook的api接口就可，根据官网上讲解

shareToFB() {
FB.ui({
method: 'share',
href: 'https://example.com/',
}, function(response){});
}

3-1-2：直接用链接

直接将内容和链接传入http://www.facebook.com/sharer.php?u=，如果只想传内容，只要调这个就行，其他上面的内容都可以不看，都不会用到。

window.open(
            "http://www.facebook.com/sharer.php?u=" +
              encodeURIComponent(url),
            "_blank",
            "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350"
);

3-2：带图片

3-2-1：用静态HTML页面“欺骗”Facebook爬虫

由于我的项目是由vue创建的，所以在进行分享Facebook和Twitter时，它们获取不到我的图谱元素，所以，我就要求后端给我返回一个静态HTML页面，其中的head元素包含了标题，描述，还有图片，链接等，在js代码中就写一个跳转到我们公司的详情页面函数，其中有一定时间延迟，但不会影响使用，这样Facebook爬虫就是能读到我们的图片等元素，但是却会跳转到我们的商品详情页面。

// 发送到个人主页
facebookgerenzhuye(data){
      let imgcover = data.cover // 封面
      let title = data.name // 标题
      let description = data.brief // 简介描述
      let goodsid = data.id // 商品的ID,后面可用来进行拼接地址来访问商品详情信息
      // share_goods_html这个接口具体功能为将我传入的值传到后端，然后让后端通过这些值返回我个静态的HTML页面，这样facebook就能抓取到我的图谱信息，而这个HTML页面的js代码就执行跳转到商品详情页即可
      share_goods_html({
        image:imgcover,
        title:title,
        goods_id:goodsid,
        url:"https://www.xxxxx.com/detail/"+goodsid,
        description:description,
      }).then((res)=>{
        // 返回静态页面成功，就将这个静态页面的链接放入至Facebook接口中，Facebook就能读取到图谱元素了
        function popupwindow(url) {
          return window.open(
            "http://www.facebook.com/sharer.php?u=" +
              encodeURIComponent(url),
            "_blank",
            "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350"
          );
        }
        popupwindow(res.data);
      })
    },

3-2-1：服务器优化

这个正在弄，还没弄好。。。。

4：Facebook分享到公共主页

这个部分，需要自己摸索一下，可以在postman上试试接口啥的，在Facebook上有个工具可以获取权限的，可以试试那个。

我这次就把全部代码放下面了。注意区分，公共主页分享可能有些不够详细，但是应该花点时间，结合官网的文档就能理解，个人感觉，Twitter的文档比Facebook要难

html部分

<template>
  <div id="listTable">
    <el-button
      type="success"
      icon="el-icon-s-promotion"
      size="mini"
      @click="copyfacebook(scope.row)"
    >复制至Facebook公共主页</el-button>
    <el-button
      type="success"
      icon="el-icon-s-promotion"
      size="mini"
      @click="copyfacebookgerenzhuye(scope.row)"
    >复制至Facebook个人主页</el-button>
    <!-- 发布至第几个公共主页 -->
    <el-dialog title="提示" :visible.sync="openAssembleVisible789" :before-close="handleClose" width="30%">
      <div>一次只能发布到1个Facebook公共主页。</div>
      <div style="margin-top: 10px">请选择你要发布的Facebook公共主页：</div>
      <el-radio-group v-model="ggzhuyedizhi" style="margin-top: 20px">
        <el-radio v-for="(item,index) in gongongzhuyeid" :label=item.index :key="index">{{item.name}}</el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="quedingggzhuye" :loading="fabuflag">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

js部分

这里还要加上准备部分接入Facebook的代码，然后把后面接上

<script>
export default {
  data() {
    return {
      ggzhuyedizhi:0,
      // 只是一个样式的标识
      fabuflag:false,
      openAssembleVisible789:false,
      // 公共主页初始数据（随便写的）
      gongongzhuyeid:[{
        name:'原神启动',
        index:0
      },{
        name:'王者荣耀',
        index:1
      },{
        name:'和平精英',
        index:2
      }],
      zhuyedshuju:{},
      item:{},
      imglist:[],
    };
  },
  methods: {
    // 关闭对话框时的操作
    handleClose(){
      // 使按钮上的样式不生效
      this.fabuflag=false
      // 关闭对话框
      this.openAssembleVisible789=false
    },
    // 发送到个人主页
    copyfacebookgerenzhuye(data){
      let imgcover = data.cover // 封面
      let title = data.name // 标题
      let description = data.brief // 简介描述
      let goodsid = data.id // 商品的ID,后面可用来进行拼接地址来访问商品详情信息
      // share_goods_html这个接口具体功能为将我传入的值传到后端，然后让后端通过这些值返回我一个静态的HTML页面，这样facebook就能抓取
      // 到我的图谱信息，而这个HTML页面的js代码就执行跳转到商品详情页即可
      share_goods_html({
        image:imgcover,
        title:title,
        goods_id:goodsid,
        url:"https://www.xxxxx.com/detail/"+goodsid,
        description:description,
      }).then((res)=>{
        // 返回静态页面成功，就将这个静态页面的链接放入至Facebook接口中，Facebook就能读取到图谱元素了
        function popupwindow(url) {
          return window.open(
            "http://www.facebook.com/sharer.php?u=" +
              encodeURIComponent(url),
            "_blank",
            "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350"
          );
        }
        popupwindow(res.data);
      })
    },
    quedingggzhuye(){
      let that= this
      // 点击确定后fabuflag为true，确认按钮上转圈圈的样式开启
      that.fabuflag=true
      // ggzhuyedizhi为你选择的公共主页的地址即下标，分别赋值
      let zhuyeid = that.zhuyedshuju[that.ggzhuyedizhi].id
      let zhuyetoken = that.zhuyedshuju[that.ggzhuyedizhi].access_token
      // 初始化上传后图片的ID列表，由于我找到的Facebook上传图片只能一张一张传，所以将每一次上传成功返回的ID存进列表中
      let imgidlist=[]
      // item为你选择的要发布到Facebook上的商品的详细数据
      let item = that.item
      // imglist为你选择的要发布到Facebook上的商品的图片加上封面
      let imglist=that.imglist
      // b为计数器
      let b=0
      // flag为定时器的标识
      let flag=false
      for(let i=0;i<imglist.length&&b<5;i++){
        FB.api('/'+zhuyeid+'/photos','POST',{
          access_token:zhuyetoken,
          url:imglist[i].image,
          published:false // 这个字段一定不能少
        },function(response){
          // 成功一次计数加一
          b++
          if(response.id){
            imgidlist.push({'media_fbid':response.id})//media_fbid字段也一定不能少
          }
          if(b==imglist.length){
            // flag为true就去发帖
            flag=true
          }
          if(b==5){
            // 我要求最多上传5张
            flag=true
          }
        })
      }
      var a = setInterval(() => {
        if(flag){
          // 发帖
            FB.api('/'+zhuyeid+'/feed','POST',{
            access_token:zhuyetoken, //访问令牌
            message:item.brief  //帖子文本
            attached_media: imgidlist,//已经初始上传过的图片ID列表，格式{'media_fbid':id}这样才可以
          },function(response){
            if(response.error){
              if(response.error.code==368){
                that.fabuflag=false
                that.openAssembleVisible789=false
                that.$message({
                  message: "你短时间内发送了太多帖子,请稍后再试",
                  type: "error"
                });
              }
              console.log(response.error.message)
            }else{
              that.fabuflag=false
              that.openAssembleVisible789=false
              that.$message({
                message: "已成功发布至Facebook公共主页",
                type: "success"
              });
            }
            clearInterval(a)
          })
        }
      }, 500);
    },
    copyfacebook(data){
      let that = this
      FB.getLoginStatus(function(response) {
        // 获取facebook登录状态
        if (response.status === 'connected') {
          // 登录成功就会有accessToken
          var id =0
          var accessToken = response.authResponse.accessToken;
          FB.api('/me', function(response) {
            id=response.id
            // 获取自己的个人ID
            FB.api('/'+id+'/accounts','GET',{
              access_token:accessToken
            },function(response){
              // 获取授权的公共主页的id
              if(response.data==null){
                that.$message({
                  message: '您的公共主页未开通或权限未开通,请开通后再尝试',
                  type: "error"
                });
                return
              }
              if(response.data.length>0){
                // 初始化公共主页ID列表
                that.gongongzhuyeid=[]
                // 公共主页数据
                that.zhuyedshuju=response.data
                // 初始化要上传的图片列表
                that.imgidlist=[]
                // 将商品数据赋值给item
                that.item = data
                // 将商品图片赋值给图片列表
                that.imglist=that.item.images
                // 将商品封面图片加入到图片列表中
                that.imglist.unshift({'image':that.item.cover})
                console.log(that.imglist,99999999)
                // 将授权的公共主页导入到公共主页选项对话框中，
                // 这一步是你要选择你要发布到哪一个公共主页
                for(let j=0;j<response.data.length;j++){
                  that.gongongzhuyeid.push({'name':response.data[j].name,'index':j})
                }
                that.openAssembleVisible789=true
              }
            })
          });
        }else{
          // 没登录成功就让他登录
          FB.login(function(response) {
            var id =0
            if (response.authResponse) {
              FB.api('/me', function(response) {
                id=response.id
                // 获取我的个人ID
                FB.getLoginStatus(function(response) {
                  if (response.status === 'connected') {
                    var accessToken = response.authResponse.accessToken;
                    // 获取我的公共主页的ID ，这里的公共主页ID，你授权了多少就有多少
                    FB.api('/'+id+'/accounts','GET',{
                      access_token:accessToken
                    },function(response){
                      if(response.data==null){
                        that.$message({
                          message: '您的公共主页未开通或权限未开通,请开通后再尝试',
                          type: "error"
                        });
                        return
                      }
                      if(response.data.length>0){
                        // 初始化公共主页ID列表
                        that.gongongzhuyeid=[]
                        // 公共主页数据
                        that.zhuyedshuju=response.data
                        // 初始化要上传的图片列表
                        that.imgidlist=[]
                        // 将商品数据赋值给item
                        that.item = data
                        // 将商品图片赋值给图片列表
                        that.imglist=that.item.images
                        // 将商品封面图片加入到图片列表中
                        that.imglist.unshift({'image':that.item.cover})
                        console.log(that.imglist,99999999)
                        // 将授权的公共主页导入到公共主页选项对话框中，
                        // 这一步是你要选择你要发布到哪一个公共主页
                        for(let j=0;j<response.data.length;j++){
                          that.gongongzhuyeid.push({'name':response.data[j].name,'index':j})
                        }
                        that.openAssembleVisible789=true
                      }
                    })
                  } 
                });
              });
            } else {
              that.$message({
                message: "授权登录失败",
                type: "error"
              });
            }
          },{scope: 'public_profile,email,pages_show_list,pages_read_engagement,pages_manage_posts'});//登录时要获取的权限，很重要
        } 
      });
    },
  }
};
</script>

5：总结

总的来说，比较潦草和不够详细，希望读者可以理解，可以作为借鉴，根据自己实际情况在copy，不然绝对跑不了的。

记录

2023-11-6 23:32