添加分享功能:新浪微博、Twitter、人人网、QZone

发布时间:2010.07.29 17:54
分类:杂七杂八
标签:,

效果见本篇文章结尾处。

我要介绍的这个方法不光wordpress可以用,任何博客都可以用,说的再大点就是任何网站都可以用,因为这个分享就是html加上css就实现了,不是什么插件,因为本人实在不想装什么插件,虽然现在有几款很好的分享插件,但那玩意一个是分享的网站太多了,有的连听都没听过,还有一个是有点不绿色,不轻便。

此方法需要手动修改主题模板和样式表,不想折腾的朋友请直接搜索分享插件使用之。修改之前请备份文章页面模板(single.php)和样式表(style.css),因为只需要修改这俩文件即可:

一、准备一下图片,并上传到你自己喜欢的目录,我上传到了主题下的img(新建的)目录。因为我只需要分享到四个网站,所以我就准备了4个小图标并合并到一张图片里,点击这里右键另存为

二、打开文章页面模板(single.php),在你喜欢的地方插入一下代码,我是在文章结尾的地方插入的,因为我喜欢:

<div class="share clearfix"><span class="txt">分享到:</span><span><a class="sina" title="分享到新浪微博" href="javascript:void((function(s,d,e){try{}catch(e){}var f='http://v.t.sina.com.cn/share/share.php?',u=d.location.href,p=['url=',e(u),'&title=',e(d.title),'&appkey=2924220432'].join('');function a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=620,height=450,left=',(s.width-620)/2,',top=',(s.height-450)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})(screen,document,encodeURIComponent));" target="_blank">分享到新浪微博</a></span><span><a href="http://twitter.com/home?status=<?php the_title(); ?> <?php the_permalink(); ?>"title="分享到Twitter" target="_blank" class="twitter">分享到Twitter</a></span><span><a class="renren" href="javascript:void((function(s,d,e){if(/renren\.com/.test(d.location))return;var f='http://share.renren.com/share/buttonshare?link=',u=d.location,l=d.title,p=[e(u),'&title=',e(l)].join('');function%20a(){if(!window.open([f,p].join(''),'xnshare',['toolbar=0,status=0,resizable=1,width=626,height=436,left=',(s.width-626)/2,',top=',(s.height-436)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent));" title="分享到人人网">分享到人人网</a></span><span><a class="qzone" href="javascript:void(window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+encodeURIComponent(document.location.href)));" title="分享到QQ空间">分享到QQ空间</a></span></div>

这里需要说明一下,里面的类名你随便修改,修改成任意你喜欢的名字都可以,但一会添加css的时候记得也要改成相对应的即可,上面clearfix这个类名是用来清除浮动的,不要问我什么是清除浮动,你不清除也可以,但要给share这个层定义高,不然会很惨。

三、打开样式表(style.css),再最下面添加以下代码:

/* 这是清除浮动的代码 */
.clearfix:after{content:".";clear:both;height:0;visibility:hidden;display:block;}            
.clearfix{display:inline-block;}                
* html .clearfix{height:1%;}        
.clearfix{display:block;}
/* 清除浮动代码结束 */
 
/* 这是分享部分的样式代码 */
.share{padding:15px 0;border-bottom:1px solid #cccccc;}
.share span{float:left;margin:0 15px 0 0;}
.share span.txt{margin:0;}
.share a{background:url("img/icon.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;}
.share a:hover{color:#E05C23;}
.share .twitter{background-position:0 -16px;}
.share .renren{background-position:0 -32px;}
.share .qzone{background-position:0 -48px;}
/* 分享部分样式代码结束 */

这里还要说明一下,本人不建议在utf-8编码的样式表中用中文注释,因为这可能造成不为人知的错误,但也可能没问题,所以关于此点还请大家自己斟酌一下。

四、上传文件,Done!

如果要卸载此功能,删除你添加过的代码就可以。

有兴趣的朋友可以试试,搞不定的可以联系我,我帮你搞定,当然是在我不忙的时候,比如像现在!

上一篇: 下一篇:
  1. 万戈 回复

    原来用的是脚本,果然无敌通用

  2. 天天记事 回复

    这个学习了,最近想换主题还不知道换什么呢,到时候把这个功能加上……

  3. 图片不显示 回复

    分享到前面的图片不显示阿

    • ZeroZ 回复

      图片传上去了没?路径对不对?

你的留言:

声明:
1、本站启用了审核机制,你的留言可能稍后才会显示,请不要重复提交,谢谢。
2、留言时的头像是Gravatar提供的服务。想设置的看这里