facebook-javascript-sdk

这两天可以说是和facebook死亡翻滚了一下。。。

第一步：在https://developers.facebook.com/ 申请一个appid
第二步：html引入sdk

//方式一：
<script defer crossorigin="anonymous"
        src="https://connect.facebook.net/en_US/sdk.js">
</script>
//方式二：
    <script>
        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = 'https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v3.3';
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>

第三步：在使用的页面初始化sdk并使用

    facebookLogin() {
      let t = this
      if (this.ie_judge() == 11 || this.ie_judge() == 'edge') {
          Toast(
              '因瀏覽器兼容問題，推薦使用chrome或其他瀏覽器進行Facebook帳號登入哦~'
          )
          return
        }
        //初始化
        FB.init({
          appId: '273461493052144',
          xfbml: true,
          status: true,
          cookie: true,
          autoLogAppEvents: true,
          version: 'v3.3',
        })

        FB.getLoginStatus(function (response) {
          // console.log(response)
          if (response && response.status === 'connected') {
            FB.logout(function (response) {
              FB.login(function (response) {
                // console.log(response)
                if (response.authResponse) {
                  //如果有用户登录信息，则拿出回调里的用户名
                  t.statusChangeCallback(response)
                } else {
                  console.log('User cancelled login or did not fully authorize.')
                }
              })
            })
          } else {
            //首次登录
            FB.login(function (response) {
              // console.log(response)
              if (response.authResponse) {
                console.log(response)
                t.statusChangeCallback(response)
              } else {
                console.log('User cancelled login or did not fully authorize.')
              }
            })
          
          }
        })
      },
     //回调操作
    statusChangeCallback(response) {
      if (response.status == 'connected') {
        this.form.account = response.authResponse.userID
        this.form.type = 'FaceBook'
        this.login()
      } else {
        Toast('登入失敗，請稍後重試')
      }
    },

第四步：通过路由参数或者window.location.href 确认是否是facebook的回调

//通常放在 mounted
//通过路由参数
  this.$route.query
//通过window.location.href 
 init(){
      //当window.location.search为空时（？前面有#）
      let index = window.location.href.lastIndexOf("?");
      let datalist =window.location.href.substring(index+1,window.location.href.length);
      let data =datalist.split('&')
      let obj = {};
      data.map((e) => {
        obj[e.split("=")[0]] = e.split("=")[1];
      })
      let account = obj.account
      let type = obj.type
      if(account !== null) {
        if(type === 'facebook') {
          this.form.account = account
          this.form.type = 'Apple'
          this.login()
        }
      }
      else {
        return
      }
    },

  //FB 带图分享
  //pc文件中
  FB.ui(
          {
            method: 'share',
            href: 'https://xxxx.xxxxxxx.com/',   //你的域名
            display: "popup",
          },
          (response) => {
            if (response && !response.error_code)  {
              this.share()
              Toast('分享成功')
            } else {
              Toast('分享失敗')
            }
          }
      )
 //移动端的回调出现问题，需要多两个判断条件
  FB.ui(
          {
            method: 'share',
            href: 'https://xxx.xxxx.net',  //你的域名
            display: "popup",
          },
          (response) => {
            if (response && !response.error_code) {
              // console.log(response.completionGesture)     如果点击了取消，打印的是cancel
              if (typeof response != 'undefined'){
                if(response.completionGesture !== 'cancel'){
                  this.share()
                  this.Toast('分享成功')
                }
              }
            } else {
              this.Toast('分享失敗')
            }
          }
      )
  //html文件中
    <meta property="og:url" content="https://xxxx.xxxxxxx.com" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="《xxxxx活动》1周年">
    <meta property="og:image" content="https://xxxx.xxxxxxx.com/share.jpg">
    <meta property="og:image:width" content="525">
    <meta property="og:image:height" content="275">
    <meta property="fb:app_id" content="这里是申请到的appId" />

【mark】 移动端 FB分享 回调如图：

有补充和指正的欢迎Q俺