接入Twitter和Facebook分享踩坑记录

准备工作

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

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

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

• Twitter测试工具：https://cards-dev.twitter.com/validator
• facebook测试工具：https://developers.facebook.com/tools/debug/

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

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

Facebook分享

• meta标签内容：

1
2
3
4
5

• 字段对应关系预览：

• 使用标签即可调用：

Facebook分享
1

• 为了方便这里封装了方法：

/**
 * 快速分享到Facebook
 */
export const facebookShare = () => {
  const url = encodeURIComponent('链接,分享爬取的内容就是这个从这个链接，该链接不会显示在分享卡片上');
  const facebook = `http://www.facebook.com/sharer/sharer.php?u=${url}`;
  window.open(facebook, '_blank');
};
1
2
3
4
5
6
7
8

Twitter分享

• meta标签内容：

1
2
3
4
5
6
7

• 字段对应关系预览：

• 使用标签即可调用：

Twitter分享   
1

• 为了方便这里封装了方法：

/**
 * 快速分享到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');
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

原文 https://www.cnblogs.com/LiangSenCheng/p/16702697.html