H5社交分享总结

[kekobin]

简介

浏览器的分享功能特别的常见，不过由于不同浏览器对分享功能的支持程度不一，导致了分享功能在实现层面的千奇百怪。

web-share

web-share

从浏览器分享到微信

在浏览器打开后，点击浏览器自带的分享图标，选择微信，这种方式获取缩略图的方法：
需要在head头部添加Open Graph Meta Data

中文OG

<meta property="og:type" content="website" />
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="http://www.example.com/img/thumbnail.png">
<meta property="og:url" content="http://www.example.com/">

其中og:image是完整的URL，最好不要太大，毕竟是缩略图
亲测这种方式可以实现从手机浏览器分享到微信可定制缩略图和title。

坑还在后面，如果分享的自定义的title中包含现金、提现、红包等这类关键字是分享不出去的，坑啊……所以我们改为繁体字之后就可以了，如果一定要用这类字就先用繁体字代替吧，要不然就换成别的吧。

facebook、twitter

社交平台是会抓取目标页面的代码（注意是服务器返回的html代码，由js操作后的html它们是抓不到的），
然后对html中的<title/>和标签进行分析。一般来说<title/>会作为要分享的标题,会作为分享的正文。这是最基本的两个抓取点。
另外的可选的抓取点则是其他meta标签。如果你的html像这样：

...
<meta property="og:image" content="xxx" /> <!-- facebook -->
<meta name="twitter:image" content="xxx" /><!-- twitter-->
<meta name="description" content="雷好，我系要分享的内容balabala...">
<title>这是标题</title>

以twitter效果为例得到:

js分享操作

上面的配置可以用于读取meta、title。接下来是对页面地址进行分享的操作。

Facebook

• 首先先引入fb的sdk：

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  //下面填入一个你的app id，如果还没，请在fb开发者平台注册一个
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId={your app id}"; 
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

• 触发事件进行分享示例：

var shareToFbBtn = document.getElementById('fb-btn');
shareToFbBtn.onclick = function(){
  FB.ui({
    method: 'share',
    href: "htttp://www.eaxmple.com/share.html" //这里换成你的网址
  }, function(response){
    //分享回调
  })
}

// 或者href也可以是    
var shareTitle = encodeURIComponent('我的昵称是:'+userName); //假设你要在标题中分享用户名，需要先定义好userName
var shareContent = encodeURIComponent('这里是要分享的内容balabala....'); //如果内容也不固定请传入内容
var shareUrl = 'http://www.example.com/share.php?'+'title='+shareTitle+'&description='+shareContent; //如果有其他需要请拼接，比如+"&image="+ encodeURIComponent(shareImageUrl)

Twitter

简单的tw分享并不需要调用sdk，只需要跳转到一个特定页面：

var shareToTwBtn = document.getElementById('tw-btn');
var twTitle = '输入标题';
var twUrl = '要分享的页面地址';
shareToTwBtn.onclick = function(){
     window.open('http://twitter.com/home/?status='.concat(encodeURIComponent(twTitle)).concat(' ').concat(encodeURIComponent(twUrl))
}

whatsapp方案

官方方案

谷歌新方案

由于是新方案，这个方案目前只支持chrome66等，UC等也不支持，暂时仅做个介绍:
web share

参考

Web分享到Twitter、Facebook、微信、微博

[usershensijie]

博主你好，分享到推特这个功能，我试了你的代码，直接就是进入到了推特，并没有分享的功能，能解答一下吗