本文作者:非李莫属

友情链接前面自动获取并添加favicon.ico小图标推荐

非李莫属 5个月前 ( 01-15 ) 1247 18条评论
摘要: 之前看到可风博客底部友情链接都加了ico小图标,感觉很新颖,很好看。于是乎我也开始折腾,我不想每次添加友情链接的时候都得手动的去添加ico图标的小链接,浪费时间,然后就百度了以下,...

之前看到可风博客底部友情链接都加了ico小图标,感觉很新颖,很好看。于是乎我也开始折腾,我不想每次添加友情链接的时候都得手动的去添加ico图标的小链接,浪费时间,然后就百度了以下,还真有教程,然后我就搬过来了,当然,文章版权还是要保留的,尊重别人的劳动成果。自动添加img标签代码如下:

友情链接.jpg

直接放在网站代码里:

<script type="text/javascript">
  $("#link-home li a,#linkcat-1 li a").each(function(e){
    $(this).prepend("<img src=https://f.ydr.me/"+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=https://f.ydr.me/"+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+">");
  });
});

哪种方式都都可以,看自己的习惯吧。

其中:“#link-home li a”是友情链接的ID(也可以换成class名,具体需要查看你网站的写法)

比如“锦鲤”主题的写法就是ID:“link-home”(很简单)

给友情链接自动添加<img>标签已经完成了,此教程转载自:秋叶个人博客

锦鲤主题可以直接使用,无需修改!

以上是采用第三方网站“https://f.ydr.me/”获取ico下图标的,直接放在网页里面就行了。

如果你不喜欢用第三方图标那么就自己折腾吧,附上PHP源代码(代码链接:Github

此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.talklee.com/get.php?url="  就可以了,当然,不想折腾和浪费服务器的资源最好用第三方网站,速度快而节省服务器的资源。

接下来就是你的表演时间~~~

文章版权及转载声明:

作者:非李莫属本文地址:https://www.talklee.com/blog/378.html发布于 5个月前 ( 01-15 )
文章转载或复制请以超链接形式并注明出处李洋个人博客

分享到:
赞(9

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

【数字生态,钜惠来袭】云服务器限时秒杀,首购1核1G 99元/年

发表评论

快捷回复:

评论列表 (有 18 条评论,1247人围观)参与讨论
网友昵称:小虎博客
小虎博客 游客2019-06-199楼 回复
https://f.ydr.me网站挂了,Favicon.ico小图标空白
网友昵称:非李莫属
非李莫属 博主2019-06-20 回复
@小虎博客 恩,那就只能用本地得啦。
网友昵称:哈哈
哈哈 游客2019-06-108楼 回复
赞、狂赞、超赞、不得不赞、史上最赞!emmmmm。。看不懂怎么破?文章不错,写的很好!
网友昵称:非李莫属
非李莫属 博主2019-06-11 回复
@哈哈 谢谢支持
网友昵称:315219759
315219759 游客2019-06-077楼 回复
文章不错,写的很好!锦鲤主题放在主题配置 网站底部就能用
网友昵称:非李莫属
非李莫属 博主2019-06-10 回复
@315219759 对的
网友昵称:情感咨询
情感咨询 游客2019-03-056楼 回复
装饰,挺好的不过那么单调
网友昵称:非李莫属
非李莫属 博主2019-03-06 回复
@情感咨询 谢谢!
网友昵称:纯像seo
纯像seo 游客2019-03-02地板 回复
好像有插件就可以
网友昵称:非李莫属
非李莫属 博主2019-03-04 回复
@纯像seo 有么?还真没看见这个插件,
网友昵称:博客导航
博客导航 游客2019-02-27凉席 回复
可以试一下这种方法
网友昵称:非李莫属
非李莫属 博主2019-02-28 回复
@博客导航 真的可以有。
网友昵称:1006.CO
1006.CO 游客2019-02-25板凳 回复
方法不错,支持下
网友昵称:非李莫属
非李莫属 博主2019-02-25 回复
@1006.CO 谢谢支持。
网友昵称:彭先生博客
彭先生博客 游客2019-01-31椅子 回复
感谢分享!!!文章不错,写的很好!赞、狂赞、超赞、不得不赞、史上最赞!
网友昵称:非李莫属
非李莫属 博主2019-02-02 回复
@彭先生博客 谢谢支持!
网友昵称:鸟叔
鸟叔 游客2019-01-15沙发 回复
挺好的方法
网友昵称:非李莫属
非李莫属 博主2019-01-15 回复
@鸟叔 嗯嗯,是的呢