Jiathis控件的使用

最近在使用Jiathis控件,发现这个控件还是挺好用的,只要配置好就可以了。由于微博、社区等和QQ、邮件、短信等的处理不一样,因此把分享配置分为两组,
针对不同的平台的分享机制进行特定配置,具体如下:

<div class="shera-list"><!--
            --><!-- Baidu Button BEGIN -->
           <div id="bdshare" class="jiathis_style_32x32" οnmοuseοver="setShare(
        '您的好友邀请您加入。。。', 
        'http://www.baidu.com',
        'http://www.baidu.com/logo.jpg', '', true, false);">
             <div class="gtjtilte" style="font-size: 16px;line-height: 36px;padding-left: 15px">通过微博、社区推荐</div>
            <div class="gtjioc"><a class="jiathis_button_tsina"></a></div>
            <div class="gtjioc"><a class="jiathis_button_tqq"></a></div>
            <div class="gtjioc"><a class="jiathis_button_qzone"></a></div>
            <div class="gtjioc"><a class="jiathis_button_renren"></a></div>
            <div class="gtjioc"><a class="jiathis_button_kaixin001"> </a></div>
            <br/>
             <br/>
              <br/>
              </div>
            <div id="bdshare" class="jiathis_style_32x32" οnmοuseοver="setShare(
        '您的好友邀请您加入....', 
        'http://www.baidu.com',
        '', '', true, false);">
            <div class="gtjtilte" style="font-size: 16px;line-height: 36px;padding-left: 15px">通过QQ、微信等推荐</div>
            <div class="gtjioc"><a class="jiathis_button_cqq"></a></div>
            <div class="gtjioc"><a class="jiathis_button_weixin"></a></div>
            <div class="gtjioc"></div>
            <br/>
             <br/>
              <br/>
			<div class="gtjtilte" style="font-size: 16px;line-height: 36px;padding-left: 15px">通过邮件、短信推荐(免费)</div>
            <div class="gtjioc"><a class="jiathis_button_email"></a></div>
            <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
			</div>		
            <!-- Baidu Button BEGIN -->
        </div>
        <div class="clear" style="height:120px"></div>
      </div>
        
<script type="text/javascript" >
		
function setShare(title, url,  pic, summary, shortUrl, hideMore) {
    jiathis_config.title = title;
    jiathis_config.url = url;
    jiathis_config.pic = pic;
    jiathis_config.summary = summary;
    jiathis_config.shortUrl = shortUrl;
    jiathis_config.hideMore = hideMore;    
}

var jiathis_config = {};

<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1398657042338283" charset="utf-8"></script>


只要在你想加入的页面中间插入上面的代码片段即可。

其中自定义参数的含义如下:

参数名 描述 类型 默认值
url 自定义分享的URL string 网页地址
title 自定义分享的TITLE string 网页标题
summary 定义要分享页面的摘要,摘要默认为Meta标签中Description部分的内容 string
boldNum 分享面板上加粗媒体的个数。如果缺省,则标准风格的分享面板默认是6个加粗,迷你风格的分享面板默认是3个加粗。
何时会加粗:当用户使用过JiaThis分享到功能后,JiaThis会依据该浏览者的喜好产生一个智能排序的顺序,这个顺序的前几个会被加粗,您可以通过这个参数自由控制加粗的个数,如果您想关闭加粗的功能,则将此参数写成数字0就可以了。
integer 标准:6
迷你:3
siteNum 分享面板上的社会化媒体的个数。通常情况,这个数字应当大于或等于boldNum参数,因为需要加粗的个数不会多于整个分享面板媒体的个数。如果缺省,标准风格默认为15个,迷你风格默认为6个。 integer 标准:15
迷你:6
sm 自定义分享面板上社会化媒体的排序。填写媒体网站的WEBID(如:tsina表示新浪微博,tqq表示腾讯微博,更多的社会化媒体WEBID参见这里),用英文半角逗号分隔。如果网站主使用了此自定义功能,则自定义的媒体网站会优先固定出现在前面,后面紧跟依据网站浏览者分享行为产生的智能排序结果。这个结果不会与您自定义的媒体重复。如果缺省,分享面板会按照智能排序的规则出现媒体。

