欢迎您来到,码代码-李雷博客        登录  |  注册

通过JiaThis API接口自定义分享功能按钮实现分享功能本地化

更新:2015-10-09 00:25:40
人气:5038
来源:本站原创
A+

最早李雷博客采用的是百度分享插件,为此还发过博文讲解如何在一个页面调用多个按钮分享不同的文章,感兴趣的朋友可以在本站搜索一下。但是最近发现网页加载的时候经常出现卡顿现象,研究半天居然是百度分享按钮加载缓慢拖了后腿,严重影响用户体验。所以,下决心取代这个骄傲自居的家伙,网上找了好久,最后发现JiaThis有专门的API分享外链接调用接口。详细研究了一下,发现真的是可以解决困扰我很久的问题,彻底摆脱网页加载的时候调用除自己服务器以外的第三方外链JS脚本,避免了因外链服务器响应缓慢影响到自己网站的加载速度,现在把这个办法分享给大家。

先看看JiaThis API接口说明:

想在某些动态程序(比如PHP)中调用分享接口,建议可以直接调用我们的API接口,使用JiaThis提供的分享接口,你可以不必再关心众多社会化媒体网站字符编码、各不相同的分享接口,网站访问者最喜欢分享到那些媒体网站等等。同时,作为网站主,你又必须要了解:哪些文章被分享的次数多?分享到哪些媒体?分享后返回到本站的社会化流量数据又是多少?…等等,而这一切,只需要JiaThis一个标准统一的接口就可以为你全部解决。

JiaThis API 标准格式如下: 

http://www.jiathis.com/send/?webid=shareID&url=$siteUrl&title=$siteTitle&uid=$uid&summary=$summary&pic=$pic

shareID 分享ID参数代表你要分享到哪个站点的ID编号, 可以通过这个文档查询:分享网站ID清单 
$siteUrl 参数代表你要分享的网站链接地址,可以通过动态程序调用 
$siteTitle 参数代表你要分享的网站页面标题,可以通过动态程序调用,也可自定义。
$uid(非必须) 代表你注册JiaThis的会员UID,可以登录网站后查到您的UID,用于数据统计。
$summary 定义要分享页面的摘要,摘要默认为Meta标签中Description部分的内容
$pic 支持新浪微博、腾讯微博、搜狐微博、网易微博,可以自定义分享的图片,如果此值为空,将会根据社会化媒体原有的抓图机制来获取您网站的图片。

举例1:分享到开心网代码

http://www.jiathis.com/send/?webid=kaixin001&url=http://www.mdaima.com&title=码代码-李雷博客

举例2:分享到QQ空间代码

http://www.jiathis.com/send/?webid=qzone&url=$siteUrl&title=$siteTitle

这样的格式比起直接调用各个网站的接口来,使用更方便,代码维护更简单。

JiaThis支持的分享到网站(WEBID与对应网站关系)

QQ空间    qzone    http://qzone.qq.com    
新浪微博    tsina    http://weibo.com    
微信    weixin    http://weixin.qq.com/    
腾讯微博    tqq    http://v.t.qq.com/    
搜狐微博    tsohu    http://t.sohu.com    
人人网    renren    http://www.renren.com    
飞信    feixin    http://feixin.10086.cn    
QQ好友    cqq    http://connect.qq.com/    
百度贴吧    tieba    http://tieba.baidu.com    
淘江湖    taobao    http://i.taobao.com    
豆瓣    douban    http://www.douban.com    
开心网    kaixin001    http://www.kaixin001.com    
网易微博    t163    http://t.163.com    
MSN    msn    http://cn.msn.com/

接下来给大家一个具体一点例子,李雷博客最新的分享功能就是用下面的方法:

JS脚本的设置:

<script>
	function share_mdaima(webid,url,title,summary,pic){
	//这里面除了webid必填,其它的url,title,summary,pic均可以选填,下面也设置了为空时的默认值,大家根据具体需要进行修改吧
		if (url==''){var url=window.location.href;}
		if (title==''){var title="码代码-PHP技术经验教程分享-李雷博客";}
		if (pic==''){var pic="http://www.mdaima.com/images/logo.gif";}
		if (summary==''){var summary="码代码,李雷博客,是博主多年PHP实战开发经验的积累,通过简洁的说明文字、功能示例、教程视频,分享博主大量的PHP开发经验及编程技巧,提供给开发人员学习和借鉴!"}
		//可以利用JQ的AJAX动态调用,将参数传给PHP写入数据库,为站长统计提供便利
		//var ajax_bdshare=$.post("/share_jilu.php?i="+Math.random(),{webid:webid,url:url});
		var share_url="http://www.jiathis.com/send/?webid="+webid+"&url="+url+"&title="+title+"&summary="+summary+"&pic="+pic+"";
		window.open(share_url);
	};
</script>

CSS样式的设置:

.bds_qzone_0_32{ float:left;background:url(/images/share/icons_0_32.png);background-position:0 -52px; height:32px; width:32px; cursor:pointer; margin:0 10px;}
.bds_qzone_0_32:hover{opacity:.8;filter:alpha(opacity=80)}
.bds_tsina_0_32{ float:left;background:url(/images/share/icons_0_32.png);background-position:0 -104px; height:32px; width:32px; cursor:pointer;margin:0 10px;}
.bds_tsina_0_32:hover{opacity:.8;filter:alpha(opacity=80)}
.bds_tqq_0_32{ float:left;background:url(/images/share/icons_0_32.png);background-position:0 -260px; height:32px; width:32px; cursor:pointer;margin:0 10px;}
.bds_tqq_0_32:hover{opacity:.8;filter:alpha(opacity=80)}
.bds_renren_0_32{ float:left;background:url(/images/share/icons_0_32.png);background-position:0 -208px; height:32px; width:32px; cursor:pointer;margin:0 10px;}
.bds_renren_0_32:hover{opacity:.8;filter:alpha(opacity=80)}
.bds_weixin_0_32{ float:left;background:url(/images/share/icons_0_32.png);background-position:0 -1612px; height:32px; width:32px; cursor:pointer;margin:0 10px;}
.bds_weixin_0_32:hover{opacity:.8;filter:alpha(opacity=80)}
/*这里引用的图片地址为:http://www.mdaima.com/images/share/icons_0_32.png,大家可以下载来自己设置好路径调试一下,这里只提供了几个按钮,可以参照这个自行增加样式再对应调用class的名称即可*/

页面调用按钮:

<div class="bds_qzone_0_32" onclick="share_mdaima('qzone','具体URL地址','标题','描述','图片')" ></div>
<div class="bds_tsina_0_32" onclick="share_mdaima('tsina','','','','')"></div>
<div class="bds_tqq_0_32" onclick="share_mdaima('tqq','','','','')"></div>
<div class="bds_renren_0_32" onclick="share_mdaima('renren','','','','')"></div>
<div class="bds_weixin_0_32" onclick="share_mdaima('weixin','','','','')"></div>

打赏

取消

感谢您的支持,我会继续努力的!

扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

推荐的文章
# 发表我的评论
  /     /  
# 最近评论
暂时还没有评论,要不要说点什么?
网站地图
会员服务
关于我们
QQ:858353007
 
广告服务
关注微信
手机访问
 
 
Copyright © 2014-2019 www.mdaima.com All Rights Reserved.
版权所有:码代码-李雷博客 | 专注PHP技术经验教程分享!   ICP备案号:京ICP备10202169号