Website-logo bij externe hyperlinks
Google biedt een service om van een website de favicon.ico als PNG-afbeelding weer te laten geven:
http://s2.googleusercontent.com/s2/favicons?domain_url=<domeinnaam>
Bijvoorbeeld:
http://s2.googleusercontent.com/s2/favicons?domain_url=http://www.site-supply.nl/ =
Met behulp van wat css en javascript kunnen daarmee alle externe urls op een website worden voorzien van een icoontje.
Het cms geeft alle externe hyperlinks automatisch de class name 'xcms_external' mee:
<a href="http://www.google.com" class="xcms_external">Google</a>
Met de volgende css krijgen alle externe hyperlinks een standaard icoontje (
a.xcms_external {
padding-left: 18px;
background: url('http://s2.googleusercontent.com/s2/favicons') left center no-repeat;
}
En met de volgende javascript zorgen we er vervolgens voor dat alle hyperlinks hun eigen icoontje krijgen:
var a = document.getElementsByClassName("xcms_external");
for (var i = 0; i < a.length; i++) {
a[i].style.backgroundImage = "url(http://s2.googleusercontent.com/s2/favicons?domain_url=" + escape('http://' + a[i].host) + ")";
}
Het resultaat: