一、前言

国内做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. web网页动态分享facebook和twitter

    介绍 facebook分享 http://www.facebook.com/sharer.php?t=${text}u=encodeURIComponent('静态html') twitter分享 h ...

  6. 移动端H5微信分享

    移动端H5微信分享功能,可以使项目更好地传播. 微信官方教程文档:  微信JS-SDK说明文档 步骤一:绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置&quo ...

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

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

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

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

  9. 移动端js插件分享

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

随机推荐

  1. 腾讯2015校招一面、二面、HR面

    其实我目前的理想公司就是腾讯. 内推第三面跪了··· 现在校招. 已面完一面.二面.HR面··· 一面主要问我项目和Linux.网络··· 二面主要问我游戏服务器··· 然后是HR面··· 技术面我都 ...

  2. PHPCMS V9实现硬件地址MAC绑定访问技术实现

    目的:会员登录需要 用户名.密码.身份识别码(新增字段) 效果:  解决方法: 目前数据库中macaddress字段已经添加,修改了phpcms\modules\member\index.php 63 ...

  3. Flex通信-Java服务端通信实例

    转自:http://blessht.iteye.com/blog/1132934Flex与Java通信的方式有很多种,比较常用的有以下方式: WebService:一种跨语言的在线服务,只要用特定语言 ...

  4. leetcode@ [273] Integer to English Words (String & Math)

    https://leetcode.com/problems/integer-to-english-words/ Convert a non-negative integer to its englis ...

  5. 监听mysql是否挂了

    监听mysql是否挂了,如果挂了就重启mysql 方式一: #!/bin/bash pgrep -x mysqld &> /dev/null if [ $? -ne 0 ] then e ...

  6. 第三百四十七天 how can I 坚持

    下班的时候眼皮就一直在跳,今天意志好消沉,以后还是少说话,多说不宜啊.. 挣脱束缚,无论怎样,对于生命,什么都是次要的,不要想太多. 最近事比较多,应该是累了,睡一觉 应该就好了. 睡觉,晚安.

  7. Windows 2003 服务器安全设置-批处理 (附参考链接)

    长期维护windows服务器终结出来的安全设置批处理与大家分享,复制以下全部内容用记事本另存为bat或者cmd执行 ===================分隔符号=================== ...

  8. windows服务安装及卸载

    1)安装脚本Install.bat%SystemRoot%\Microsoft.NET\Framework\v4.0.30319\installutil.exe JobSchedule.exeNet ...

  9. emWin显示文本字符-【worldsing笔记】

    在emWin显示文本字符还是容易的,提供了各种不同的接口,下面是有关于字符显示的常用的用法,可以直接复制到VS2008的模拟ucGui(emWin模拟工程)中运行: 工程代码下载:1.emWin5.2 ...

  10. UVaLive 6697 Homework Evaluation (DP)

    题意:给出一个长字符串,再给一个短字符串,进行匹配,如果第i个恰好匹配,则 +8,:如果不匹配,可以给长或短字符串添加-,先后匹配,这样-3, 连续的长字符串添加-,需要减去一个4:也可不给添加-,则 ...