当前位置:园子博客 » Wordpress » 如何为文章添加分享按钮

如何为文章添加分享按钮

10月 25th, 2010 | Filed under Wordpress | 共有9,907次浏览

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

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

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

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

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

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

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

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();

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

  1. 这个还可以!

  2. cheeco
    8月 27th, 201123:54

    我加了之后,火狐和IE8都用不了,估计是技术问题,哈哈。

  3. sunshine
    4月 22nd, 201111:58

    用的第三方分享代码,虽然打点小AD,但能随时更新最新分享。

  4. sprityaoyao
    4月 21st, 201120:42

    好久不来哈,这个方法很受用呀

  5. 自动焊接设备
    3月 30th, 201104:44

    好强悍哈!值得使用的好东西

  6. sprityaoyao
    3月 1st, 201120:52

    我用了,咋点击没反应呢?难道是JS冲突?

  7. 亿品元素
    11月 22nd, 201021:39

    不错,这个收藏一下

  8. Baider
    11月 14th, 201022:17

    我就是不会弄分享到腾讯微博那个按钮。

  9. 嗜睡的蚂蚁
    11月 13th, 201023:42

    园子,我想问一下,你文章中的那些代码是怎样让它们那样显示的呢?:?:

    • 园子
      11月 16th, 201009:00

      @嗜睡的蚂蚁
      使用代码高亮插件实现的
      你可以看看:
      http://www.yzznl.cn/archives/242.html
      wp-Syntax 插件使用方法

  10. 香袭人丰胸精油
    11月 1st, 201018:59

    这个还没试过。。。

  11. 敏敏知音
    10月 29th, 201016:33

    不错的方法,学习了!

  12. 嗜睡的蚂蚁
    10月 26th, 201019:57

    这个代码你是加在哪里的呢?

  13. shekck
    10月 26th, 201018:31

    这个分享按钮很好看啊,以前找了很久都没找到

  14. 朵未
    10月 26th, 201016:20

    这个也不错,我直接用那一种按钮,鼠标放上去,弹出很多来。

  15. 问学堂右脑王
    10月 26th, 201015:48

    不错的方法,学习了!

  16. 创享·生活
    10月 26th, 201014:51

    不错的添加方法。还可以通过第三方添加,呵呵

  17. 不知不觉
    10月 26th, 201014:11

    以后有时间还得慢慢把插件全转为代码~ 😎

  18. 软件盒子
    10月 26th, 201013:09

    我现在用的一个插件

  19. 记忆盒子
    10月 26th, 201012:20

    我感觉,你这个效果没有卢松松那个明显,我常常忽略你左侧那个功能,而卢松松那个就显得很突出。可能与位置有关。

  20. 万戈
    10月 26th, 201011:26

    还是jquery的方法好啊

  21. akasuna
    10月 26th, 201011:09

    看见不少人都加了类似按钮,但我估计用得不多

  22. 自由人
    10月 26th, 201010:54

    mg12的方法不错的,昨天看到了,呵呵,网址都是JS弄的

  23. 飞晏
    10月 26th, 201010:54

    Google chrome浏览器下点击没有反应

  24. 赫赛汀
    10月 26th, 201009:11

    这个按钮还是很有必要的,如果别人想要分享你的文章岂不是很方便,即使他没有这个打算,也不会影响到什么的。

  25. zwwooooo
    10月 25th, 201023:13

    以前加过,后来去掉了。

  26. Code之行人
    10月 25th, 201022:09

    我也觉得很少人会用啊

  27. SOHO一族
    10月 25th, 201021:41

    诶,昨天才在neo看到

  28. 秦大少
    10月 25th, 201021:16

    没人会分享我的东西,懒得折腾这!

  29. 指舞六弦
    10月 25th, 201020:12

    很久没折腾了,改天抽个时间弄弄?!

  30. yesureadmin
    10月 25th, 201018:53

    前三个还加上干嘛,去GFW了

  31. 先看看
    10月 25th, 201018:18

    我那个挺方便的,什么都有

  32. Pavel
    10月 25th, 201016:12

    我用过插件版的
    后来又撤了
    发现喜欢分享的人还是不多

您必须在 登录 后才能发布评论.