文章分享按钮的js代码

　　首先声明，本文所公布的js代码虽然写着本博客的名字但是其实际的功劳来自胡杨，是胡杨的辛苦劳动成果，我做的只是新加了两个分享按钮重新归类了下，所以首先感谢胡杨的辛苦劳作！目前此代码在EMLOG和TYPECHO中都是可以用的，效果如下图：

　　文章分享按钮的代码主要由四部分组成，一部分是Html代码，此代码可根据需要放在需要安放的位置即可！代码如下：

<div class="share clearfix">
    <span><a class="t_qq" title="分享到腾讯微博">腾讯微博</a></span>
    <span><a class="qzone" title="分享到QQ空间">QQ空间</a></span>
    <span><a class="sina" title="分享到新浪微博">新浪微博</a></span>
    <span><a class="renren" title="分享到人人网">人人网</a></span>
    <span><a class="kaixin" title="分享到开心网">开心网</a></span>
    
    
    </div>

　　第二部分就是控制该代码的css样式表，可以将如下代码放在你的博客样式表中，也可以将如下代码单独存为share.css在博客头部文件中给予调用(注意第七行的url(“../images/share.gif”)为按钮图片的存放路径，大家可以自由更改！)。

.clearfix:after{content:".";clear:both;height:0;visibility:hidden;display:block;}            
.clearfix{display:inline-block;}                
* html .clearfix{height:1%;}        
.clearfix{display:block;}
.share{padding:5px;cursor:hand;}
.share span{float:left;margin-left:10px;}
.share a{background:url("../images/share.gif") no-repeat 0 0;display:block;padding:0 0 0 18px;height:16px;line-height:16px;color:#0066CC;overflow:hidden;margin:2px 0 0;text-decoration:none;float:left;}
.share a:hover{color:#E05C23;}
.share .t_qq{background-position:0 0;}
.share .qzone{background-position:0 -16px;}
.share .sina{background-position:0 -32px;}
.share .renren{background-position:0 -48px;}
.share .kaixin{background-position:0 -64px;}
.share .t_163{background-position:0 -80px;}

　　第三部分就是上述按钮的JS代码了，这些代码可以放在原有的JS文件中给予调用，也可以单独存储为share.js在页面头部给予调用，但是要注意不同的博客或者CMS有不同的格式！

 //分享条代码
	 function getParamsOfShareWindow(width, height) {
//分享条
return ['toolbar=0,status=0,resizable=1,width=' + width + ',height=' + height + ',left=', (screen.width - width) / 2, ',top=', (screen.height - height) / 2].join('');
}
function bindShareList() { 
		var link = encodeURIComponent(document.location);
		// 文章链接
		var title = encodeURIComponent(document.title.substring(0, 76));
		// 文章标题
		var source = encodeURIComponent('天天返屋|良信名屋');
		// 网站名称
		var windowName = 'share';
		// 子窗口别称
		var site = 'https://www.liangxin.name/'; 
		// 网站链接
			jQuery('.renren').click(function() {
			var url = 'http://share.renren.com/share/buttonshare?link=' + link + '&title=' + title;
			var params = getParamsOfShareWindow(580, 330);
			window.open(url, windowName, params);
		});

		jQuery('.sina').click(function() {
			var url = 'http://v.t.sina.com.cn/share/share.php?url=' + link + '&title=' + title;
			var params = getParamsOfShareWindow(607, 390);
			window.open(url, windowName, params);
		});

		jQuery('.t_qq').click(function() {
			var url = 'http://v.t.qq.com/share/share.php?title=' + title + '&source=' + source + '&url=' + link;
			var params = getParamsOfShareWindow(681, 755);
			window.open(url, windowName, params);
		});

		jQuery('.qzone').click(function() {
			var url = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=' + title + '&url=' + link + '&site=' + site;
			var params = getParamsOfShareWindow(630, 570);
			window.open(url, windowName, params);
		});
		jQuery('.kaixin').click(function() {
			var url = 'http://www.kaixin001.com/repaste/share.php?rurl=' + title + '&source=' + source + '&url=' + link;
			var params = getParamsOfShareWindow(450, 350);
			window.open(url, windowName, params);
		});
		
			
	} 
bindShareList();

第四部分就是按钮的小图片了，我根据jiathis的插件图片加工了下，如下图，可将此图片直接另存为share.gif，图片如下：

　　以上就是所有的代码了，在实验中心岛也想加入搜狐微博的代码的，但是发现搜狐采用的是GB2312的编码形式，在测试时我们所有的内容和地址都是显示的乱码，所以这也算是本代码的一个小小的缺憾，留待大家继续帮忙完善吧!

最后编辑：2011-06-26

作者：xindao

这个作者貌似有点懒，什么都没有留下。

站内专栏