有关facebook checkbox插件的使用记录

当烟火撩云
400 阅读4分钟

零. facebook sdk 快速开发官网网址

developers.facebook.com/docs/javasc…

一. facebook sdk的使用场景

  1. 针对国外市场的产品,为了迎合用户的使用习惯,在用户注册和登录时一般会提供facebook(现在叫meta),或者谷歌账号登录.
  2. 同时如果自己产品在facebook上有官方账号,也可以通过sdk将app或者网站的用户引导向facebook关注官方账号.
  3. 如果产品有社交需求,可以通过sdk让用户将对应的链接,文字以及图片分享到facebook,进行引流. tips: 当然还有其他的使用场景,但是由于我只遇到这些场景,所以只针对这些场景进行描述.以下是官方的使用场景描述:
  4. Enables you to use the Like Button and other Social Plugins on your site.
  5. Enables you to use Facebook Login to lower the barrier for people to sign up on your site.
  6. Makes it easy to call into Facebook's Graph API.
  7. Launch Dialogs that let people perform various actions like sharing stories.
  8. Facilitates communication when you're building a game or an app tab on Facebook.
  • 您可以在自己的网站上集成“赞”按钮和其他社交插件。
  • 您可以在自己的网站中集成 Facebook 登录，让用户更轻松方便地注册。
  • 您可以轻松地调用 Facebook 图谱 API。
  • 您可以启动便于用户执行分享动态等各种操作的对话框。
  • 如果您在 Facebook 开放平台中构建游戏或应用标签，这些功能还可帮助您与用户交流。

支持的浏览器:

JavaScript 版 Facebook SDK 支持以下热门浏览器的两个最新版本：Chrome、Firefox、Safari（包括 iOS）和 Internet Explorer（仅支持 11 版本）。

二. 引入facebook sdk

官网给的例子很简单:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true, // 设置为true就会自动解析页面DOM,并且初始化社交插件
      version          : 'v12.0'
    });
  };
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

将这些代码复制到你的项目里,一般来说是放在index.html中.

如果是使用框架搭建的项目,下文中会给予相应的建议.

对应的app id请到facebook后台页面进行设置.

三. 使用facebook checkbox

官网网址:

developers.facebook.com/docs/messen…

首先,让我们来看一下facebook checbox的样式

image.png

功能方面:

这个checkbox在用户点击后,会让用户登录facebook,然后我们可以通过Facebook推送相应的信息给这个用户,比如节日优惠或者其他人性化推送.

使用方面:

找到你需要加载facebook插件的地方新建一个标签, 比如说是div. 然后你需要给这个div加上一个类, fb-messenger-checkbox, 这样sdk会自动找到这个标签进行渲染(FB.init时,xfbml要设置为true).

...
<div class="fb-messenger-checkbox"></div>
...

在创建完目标标签后, 我们还需要在标签中添加sdk中需要用到的参数,如果有一个参数设置的不对,checkbox也是不会显示的,而且对应的网址域名也要在facebook后台中配置成白名单

<div class="fb-messenger-checkbox"  
  origin=<PAGE_DOMAIN> // 网址域名
  page_id=<PAGE_ID> 
  messenger_app_id=<APP_ID>
  user_ref="<UNIQUE_REF_PARAM>" // 参数值必须是唯一的,可以用其他参数拼上时间戳实现
  allow_login="<true>"
  size="<small | medium | large | standard | xlarge>" // 样式
  skin="<light|dark>" // 主题
  center_align="<true|false>"> // 是否居中
</div>

这些参数都配置正确后刷新页面就能看到checkbox插件已经在页面上显示了.

四. 在vue或者react中使用facebook checbox插件

由于框架下dom的渲染是需要时间的,如果在dom渲染完成前加载facebook插件会导致找不到对应的目标标签,不显示我们需要的插件.

所以我们需要将加载facebook sdk事件封装成一个全局事件,在对应页面加载完毕后调用

window.addFaceBookJs = function() {
   window.FB = null;
   window.fbAsyncInit.hasRun = false;
   var head = document.getElementsByTagName('head')[0]
   if(document.getElementById('facebook-jssdk')){
      head.removeChild(document.getElementById('facebook-jssdk'))
   }
   var script = document.createElement('script')
   script.type = 'text/javascript'
   script.defer = true
   script.async = true
   script.id = 'facebook-jssdk'
   script.src =  'https://connect.facebook.net/en_US/sdk.js'
   head.appendChild(script)
}