特别的,siteNum 参数与 sm 参数交替使用几乎可以让您自定义任何您想要的分享面板。
举例一:
var jiathis_config = {
    sm:"tsina,tqq",
    siteNum:7
}
这表示:分享面板上总共会出现7个媒体,前两个是新浪微博和腾讯微博,后面剩下的5个则根据智能排序规则出现。当然,和您想的一样,这剩下的5个不会再次包含新浪微博或者是腾讯微博了。
举例二:
var jiathis_config = {
    sm:"tsina,tqq,t163,tsohu",
    siteNum:4
}
这表示:分享面板公共会出现4个媒体,这4个媒体全都是您自定义的。如果这里的 siteNum小于4,比如假设是3,则分享面板会出现3个媒体,sm参数中的最后一个tsohu(搜狐微博)不会出现。
string
imageWidth (只对侧栏式有效):这是imageUrl参数的一个补充。如果您自定义了分享图片,且这个图片宽度不与我们官方标准风格或迷你风格的图片宽度一致时,可能出现显示的偏差或错位,这时候您就需要将imageUrl参数中图片的实际宽度填写在这里。缺省状态下,标准风格的图片宽度为26,迷你风格的图片宽度为20。 integer 标准:26
迷你:20
marginTop (只对侧栏式有效):如果我们不想让分享按钮处于页面的中间部位,我们就可以用marginTop属性来控制分享按钮在页面中的位置,是位于页面的上边,还是页面的下边,或是偏上、偏下,都可以实现。默认的位置就是中间位置,也就是距离页面上边是150px。 integer
showClose (只对侧栏式有效):是否在分享面板中加入关闭按钮。如果缺省,默认会开启关闭按钮。这表示浏览者可以通过这个关闭按钮关闭侧栏式分享按钮。 boolean true
imageUrl (只对侧栏式有效):侧栏式风格的图片地址。侧栏式风格的"分享到"图片允许网站主自定义,当您觉得JiaThis官方提供的所有图片风格都无法满足您的要求时,您或者您的团队可以自己设计一个分享到图片。将这个图片放入您的服务器。保该图片可以通过因特网正常访问,如:http://yourdomain/images/share.gif, 然后将该地址填写到这里这里即可。 string
appkey 您网站对应各大社会化媒体的APPKEY,内容被分享后,显示的来源将是您自己的网站。 object
ralateuid 目前仅新浪微博支持,此处填写您的新浪微博UID,内容被分享后,将会自动@分享者提示他关注您。默认情况下此值为空,不会出现@提示。 object
data_track_clickback 是否启用回流量统计,启用后,分享出去的链接会自动在后面加上jtss=xxx的参数,这样可以精确统计到您网站的回流量。 boolean false
pic 支持新浪微博、腾讯微博、搜狐微博、网易微博,可以自定义分享的图片,如果此值为空,将会根据社会化媒体原有的抓图机制来获取您网站的图片。 string
shortUrl 是否针对新浪微博开启短链接传递,如果缺省,默认为true(开启),关闭定义为false(不开启) 不加引号 string true

下面来看看EVT参数的详细说明:

比如,某个网站如果想要统计自己网站的每个会员分享到新浪微博、腾讯微博等行为,以这个统计作为某项奖励的依据(例如,增加积分等)就可以使用events事件处理。

代码 描述 数据
share 当用户点击分享后触发返回evt.data,evt.data是一个对象,它包含了该事件所能获取的所有数据:evt.data.url(分享的当前网页),evt.data.service(分享到的媒体)。

实例一:得到用户分享的URL地址( 自定义函数为geturl )
<script>
function geturl(evt) {
    alert('用户分享的网页是:'+evt.data.url);
}
var jiathis_config = {
    evt: {"share":"geturl"}
}
</script>

实例二:得到用户分享到了哪些媒体( 自定义函数为getservice )
<script>
function getservice(evt) {
    alert('用户将当前网页分享到了:'+evt.data.service);
}
var jiathis_config = {
    evt: {"share":"getservice"}
}
</script>

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值