移动端折腾国外分享（facebook、twitter、linkedin）

一、前言

    国内做HTML5页面，关注最多就是微信分享了，之前也写过关于微信分享的文章，可以点击查看：分享相关文章

    再者，就是国内的其它分享，比如常用的新浪微博、腾讯微博、QQ空间等等，最方便的就是直接用百度的分享插件，但是在移动端感觉这个插件太多了，没必要，而且还要请求baidu。后来发现，这些分享其实都可以通过url的参数来实现，拿一些常用的分享举个例子：

var  shareInfo = {      title: '【' +$( '.title h1' ).html()+ "】" , //分享标题      desc:$( 'meta[name="description"]' ).attr( 'content' ), //分享正文      url:window.location.href, //分享URL      imgurl:$( '.entry img' ).eq(0).attr( 'src' ) //分享图片 }   $( "#bdshare_warp .bds_tsina" ).click( function () { //新浪微博      var  _uri =  "http://service.weibo.com/share/share.php?c=w3cmark&content=utf-8&source=w3cmark&title="  + encodeURIComponent(shareInfo.title + shareInfo.desc) +  "&url="  + encodeURIComponent(shareInfo.url) +  "&pic="  + encodeURIComponent(shareInfo.imgurl);      window.open(_uri, 'newwindow' ); });   $( "#bdshare_warp .bds_qzone" ).click( function () { //腾讯空间      var  _uri =  "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=前端笔记网&url="  + encodeURIComponent(shareInfo.url) +  "&title="  + encodeURIComponent(shareInfo.title) +  "&desc="  + encodeURIComponent(shareInfo.desc) +  "&pics="  + encodeURIComponent(shareInfo.imgurl);      window.open(_uri, 'newwindow' ); });   $( "#bdshare_warp .bds_tqq" ).click( function () { //腾讯微博      var  _uri =  "http://share.v.t.qq.com/index.php?c=w3cmark&a=index&url="  + encodeURIComponent(shareInfo.url) +  "&title="  + encodeURIComponent(shareInfo.title) +  "&pics="  + encodeURIComponent(shareInfo.imgurl);      window.open(_uri, 'newwindow' ); });

    这样自定义更加灵活方便，而且能够指定分享图片。

    二、国外分享facebook、twitter、linkedin

    上周有机会接触到一个国外招聘页面，需要做国外的分享。做国外分享，还是第一次，大部分出名国外站点在国内都被墙了，几乎没关注过国外的分享，也不知道可以做哪些分享。经过测试，后来只定了三个国外分享facebook、twitter、linkedin。类似于国内的分享，这些分享也是可以采用url拼接参数的形式（在搜索过程，也发现了一些类似集合的插件，比如addthis）。折腾过期中也踩了不少坑，先上栗子核心代码：

$( "#JfbBtn" ).click( function (){ //facebook share          var  _uri =  'http://www.facebook.com/sharer.php?u=' +encodeURIComponent(shareInfo.url)+ '&t=' +encodeURIComponent(shareInfo.title);          window.location.href=_uri;      });      $( "#JtwBtn" ).click( function (){ //twitter share          var  _uri =  'http://twitter.com/share?url=' +encodeURIComponent(shareInfo.url) + '&text=' + encodeURIComponent(shareInfo.title);          window.location.href=_uri;      });      $( "#JlkBtn" ).click( function (){ //linkedin share          var  _uri =  'http://www.linkedin.com/shareArticle?mini=true&url=' +encodeURIComponent(shareInfo.url) + '&title=' + encodeURIComponent(shareInfo.title);          window.location.href=_uri;     });

    其中上面的shareInfo是相关的分享信息（分享标题、链接等），这里就不贴出来了。通过上面的代码可以看到，没有指定分享图片的参数（其中Facebook通过meta定义，在下文讲到），找了很久都没找到，如果有童鞋知道记得留言告知哈~

    三、分享踩的坑

    1、关于Facebook的分享图片

    首先，Facebook分享是可以指定分享图片的，但是不能通过url参数拼接，需要通过定义meta标签，具体代码如下：

<!-- facebookShare --> <meta property= "og:image"  content= "http://www.w3cmark.com/demo/img/share.png" /> <meta property= "og:description"  content= "分享描述" />  <!-- facebookShare / -->

    另外，这里还存在一个分享图片缓存问题。比如你一开始测试，用分享图片是share01.png这个图片，然后分享成功后显示的是这张图片没错。等你测试完成了，换成真实的分享图片share.png，这时候如果你页面的地址（ps：本地测试时，是无法分享成功的）还是不变，那么你分享成功后的图片还是你的测试图片share01.png。

    为什么呢？后来发现，原因是Facebook分享是通过你的页面地址拿内容的（这也可以解释到为什么本地测试是无法分享，因为本地地址无法访问），如果你地址不变，默认分享内容还是不变的，即使你点击分享时的弹窗内容是最新的，你分享成功后在Facebook看到的还是旧的。解决方法就是在页面地址价格问号或者时间戳，让Facebook识别到你的最新内容。

    2、关于Twitter的url拼接

    一开始在做Twitter分享是，上网找的分享代码，都是url拼接有问题的，如图：

    问题在于，写法都是status后面加链接和标题，这样分享出去之后会发现链接和标题连在一起，会出现把链接识别错误的问题的。后来看到Twitter开发文档，原来有url和tetx参数的，具体代码看上面的栗子即可。

本文由 w3cmark_前端笔记 版权所有，转载时请注明出处。
注明出处格式：w3cmark (http://www.w3cmark.com/2015/381.html)