友情链接前自动获取ico小图标

jaysun

文章最后更新时间:2022年12月27日

很多网站友情链接前会加上一个ICO小图标,整体看起来非常的漂亮美观,而且是自动获取,非常方便,因为第三方API不能使用,换成了另一种方式获取。

123.webp.jpg

此API为远程实时获取并显示网站的Favicon.ico文件,美化网站外链显示效果。 

 

什么是Favicon?  


Favicon就是出现在浏览器地址栏左侧的那个小图标,也叫做网站头像。  


为什么要获取网站的favicon?


  我们给一个网站加上超链接时,如果在超链接的旁边再附带上这个网站的favicon图标,能够带来非常好的显示效果。


如何获取favicon?  


一般网站的favicon都存储在网站的根目录,并且命名为“favicon.ico”,所以我们可以先尝试直接获取这个文件,  如果获取失败,再尝试解析网站中的meta标签,从中读取favicon图标的url。  如果读取成功,就把相应的图标缓存在服务器,方便下次调用。


具体代码分享:


Github


此代码采用了缓存机制,即不用每次都从各个友情链接网站的代码里面去抓取,挺方便的,下载源代码,放在网站目录里,然后用你的网址替换上面的“https://f.ydr.me/”为“你的网址/目录/?url=


例如:我把下载的源代码上传到了网站的根目录,那么就将"https://f.ydr.me/"替换成"http://xxx.yiluxb.cn/get.php?url="  就可以了,当然,不想折腾和浪费服务器的资源最好用第三方网站,速度快而节省服务器的资源。


下来我们审查元素查看一下自己网站友情链接版块的id,忆路吧博客 友链版块的id为:links-home

然后将下面代码直接放在网站后台统计代码框中:

<script type="text/javascript">  $("#link-home li a,#linkcat-1 li a").each(function(e){    $(this).prepend("<img src=自己的域名"+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+">");
  });</script>


或者把代码中放入公用js文档中调用:

jQuery(document).ready(function($){  $("#link-home li a,#linkcat-1 li a").each(function(e){    $(this).prepend("<img src=自己的域名"+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+">");
  });});

注意:

1、修改友链版块的id为自己网站友链版块的id。

2、将代码中的网址替换为自己网站的网址。


隐藏内容
评论可见
前往评论


您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
评论列表 (暂无评论,309人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码