一:可直接复制套用里面的的代码
以下是页面的显示:复制并粘贴下面的JS代码,放到您的网页,可以在<body>和</body>的之间网页的任意位置放置。如果您的网站使用的模板,您也可以复制代码到您的模板,按钮将在所有网页自动出现。
<!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
<a class="jiathis_button_qzone"></a>
<a class="jiathis_button_tsina"></a>
<a class="jiathis_button_tqq"></a>
<a class="jiathis_button_weixin"></a>
<a class="jiathis_button_renren"></a>
<a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
<a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->
这里需要引入了jia.js,之后页面图标即可显示。
分享往往是有分享的标题跟链接,这里标题链接的配置,可统一在jiathis_config中定义,完成配置后,将语句放在主JS的前面即可,以下举例说明:
var jiathis_config = {
boldNum:0,
siteNum:7,
showClose:false,
sm:"t163,kaixin001,renren,douban,tsina,tqq,tsohu",
imageUrl:"http://v2.jiathis.com/code/images/r5.gif",
imageWidth:26,
marginTop:150,
url:"http://www.jiathis.com",
title:"自定义TITLE #微博话题#",
summary:"分享的文本摘要",
pic:"自定义分享的图片连接地址",
data_track_clickback:true,
appkey:{
"tsina":"您网站的新浪微博APPKEY",
"tqq":"您网站的腾讯微博APPKEY",
"tpeople":"您网站的人民微博APPKEY"
},
ralateuid:{
"tsina":"您的新浪微博UID"
},
"shortUrl":是否开启短链接,
evt:{
"share":"用户自定义函数" ( 可以根据自己的命名规范来定义一个自定义函数,如:getEvent )
说明:evt参数可以得到用户的分享操作的相关信息。比如:用户分享的URL,用户分享到的媒体。但是,我们不能确定用
户是否真正成功的分享了内容,只能确定用户确实是点击了分享按钮……
}
}
详细参数说明,可在网站中的帮助栏里查看。http://www.jiathis.com/help/html/jiathis-diy
二:很多时候我们的分享图标是有自己切好的图来使用的,那就不需要使用默认的图标,这时我们需要做的很简单,就照常让图片显示,因为点击分享的关键在于点击的时候弹出相应的分享页面,所以这时需要给这个图片绑定点击事件,让他跳出指定的分享页面。
代码如下;以下是页面显示的代码;
<div share-body" > <img src="/img/promotion/newyearWheel/wechat.png" class="img-weixin"> <img src="/img/promotion/newyearWheel/qq.png" class="img-qq"> <img src="/img/promotion/newyearWheel/weibo.png" class="img-weibo"> <img src="/img/promotion/newyearWheel/copy.png" class="img-copy" id="btn_submit"></div>
<div class="div-weixin hidden"> <div class="div-qr-box"> <div class="div-qr-title"> <span>使用微信扫描二维码</span> <img src="/img/close.jpg" class="qr-close"> </div> <div class="div-weixin-qr"> </div> </div> </div>
以下则是给相应的图片绑定了点击事件实现点击跳出新页面,直接通过JiaThis API接口分享,接口里可放分享的地址跟标题,所以可在外部公共定义。详细接口API可以在网站中的帮助模块里查看:http://www.jiathis.com/help/html/share-with-jiathis-api。示例如下;
var shareUrl = "https://www.cmiinv.com/view/promotion/wheelEntrance.html?referee=" + userId;var shareTitle = "红包在手中,新年提前发!新年财神到,好礼百分百。呼朋唤友来,iPad带回家!我在中民i投抽中了" + pri + " !来不及解释啦,快点我抽奖。";$(".img-weibo").click(function () { if (!$.isLogin()) { $.goLogin(); return; } window.open("http://www.jiathis.com/send/?webid=tsina&url=" + shareUrl + "&title=" + shareTitle);});$(".img-qq").click(function () { if (!$.isLogin()) { $.goLogin(); return; } window.open("http://www.jiathis.com/send/?webid=cqq&url=" + shareUrl + "&title=" + shareTitle);});var weixinShareUrl = "http://m.cmiinv.com/product/NewyearTurntableGame/NewYearDetail.jsp?referee=" + userId;$(‘.div-weixin-qr‘).qrcode(weixinShareUrl);//使用jquery.qrcode生成二维码。
$(".img-weixin").click(function () { if (!$.isLogin()) { $.goLogin(); return; } $(".div-weixin").removeClass("hidden");});
$(".qr-close").click(function(){ $(".div-weixin").addClass("hidden");});