1. 全栈程序员必看首页

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

全栈程序员-用户IM • • 未分类

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

http://www.mdaima.com/jingyan/20.html

最早李雷博客采用的是百度分享插件，为此还发过博文讲解如何在一个页面调用多个按钮分享不同的文章，感兴趣的朋友可以在本站搜索一下。但是最近发现网页加载的时候经常出现卡顿现象，研究半天居然是百度分享按钮加载缓慢拖了后腿，严重影响用户体验。所以，下决心取代这个骄傲自居的家伙，网上找了好久，最后发现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脚本的设置：
    
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);
    
};

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
)}

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/113895.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号