给WordPress博客添加收藏书签,代码实现
2012-12-21 00:00
681 查看
这两天在鼓捣给露兜博客添加"社会性网络书签Social Bookmark",也就是文章下面提供给读者收藏分享文章的按钮。网络上提供了很多WordPress插件来实现书签的功能,但是大多数插件也就是提供一段JS代码,其他什么也没有提供,代码的定制性极差。
可喜的是一些网站提供了代码来实现书签功能,这很不错。于是在露兜博客的实验室做了一番测试,结果不是很满意,有些代码已经失效了,而且调用的小图片太多,增加了http连接数,对网站的加载速度有一定的影响。求人不如求己,自己从各大书签网站下载来了最新的代码,经过小小的拼凑,再用上CSS Sprites技术,把这些小图片整成一张,速度明显上来了。另外还对代码做了优化,通过W3C验证。
下图是***成功的书签效果,或许在本文下方看到的能给你更深的体验:
好东西不能独享,下面就来分享一下这个书签收藏按钮的***过程。很简单。
打开你的WordPress主题文件夹下single.php
找到<?php the_content(); ?>,在下面加上以下代码(就是书签的显示位置,或者放到你觉得合适的地方):
注意将上面代码中www.ludou.org网址改成你的,接着在你的WordPress主题CSS文件中加入以下代码:
上面的代码使用了CSS Sprites技术,其中#soucang li a span的背景图片是放在我的相册上,你可以点这里下载,放到你的网站目录下,将http://example/m.gif修改成你自己的图片地址就可以了。另外,如果上面的CSS布局不适合你的博客,可以自己改改啊。
好了,到此就大功造成了。看着这些各色各样的书签按钮,感觉是不是很不一样呢?其实这些书签对网站的美化也有一定的帮助作用哦。有事没事,在此留个言吧。
因为网页的宽度有限,这里只提供了16个主流的书签按钮,其他的可以根据自己的需要自行添加,下面提供其他的书签代码及logo下载,并非我原创。把上面提供的代码看明白了,自己添加也不是什么难事了。
可喜的是一些网站提供了代码来实现书签功能,这很不错。于是在露兜博客的实验室做了一番测试,结果不是很满意,有些代码已经失效了,而且调用的小图片太多,增加了http连接数,对网站的加载速度有一定的影响。求人不如求己,自己从各大书签网站下载来了最新的代码,经过小小的拼凑,再用上CSS Sprites技术,把这些小图片整成一张,速度明显上来了。另外还对代码做了优化,通过W3C验证。
下图是***成功的书签效果,或许在本文下方看到的能给你更深的体验:
好东西不能独享,下面就来分享一下这个书签收藏按钮的***过程。很简单。
打开你的WordPress主题文件夹下single.php
找到<?php the_content(); ?>,在下面加上以下代码(就是书签的显示位置,或者放到你觉得合适的地方):
<div id="soucang"> <strong> <span style="color:#9932CC">收藏</span><span style="color:#57c200"> & </span> <span style="color:#9932CC">分享</span> </strong> <ul> <li id="kaixin"> <a href="http://www.kaixin001.com/repaste/share.php?rtitle=<?php echo urlencode($post->post_title);?>&rurl=<?php echo urlencode(get_permalink($post->ID));?>&rcontent=<?php $desc = strip_tags($post->post_excerpt); echo urlencode($desc); ?>" title="转贴到开心网" rel="nofollow"><span></span></a> </li> <li id="jiudian"> <a title="推荐到九点" href="http://www.douban.com/recommend/?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" rel="nofollow"><span></span></a> </li> <li id="douban"> <a title="推荐到豆瓣" href="http://www.douban.com/recommend/?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" rel="nofollow"><span></span></a> </li> <li id="yahoo"> <a title="雅虎收藏" href="http://myweb.cn.yahoo.com/popadd.html?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" rel="nofollow"><span></span></a> </li> <li id="google"> <a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" title="Google书签" rel="nofollow"><span></span></a> </li> <li id="baidu"> <a href="http://cang.baidu.com/do/add?it=<?php echo urlencode($post->post_title);?>&iu=<?php echo urlencode(get_permalink($post->ID));?>" title="百度搜藏" rel="nofollow"><span></span></a> </li> <li id="qq"> <a href="http://shuqian.qq.com/post?from=3&title=<?php echo urlencode($post->post_title);?>&uri=<?php echo urlencode(get_permalink($post->ID));?>" title="收藏到QQ书签" rel="nofollow"><span></span></a> </li> <li id="vivi"> <a href="javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(vivi=window.open('http://vivi.sina.com.cn/collect/icollect.php?pid=www.ludou.org&title='+escape(d.title)+'&url='+escape(d.location.href)+'&desc='+escape(t),'vivi','scrollbars=no,width=480,height=480,left=75,top=20,status=no,resizable=yes'));vivi.focus();" title="保存到爱问ViVi收藏夹"><span></span></a> </li> <li id="bolaa"> <a href="javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(blog=window.open('http://www5.bolaa.com/CommendBlog/SmallLogin.aspx?title='+escape(d.title)+'&newspath='+escape(d.location.href)+'&subtitle='+escape(t),'bolaa','width=400px,height=400px'));blog.focus();" title="推荐到博拉"><span></span></a> </li> <li id="poco"> <a href="javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t)+'&img=http://www.h-strong.com/blog/logo.gif','keyit','scrollbars=no,width=475,height=575,status=no,resizable=yes'));keyit.focus();" title="收藏到POCO网摘" rel="nofollow"><span></span></a> </li> <li id="hexun"> <a href="javascript:t=document.title;u=location.href;e=document.selection?(document.selection.type!='None'?document.selection.createRange().text:''):(document.getSelection?document.getSelection():'');void(open('http://bookmark.hexun.com/post.aspx?title='+escape(t)+'&url='+escape(u)+'&excerpt='+escape(e),'HexunBookmark','scrollbars=no,width=600,height=450,left=80,top=80,status=no,resizable=yes'));" title="转帖到和讯网摘" rel="nofollow"><span></span></a> </li> <li id="delicious"> <a href="http://www.delicious.com/post?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" title="deliciou" rel="nofollow"><span></span></a> </li> <li id="xianguo"> <script charset="utf8" type="text/javascript"> cT="0";nc="#444";nBgc="";nBorder="#F5E5A9";tc="#649B00";tBgc="#FFF4D0";tBorder="#F5E5A9";tDigg="%E6%8E%A8%E8%8D%90";tDugg="%E5%B7%B2%E8%8D%90";defaultItemUrl="WEB_URL";defaultFeedUrl ="http://feed.feedsky.com/ludou"; </script> <script type="text/javascript" charset="utf8" src="http://re.xianguo.com/api/diggthis.js"></script> </li> </ul> </div>
注意将上面代码中www.ludou.org网址改成你的,接着在你的WordPress主题CSS文件中加入以下代码:
#soucang { margin:15px auto; } #soucang ul { display:inline; position:absolute; } #soucang li { list-style:none; float:left; margin-right:10px; display:block; } #soucang li a span { /*请将下面的 http://example/m.gif 改成你自己的图片链接*/ background:url(http://example/m.gif) no-repeat; display:block; height:16px; width:16px; } #soucang li#baidu a span { background-position: 0 0; } #soucang li#bolaa a span { background-position: 0 -17px; } #soucang li#delicious a span { background-position: 0 -34px; } #soucang li#douban a span { background-position: 0 -85px; } #soucang li#google a span { background-position: 0 -102px; } #soucang li#hexun a span { background-position: 0 -119px; } #soucang li#jiudian a span { background-position: 0 -136px; } #soucang li#kaixin a span { background-position: 0 -153px; } #soucang li#poco a span { background-position: 0 -187px; } #soucang li#qq a span { background-position: 0 -204px; } #soucang li#vivi a span { background-position: 0 -221px; } #soucang li#yahoo a span { background-position: 0 -238px; } #soucang li#xianguo {margin-left:10px; padding-bottom:5px;}
上面的代码使用了CSS Sprites技术,其中#soucang li a span的背景图片是放在我的相册上,你可以点这里下载,放到你的网站目录下,将http://example/m.gif修改成你自己的图片地址就可以了。另外,如果上面的CSS布局不适合你的博客,可以自己改改啊。
好了,到此就大功造成了。看着这些各色各样的书签按钮,感觉是不是很不一样呢?其实这些书签对网站的美化也有一定的帮助作用哦。有事没事,在此留个言吧。
因为网页的宽度有限,这里只提供了16个主流的书签按钮,其他的可以根据自己的需要自行添加,下面提供其他的书签代码及logo下载,并非我原创。把上面提供的代码看明白了,自己添加也不是什么难事了。
相关文章推荐
- 30个WordPress博客书签收藏分享代码
- WordPress纯代码实现自动为文章添加标签及标签内链接
- 添加到某某书签、某某收藏的代码
- 为基于Wordpress的博客添加CNZZ统计代码
- 纯代码实现WordPress评论回复自动添加@评论者的功能
- 代码实现wordpress博客归档数据统计
- 一段代码让wordpress博客自动添加关键词(keywords)及网页描述(description)
- 【代码】Android开发收藏功能添加的实现 (2013-08-13 11:15:24)
- 添加"收藏到QQ书签"到博客/网页中的代码(精品)
- 用代码实现为WordPress文章添加浏览次数(views)统计功能
- 更好的添加到某某书签某某收藏的代码
- 如何实现在已有代码之后添加逻辑之继承,组合(静态代理)实现方法
- 完美兼容IE、Opera、Firefox、360、搜狗的“添加收藏”的最精简代码
- C# 添加图片水印类实现代码
- 给DIV添加滚动条的实现代码
- WordPress开发中短代码的实现及相关函数使用技巧
- 怎么添加系统页签,怎么实现客户登录的时候运行代码逻辑
- Hexo next博客添加折叠块功能添加折叠代码块
- 手动修改二进制文件,实现在代码区中添加自己的一段代码
- Wordpress ThickBox 添加“查看原图”效果代码