巧用google给友情链接加上Favicon图标

首页电脑网络巧用google给友情链接加上Favicon图标(2012年05月31日)

肿么?不知道Favicon图标是什么?看看你的浏览器地址栏网址前头那个小图标,对了,就是他了。

要看效果可以看我的友情链接页面:http://www.rgblive.com/links/

原理:

所以,要实现这个效果:

1、首先就是要加载jQuery库文件:在<head></head>之间加载以下代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
如果你认为你的服务器比google更稳定快速,也可以下载到自己服务器上加载,一样效果。如果本身就已经加载过jQuery那就跳过此步骤。

2、实现代码:

<div id="linkpage">
<li><a href="http://www.rgblive.com" title="精彩生活BLOG" target=“_blank”>多彩的生活</a></li>
</div>
<script type="text/javascript">
//友情链接图标favicon
//下面的 #linkpage 要和开头的 <div id="linkpage">的名称对应起来
jQuery(document).ready(function($){ 
$("#linkpage a").each(function(e){
	$(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+" style=float:left;padding:5px;>");
}); 
});
</script>
注意看代码说明,jQuery中 #linkpage 要和开头的 <div id="linkpage">的名称对应;如果是 .linkpage 那开头就要是 <div class="linkpage">了。

这个代码中:jQuery遍历了所有id=“linkpage”下的a标签,然后在相对应a标签内添加img,src是GG服务器加对应a标签内的href主网址,并添加样式左浮动(即显示在左边)填充5px边距。

这个可以用到以此类推,用到所有的网页中实现。

具体到typecho中,如果你是手动添加友情链接,上面的代码可以直接使用,如果你像我一样用的是Hanny的友情链接插件,那么代码这样写:

<div id="linkpage">
<links></links><!--友情链接调用代码-->
</div>
<script type="text/javascript">
//友情链接图标favicon
//下面的 #linkpage 要和开头的 <div id="linkpage">的名称对应起来
jQuery(document).ready(function($){ 
$("#linkpage a").each(function(e){
	$(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+" style=float:left;padding:5px;>");
}); 
});
</script>
这样就可以实现typecho的友情链接加上favicon图标了,当然你可以修改样式文件显示成你喜欢的样子。

如果是wordpress的友情链接要加favicon图标,大致方法也类似。[整理自网络]

已有 4 条评论 »

  1. 很神奇!
    js太强大

    1. JS确实强大,可惜我自己不会

  2. 不喜欢加,拖慢速度

    1. 哈哈,所以就友情链接页面玩玩,呵呵

添加新评论 »

You must enable javascript to see captcha here!