首页 > 代码库 > 分享给好友工具之jiaThis

分享给好友工具之jiaThis

2024-09-11 10:30:04   213人阅读

一：可直接复制套用里面的的代码

以下是页面的显示：复制并粘贴下面的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="http://www.mamicode.com/img/promotion/newyearWheel/wechat.png" class="img-weixin">
   <img src="http://www.mamicode.com/img/promotion/newyearWheel/qq.png" class="img-qq">
   <img src="http://www.mamicode.com/img/promotion/newyearWheel/weibo.png" class="img-weibo">
   <img src="http://www.mamicode.com/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="http://www.mamicode.com/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");
});
 


分享给好友工具之jiaThis


联系
我们