Add Favicon for Links

August 25th, 2010 at 12:01am Jason 96 views

This is a interesting function, that we can add the favicon for the links on our website, like the friend links page…if you dont know what favicon is, plz visit http://en.wikipedia.org/wiki/Favicon

there is also a plugin named FAVORITE ICON But in this post i just want to show you how to add it just by a few lines codes:

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
jQuery(document).ready(function($){
 
$(".linkp 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>

It will get the website favicon by using Google.

Where should I put it?
Well, you know, its kind of jQuery, just put the codes on the page where you want to show the effect, and dont forget to load the jQuery first(codes below):

1

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

How does it work?
It will get all the

<a ...>

in the

class=“linkp”

(dont forget to change the codes .linkp a), and add img following the

<a ...>

like

<a ...><img src=...>

and add the style float:left;padding:5px

That’s it! enjoy!

Entry Filed under: WordPress Tagged with: blog code html JS PHP website wordpress

Share This Post 丨 Subscribe 丨  Print This Post 丨 Save As PDF