一、前言

国内做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参数的,具体代码看上面的栗子即可。

移动端折腾国外分享(facebook、twitter、linkedin)的更多相关文章

  1. [转]Code! MVC 5 App with Facebook, Twitter, LinkedIn and Google OAuth2 Sign-on (C#)

    本文转自:https://www.asp.net/mvc/overview/security/create-an-aspnet-mvc-5-app-with-facebook-and-google-o ...

  2. Code! MVC 5 App with Facebook, Twitter, LinkedIn and Google OAuth2 Sign-on (C#)

    http://www.asp.net/mvc/overview/security/create-an-aspnet-mvc-5-app-with-facebook-and-google-oauth2- ...

  3. Sharing count on Facebook, Twitter, and LinkedIn

    最近一段时间一直在研究有关Social Network的东西,这里有几个在当前国外主流社交网站上用来显示分享数量的API,记录一下,今后可能会用得着. Facebook Facebook将FQL(Fa ...

  4. 分享到twitter,facebook,google,yahoo,linkedined,msn

    编辑器加载中... 1. 分享到twitter的代码” title=”分享到 Twitter” target=”_blank” rel=”nofollow”>Twitter 2. 分享到Face ...

  5. ios学习:swift中实现分享到微博、facebook,twitter等

    在swift中打开分享功能原来是如此的简单. 1.首先须要 import Social 2.在分享button事件以下 var controller:SLComposeViewController = ...

  6. 内网穿透神器(ngrok)服务端部署【分享一台自己的ngrok服务器】【多平台】

    Ngrok为何物 “ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道.ngrok 可捕获和分析所有通道上的流量,便于后期分析和重放.”这是百度百科上给Ng ...

  7. 移动端js插件分享

    分享几个移动端使用的插件,个人感觉挺不错的. 1. TouchSlide1.1 滑动的焦点图  http://pan.baidu.com/s/1i3J6bbB 2. iscroll.js  模拟滚动条 ...

  8. ionic2+Angular web端 实现微信分享以及如何跳转回分享出去的页面

    微信分享,首先参考微信JS-SDK开发文档. step1:在启动文件index.html中引入微信js文件: <script src="http://res.wx.qq.com/ope ...

  9. 移动端html页面分享

    开发APP应用比开发移动端网页挑战小,因为APP应用只需要适配不同手机即可,而移动端网页不仅需要适配不同手机,还要适配同一部手机的不同浏览器. 移动端页面分享是一个常用的功能,需要宿主环境,可以是某A ...

随机推荐

  1. swift代理使用

    代理声明: //oc调用代理 @objc(NurseListCellDelegate) protocol NurseListCellDelegate : NSObjectProtocol{ func ...

  2. EntityValidationErrors

    关于如何查看 EntityValidationErrors 详细信息的解决方法 我们在 EF 的编程中,有时候会遇到这样一个错误: 但是,按照他的提示 "See 'EntityValidat ...

  3. git plumbing 更加底层命令解析-深入理解GIT

    原文: http://rypress.com/tutorials/git/plumbing 本文详细介绍GIT Plumbing--更加底层的git命令,你将会对git在内部是如何管理和呈现一个项目r ...

  4. [疑惑与解答] WxPython In Action -1

    在学<活学活用wxPython>第三章的时候,我遇到一点疑惑,那就是下面语句的区别是什么 例 3.1 第4,5行: panel = wx.Panel(self, -1) button = ...

  5. Python 操作 MySQL--(pymysql)

    h2 { color: #fff; background-color: #7CCD7C; padding: 3px; margin: 10px 0px } h3 { color: #fff; back ...

  6. DZNEmptyDataSet框架简介

    给大家推荐一个设置页面加载失败时显示加载失败等的框架. 下载地址:DZNEmptyDataSet https://github.com/dzenbot/DZNEmptyDataSet 上效果首先在你的 ...

  7. 转载 Deep learning:六(regularized logistic回归练习)

    前言: 在上一讲Deep learning:五(regularized线性回归练习)中已经介绍了regularization项在线性回归问题中的应用,这节主要是练习regularization项在lo ...

  8. MYSQL 存储 while 统计每个表

    群里一朋友,有一需求就是获取数据库每个表的总计(条数)思路:动态传入表名, count(1) -- 1.执行这句.获取所有表名 as num ) b where t.table_schema='tes ...

  9. java术语(PO/POJO/VO/BO/DAO/DTO)

    PO(persistant object) 持久对象在o/r 映射的时候出现的概念,如果没有o/r映射,就没有这个概念存在了.通常对应数据模型(数据库),本身还有部分业务逻辑的处理.可以看成是与数据库 ...

  10. 跨域(Cross-Domain) AJAX for IE8 and IE9

    1.有过这样一段代码,是ajax $.ajax({ url: "http://127.0.0.1:9001", type: "POST", data: JSON ...