如何为文章添加分享按钮

越来越多的网站都在自己的文章页面中加入了分享按钮,主要是为了增加文章在读者群之间的关注度,从而达到提高网站流量的目的。本文就详细说下为文章添加分享按钮的方法

其实网上有很多添加分享按钮的方法,也有功能强大的插件来实现。但我本人是不主张使用插件的,原因也就是因为插件的功能太过于强大了,普通的用户根本用不着。即使插件提供了自定义的功能,但是过于臃肿的图片和代码的在不经意间消耗了你的服务器带宽资源。

本文为文章添加分享按钮的方法来源于 mg12 的文章,原文请查看这里

先来看看园子博客上的实现效果图片,你也可以在这篇文章底部看到分享按钮功能。

园子博客添加分享按钮的效果

园子博客添加分享按钮的效果

为文章添加分享按钮的方法

1.在你要添加按钮的地方粘贴如下的 HTML 代码:


如果你使用的是 WordPress,想要加在文章的结尾处,那么直接打开文章页 single.php,查找类似如下代码:

the_content();

加到这行代码结尾处就可以了。

2.在你主题的 CSS 文件中加入如下的 CSS 代码:

#share,#share a{line-height:16px}
#share a{display:inline-block;width:16px;height:16px;text-indent:-999em;cursor:pointer;margin-left:5px;background:url(http://photo.tuhigh.com/pics/1044/1024/187252t1287897845550_o.png) no-repeat}
#share a#facebook-share{background-position:0 0}
#share a#twitter-share{background-position:0 -16px}
#share a#delicious-share{background-position:0 -32px}
#share a#kaixin001-share{background-position:0 -48px}
#share a#renren-share{background-position:0 -64px}
#share a#douban-share{background-position:0 -80px}
#share a#sina-share{background-position:0 -96px}
#share a#netease-share{background-position:0 -112px}
#share a#tencent-share{background-position:0 -128px}

园子友情提醒:样式中的图片你可以下载到本地,放到你对应的目录中,更改下路径即可。

3.将如下的 JavaScript(jQuery) 代码添加到你的JS文件中,如果不会调用,请查看:如何在 WordPress 中使用 jQuery

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 = 'http://www.example.com/'; // 网站链接
 
	jQuery('#facebook-share').click(function() {
		var url = 'http://facebook.com/share.php?u=' + link + '&t=' + title;
		var params = getParamsOfShareWindow(626, 436);
		window.open(url, windowName, params);
	});
 
	jQuery('#twitter-share').click(function() {
		var url = 'http://twitter.com/share?url=' + link + '&text=' + title;
		var params = getParamsOfShareWindow(500, 375);
		window.open(url, windowName, params);
	});
 
	jQuery('#delicious-share').click(function() {
		var url = 'http://delicious.com/post?url=' + link + '&title=' + title;
		var params = getParamsOfShareWindow(550, 550);
		window.open(url, windowName, params);
	});
 
	jQuery('#kaixin001-share').click(function() {
		var url = 'http://www.kaixin001.com/repaste/share.php?rurl=' + link + '&rcontent=' + link + '&rtitle=' + title;
		var params = getParamsOfShareWindow(540, 342);
		window.open(url, windowName, params);
	});
 
	jQuery('#renren-share').click(function() {
		var url = 'http://share.renren.com/share/buttonshare?link=' + link + '&title=' + title;
		var params = getParamsOfShareWindow(626, 436);
		window.open(url, windowName, params);
	});
 
	jQuery('#douban-share').click(function() {
		var url = 'http://www.douban.com/recommend/?url=' + link + '&title=' + title;
		var params = getParamsOfShareWindow(450, 350);
		window.open(url, windowName, params);
	});
 
	jQuery('#sina-share').click(function() {
		var url = 'http://v.t.sina.com.cn/share/share.php?url=' + link + '&title=' + title;
		var params = getParamsOfShareWindow(607, 523);
		window.open(url, windowName, params);
	});
 
	jQuery('#netease-share').click(function() {
		var url = 'http://t.163.com/article/user/checkLogin.do?link=' + link + 'source=' + source + '&info='+ title + ' ' + link;
		var params = getParamsOfShareWindow(642, 468);
		window.open(url, windowName, params);
	});
 
	jQuery('#tencent-share').click(function() {
		var url = 'http://v.t.qq.com/share/share.php?title=' + title + '&url=' + link + '&site=' + site;
		var params = getParamsOfShareWindow(634, 668);
		window.open(url, windowName, params);
	});
}
 
bindShareList();

通过以上三步就实现了在文章中添加分享按钮,如果你觉得有些按钮不常用的话,可以自行去掉。本文所用到的方法版权归 mg12 所有。

如何为文章添加分享按钮》上有40条评论

发表评论