首页 » 建站教程 » Blog教程 » Wordpress » 浏览内容

如何为文章添加分享按钮

2012-01-28 17:39 126 0 发表评论
标签：

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="share">
	Share on:
	<a rel="nofollow" id="facebook-share" title="Facebook">Facebook</a>
	<a rel="nofollow" id="twitter-share" title="Twitter">Twitter</a>
	<a rel="nofollow" id="delicious-share" title="Delicious">Delicious</a>
	<a rel="nofollow" id="kaixin001-share" title="开心网">开心网</a>
	<a rel="nofollow" id="renren-share" title="人人网">人人网</a>
	<a rel="nofollow" id="douban-share" title="豆瓣">豆瓣</a>
	<a rel="nofollow" id="sina-share" title="新浪微博">新浪微博</a>
	<a rel="nofollow" id="netease-share" title="网易微博">网易微博</a>
	<a rel="nofollow" id="tencent-share" title="腾讯微博">腾讯微博</a>
</div>

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

1
 
the_content();

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

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

1
2
3
4
5
6
7
8
9
10
11
 
#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。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
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();

通过以上三步就实现了在文章中添加分享按钮，如果你觉得有些按钮不常用的话，可以自行去掉。

评论 共0条 (RSS 2.0) 发表评论

  1. 暂无评论，快抢沙发吧。

发表评论

  •   想要显示头像？
回到页首