接入Twitter和Facebook分享踩坑记录

准备工作

1、首先需要在HTML的head添加下述meta标签内容,在分享时,Twitter和Facebook会爬取该网站页面的meta内容,然后生成分享卡片。

2、按照下述配置完成后,需要把内容发布上线,否则Twitter和Facebook无法爬取到网页配置的meta信息。

3、完成上面的两个步骤后,使用官方的测试工具测试分享效果,如果配置正确就可以预览到分享的效果:

4、Twitter和Facebook爬取内容填写的url位置有些区别,其中Facebook无法设置自定义内容。

切记: 配置完成后,请务必使用上述的测试工具进行测试,否则可能会出现即使配置正确了,在开发测试分享功能的时候,效果也可能没生效。

Facebook分享

  • meta标签内容:





  • 字段对应关系预览:

接入Twitter和Facebook分享踩坑记录插图

Facebook分享
  • 为了方便这里封装了方法:
/**
 * 快速分享到Facebook
 */
export const facebookShare = () => {
  const url = encodeURIComponent('链接,分享爬取的内容就是这个从这个链接,该链接不会显示在分享卡片上');
  const facebook = http://www.facebook.com/sharer/sharer.php?u=${url};
  window.open(facebook, '_blank');
};

Twitter分享

  • meta标签内容:







  • 字段对应关系预览:

接入Twitter和Facebook分享踩坑记录插图1

Twitter分享   
  • 为了方便这里封装了方法:
/**
 * 快速分享到twitter
 */
export const twitterShare = () => {
  // 自定义内容
  const content = '点击此处链接领取奖品,可选'
  const url = encodeURIComponent('链接,可选');
  const text = ${content} ${url}&via=${via};
  // 分享后会显示 “via @张三”
  const via = '张三';
  // 拼接链接
  const twitter = https://twitter.com/intent/tweet?text=${text};
  window.open(twitter, '_blank');
};

文章来源于互联网:接入Twitter和Facebook分享踩坑记录

THE END
分享
二维码