然后在对应页面的生命钩子函数中调用这个全局事件

// vue
mounted(){
 if(window.addFaceBookJs){
      window.addFaceBookJs()
 }
},
  
// react
componentDidMount(){
    if(window.addFaceBookJs){
        window.addFaceBookJs()
    }
}

五. checbox 插件的生命周期

如果需要在checkbox插件加载中或者加载完成后触发相应的事件,可以修改window.fbAsyncInit代码如下

window.fbAsyncInit = function () {
   FB.init({
      appId: facebook_appId,
      autoLogAppEvents: true,
      xfbml: true,
      version: 'v6.0'
   });

   FB.Event.subscribe('messenger_checkbox', function (e) {
      if (e.event == 'rendered') {
         console.log('Plugin was rendered')
      } else if (e.event == 'checkbox') {
         var checkboxState = e.state
         console.log('Checkbox state: ' + checkboxState)
      } else if (e.event == 'not_you') {
         console.log('User clicked 'not you'')
      } else if (e.event == 'hidden') {
         console.log('Plugin was hidden')
      }
   })
};

六. 使用注意事项

  1. window.fbAsyncInit事件只在引入的sdk加载完成后触发一次,如果要多次触发则需要删除对应的sdk script标签,然后重新添加这个标签,这样才能重新触发window.fbAsyncInit事件
var head = document.getElementsByTagName('head')[0];
if(document.getElementById('facebook-jssdk')){
   head.removeChild(document.getElementById('facebook-jssdk'));
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.defer = true;
script.async = true;
script.id = 'facebook-jssdk';
script.src =  'https://connect.facebook.net/en_US/sdk.js';
head.appendChild(script);
  1. 重新触发window.fbAsyncInit事件也不会跟第一次触发一样,重新创建新的插件,需要修改两个参数才能跟第一次一样, 如果需要在一个项目中触发多个插件,那么在新插件初始化之前都需要添加下面的代码进行还原.
window.FB = null;
window.fbAsyncInit.hasRun = false;

七. 使用完整代码

// index.html
<script>
    window.addFaceBookJs = function() {
       window.FB = null;
       window.fbAsyncInit.hasRun = false;
       var head = document.getElementsByTagName('head')[0]
       if(document.getElementById('facebook-jssdk')){
          head.removeChild(document.getElementById('facebook-jssdk'))
       }
       var script = document.createElement('script')
       script.type = 'text/javascript'
       script.defer = true
       script.async = true
       script.id = 'facebook-jssdk'
       script.src =  'https://connect.facebook.net/en_US/sdk.js'
       head.appendChild(script)
    }
    
    window.fbAsyncInit = function () {
       FB.init({
          appId: facebook_appId,
          autoLogAppEvents: true,
          xfbml: true,
          version: 'v6.0'
       });

       FB.Event.subscribe('messenger_checkbox', function (e) {
          if (e.event == 'rendered') {
             console.log('Plugin was rendered')
          } else if (e.event == 'checkbox') {
             var checkboxState = e.state
             console.log('Checkbox state: ' + checkboxState)
          } else if (e.event == 'not_you') {
             console.log('User clicked 'not you'')
          } else if (e.event == 'hidden') {
             console.log('Plugin was hidden')
          }
       })
    };
</script>

// 代码文件中
    ... 
    <div class="fb-messenger-checkbox"  
      origin=<PAGE_DOMAIN> // 网址域名
      page_id=<PAGE_ID> 
      messenger_app_id=<APP_ID>
      user_ref="<UNIQUE_REF_PARAM>" // 参数值必须是唯一的,可以用其他参数拼上时间戳实现
      allow_login="<true>"
      size="<small | medium | large | standard | xlarge>" // 样式
      skin="<light|dark>" // 主题
      center_align="<true|false>"> // 是否居中
    </div>
    ...
    
    // vue
    mounted(){
     if(window.addFaceBookJs){
          window.addFaceBookJs()
     }
    },

    // react
    componentDidMount(){
        if(window.addFaceBookJs){
            window.addFaceBookJs()
        }
    }
avatar
文章
阅读
粉丝