友情链接获取Favicon图标

笔记
4998 5

Favicon,就是网址前的那个小图标,在我这个博客可以看到效果。

获取Favicon图标实现原理: 

获得每个友情链接的地址,提取出域名部分,提交给 Google,Google 返回的就是一个16×16的 PNG 图片,对于没有被 Google 缓存 Favicon 的网站,会得到一个小地球的蓝色图标。

  这个是在网上找到的,是通过JQuery来实现自动获取的。JQuery,网上常见的有google的和新浪的,但试了多次,都没有成功。后来看到这篇文章,才见到效果。

Typecho 友情链接获取Favico图标的具体方法如下:

  1.先检查自己的Typecho博客主题是否有加载jQuery库,通常是在header.php文件的<head></head>之间,如果没有就把下面代码添加到<head></head>之间

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  2.到Typecho后台创建一个友情链接页面,如果你安装了编辑器插件,请切换到html模式,然后粘贴下面的代码:

<div id="youlian">  
<li><a href="http://友链.com" target="_blank">名字</a></li>  
<li><a href="http://友链.com" target="_blank">名字</a></li  
<li><a href="http://友链.com" target="_blank">名字</a></li>  
<!--按以上格式循环添加;如果你用了Hanny的友情链接插件,那么上面一段li可以替换成<links></links>-->  
<script type="text/javascript"> ///友情链接图标favicon  
jQuery(document).ready(function($){ $("#youlian li a").each(function(e){  
$(this).prepend("<img src=http://g.soz.im/http://"+this.href.replace
(/^(http:\/\/[^\/]+).*$/, '$1').replace
( 'http://', '')+" style=float:left;padding:5px;>"); }); }); 
</script> 

  当然,你也可以制作一个模板来实现。需要注意的是,中间有几个地方得要替换下,首先就是你要添加ico的标签属性,也就是class啦,当然id也是可以。
在上面的代码里找到< div id="youlian">和 #youlian li a,换成任何你自己设置的就行。

  3.保存文件,刷新友情链接的页面,是显示了友情链接网站的Favicon图标吧!!

注:其中要特别感谢:ben-labEffie'sGetFavicon

最后更新 2017-12-18
评论 ( 5 )
OωO
隐私评论
  1. 不错 不错,尹先生是一位极简主义者,表示暂时不用=-=我先收藏了

    8年前新疆昌吉州回复
  2. 路过

    9年前山东省淄博市回复
    1. @JOO

      兄弟,常来啊!

      9年前甘肃省庆阳市回复
  3. 小F

    天呐我竟然看到了我的博客QAQ
    那个,前几天我把域名更改了下。前缀的blog变成note了……
    (我还在震惊当中……)

    9年前日本回复
    1. @小F

      还真没注意到,已经做了更改。

      9年前甘肃省庆阳市回复