国际社交平台分享-facebook篇

每次做项目,惧怕分享,因为对这块知识很模糊,梳理清楚后发现并没有这么繁杂,看完本篇可以了解:

  1. facebook分享需要哪些配置,哪些是必要,哪些是可选的
  2. facebook APP_ID怎么获取
  3. facebook分享怎么验证调试

1. meta基础配置

a. 必要配置

<meta property=”og:title” content=”分享标题” />
<meta property=”og:description” content=”分享描述” />
<meta property=”og:image” content=”分享图片,建议使用jpg,尺寸为1200×628合适” />

b. 建议增加配置–以便适合大部分其他支持Open Graph协议的平台

<meta property=”og:type” content=”website” />
<meta property=”og:url” content=”分享页面地址” />
<meta property=”og:site_name” content=”站点名称” />
<meta property=”fb:app_id” content=”facebook 应用id” />

c. 了解更多配置相关信息

1. og是啥?

Open Graph Protocol(开放通讯协议),由facebook发起,在html网页meta中使用,可为网站标记 类型,链接,站点名称,图片等信息。后续众多社交及搜索平台也支持,如facebook,LinkedIn,Google+

2. fb:app_id的获取

1.注册好facebook账号并通过审核
2.打开页面:https://developers.facebook.com/?locale=zh_CN
3.在界面中找到【我的应用】-> 【添加新应用】
4.创建完成后进到仪表盘,应用编号就是app_id了

3. fb:app_id的作用

1.为网站提供社交分析,统计分享数据
2.facebook有提供社交评论功能,以此管理评论审核
3.facebook登录,身份验证

2. 加载Facebook JS-SDK

(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/en_US/sdk.js#xfbml=1&version=v3.2";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

3. 方式一:使用Facebook官方按钮直接分享

虽然一般不使用,但还是可以了解一下,示例图:
《国际社交平台分享-facebook篇》

普通按钮
<div class="fb-share-button" data-href="分享页面地址" data-layout="button">
</div>
带分享次数的按钮
<div class="fb-share-button" data-href="分享页面地址" data-layout="button_count">
</div>

4. 方式二:自定义按钮,使用javascript进行分享

首先,初始化facebook分享基础信息

window.fbAsyncInit = function() {
    FB.init({
        appId: '1006266752899589',
        xfbml: 1,
        version: 'v3.2'
    });
};

然后,自定义事件以触发FB.ui方法
我这里使用按钮绑定点击,只用于演示,核心事件是FB.ui方法

document.querySelector('#btn-shareFB').onclick = () => {
    FB.ui({
        method: 'share',
        href: '分享页面地址',
        success(res) {
            console.log('res', res);
        }
    })
};

5. 分享调试验证

1.本地及测试环境并不能调试facebook分享

  • 假设你按上述配置好meta,加载好sdk,初始化后,调用了FB.ui函数,填写了href参数,这个参数填本地及测试域名是无效的,因为facebook只能去抓取线上可用页面的数据。
  • 即使你在facebook应用仪表盘中的,添加了域名白名单为你本地或测试环境的地址,那也只能让你本地或测试唤起分享弹窗,但是og:url 和 FB.ui里的href参数,也必须要是线上环境的。否则获取分享参数失效

2.验证线上环境facebook分享配置是否有效

  • 验证地址:https://developers.facebook.com/tools/debug/
  • 输入线上地址,如果正常,即会呈现分享结果预览,如果失败,也会有错误提示,按照错误提示进行修正即可
  • facebook抓取分享配置,其实获取的是页面的缓存。可以通过点击该页面的按钮【重新抓取】。另,运营人员说分享内容跟页面不一致时,点击这个按钮也能解决问题

发表评论

电子邮件地址不会被公开。 必填项已用*标注