国外社交平台网页分享
前言
一些网站只要涉及到国际方面的业务，大多数都会有分享到国外各大平台的需求，同样我也查找过分享技术方面的资料，我调研的主要社交平台对象有Facebook、WhatsApp和Instagram，下面我就把我之前查过的网页分享技术分享给大家
各社交平台分享
1. Facebook
Facebook的分享原理： 告诉Facebook你想要分享的url，Facebook爬虫机器人会主动向这个url发起爬虫操作，对这个url进行html解析，分别拿到相对于的html元素图谱，然后获取图谱中的内容并跳转到Facebook的分享页面并把获取到的内容渲染出来，后面只要点击提交分享的按钮就可以实现分享网页的功能了；对于国外第三方的分享元素图谱，一般是写在html的head部分，Facebook所对应的如下面所示：
<html>
<head>
<meta property="og:type" content="website" />
<meta property="og:url" content="要分享的链接" />
<meta property="og:title" content="标题" />
<meta property="og:description" content="简介" />
<meta property="og:image" content="图片" />
</head>
</html>
【除了以上页面静态分享的方式，Facebook还有其他的分享类型和方式】
分享网页固定内容到Facebook
①使用浏览器自带分享功能 （只能分享到Facebook动态）
②使用js进行Facebook分享 （可分享到Facebook动态和好友）
- 分享到Facebook动态：
const u = "http://www.juejin.cn"
const t = "To share happiness with you"
widnow.open("http:/www.facebook.com/share.php?u="+ encodeURIComponent(u) + "&t="+ encodeURIComponent(t), "sharer","toolbar=0,status=0,width=626,height=436")
效果图：
- 分享到Facebook好友（messenger） PC端：需要登录Facebook获取appid
const u = "http://www.juejin.cn"
widnow.open("https:/www.facebook.com/dialog/send?app_id=166193xxxxx747&link="+u+"&redirect_uri="+u+"","_blank")
效果图：
移动端：
const u = "http://www.juejin.cn"
widnow.open("fb-messenger://share/?link="+u）
效果图：
- 有一点要注意的是，如果你的meta已经写好了Facebook的分享内容，那么使用js改变mate分享内容是无效的，因为Facebook抓取meta是在js加载之前获取的，尽管通过js更改mate信息也无法改变Facebook已抓取到的信息，所以如果已经在head头部写好了meta的facebook分享内容，就无法通过js动态分享自定义文案
分享网页自定义内容到Facebook
原理：前端编辑参数，调用第三方的分享地址，第三方回调你传的参数，解析里面meta信息，然后返回html页面，再执行js动态分享内容
- 分析到Facebook动态（PC端和移动端都适用）
let mateArr = [
'og:url','http://www.juejin.cn',
'og:title','this is title',
'og:description','this is description',
'og:image','http://gg.chendahai.cn/static/image/apple.jpg',
'og:type','website'
]
let mataParams = mateArr.toString()
window.open('http://www.facebook.com/sharer.php?u='+ encodeURIComponent(`http://java.chendahai.cn/share/new?meta=${metaParams}`))
效果图：
- 分享到Facebook好友（messenger） PC端：
let mateArr = [
'og:url','http://www.juejin.cn',
'og:title','this is title',
'og:description','this is description',
'og:image','http://gg.chendahai.cn/static/image/apple.jpg',
'og:type','website'
]
let mataParams = mateArr.toString()
window.open('https:/www.facebook.com/dialog/send?app_id=166193xxxxx747&link='+ encodeURIComponent(`http://java.chendahai.cn/share/new?meta=${metaParams}`)+'redirect_uri='+encodeURIComponent(`http://java.chendahai.cn/share/new?meta=${metaParams}`)+'','_blank')
效果图：
移动端：
let mateArr = [
'og:url','http://www.juejin.cn',
'og:title','this is title',
'og:description','this is description',
'og:image','http://gg.chendahai.cn/static/image/apple.jpg',
'og:type','website'
]
let mataParams = mateArr.toString()
widnow.open("fb-messenger://share/?link="+encodeURIComponent(`http://java.chendahai.cn/share/new?meta=${metaParams}`)+""）
效果图:
2. WhatsApp
原理与Facebook一样，通过爬虫获取html头部head部分的mate：og信息
<html>
<head>
<meta property="og:type" content="website" />
<meta property="og:url" content="要分享的链接" />
<meta property="og:title" content="标题" />
<meta property="og:description" content="简介" />
<meta property="og:image" content="图片" />
</head>
</html>
注意：WhatsApp只能分享到好友 PC端和移动端都适用
const u = "http://www.juejin.cn"
const t = "To share happiness with you"
window.open("https://api.whatsapp.com/send?text="+encodeURIComponent(u)+encodeURIComponent(t)+"&via=lopscoop")
效果图：
3. Instagram
需求： 把带连接的自定义图文信息跨平台分享到聊天对话中，类似于微信把网页（含有图片和标题）分享到好友中
查询结果： 未查询到 Instagram 官网API关于网页分享的接口，目前只提供IOS和Android客户端分享功能
下面是官方文档给出的相关解释：
· Instagram is about your life on the go – we hope to encourage photos from within the app. However, in the future we may give whitelist access to individual apps on a case by case basis.
· We want to fight spam & low quality photos. Once we allow uploading from other sources, it's harder to control what comes into the Instagram ecosystem.
翻译下来就是：
Instagram是关于你在旅途中的生活——我们希望鼓励你在应用程序中使用照片。不过，在未来，我们可能会根据具体情况提供对单个应用程序的白名单访问。
我们要打击垃圾邮件和低质量的照片。一旦我们允许从其他来源上传，就很难控制进入Instagram生态系统的内容。
虽然web网页无法分享到动态，但Ios和Android系统的移动是可以分享到Instagram的： Instagram官方分享文档
