Favicons von Webseiten auslesen und anzeigen mit PHP und Ajax
Favicons sind kleine, meist 16x16 oder 32x32 Pixel große Icons, die neben der Adresszeile im Browser angezeigt werden. Favicons sind dazu da, um Webseiten darüber identifizieren zu können. Wenn Besucher Links posten, wäre es also vielleicht nicht schlecht wenn direkt das Favicon der Webseite mit angezeigt würde. In diesem Artikel zeige ich, wie man mit Hilfe des Google Cache's Favicons zu den allermeisten Seiten auslesen kann.
Livedemo
Bevor es an die Entwicklung geht, werfen wir einen Blick auf das fertige Ergebnis. In das Textfeld kann eine beliebige Domain eingeben werden und das Favicon wird dann rechts daneben angezeigt.
Das HTML Markup
Das HTML Gerüst der Anwendung besteht aus einem div Container, in dem das Ergebnis der Anfrage dargestellt wird und einem Formular. Das Formular besteht wiederum aus einem Textfeld für die Domain und einem Button um das Ganze abzusenden.
<div id="result_holder"></div> <form id="getfavicon" method="get" action="includes/ajax_favicon.php"> <input type="text" name="url"/> <button type="submit" class="button">Anzeigen</button> </form>
So eine Eingabemaske ist jedoch nur ein Anwendungsfeld, es geht hier allgemein darum, wie man ein Favicon zu einer Webseite auslesen kann. Wir werden weiter unten sehen, was es sonst noch für Anwendungsmöglichkeiten gibt.
Javascript / jQuery
Das obige Formular wird per Ajax an den Server gesendet und die Antwort dann in den Container mit der id result_holder geschrieben.
(function($){
$(document).ready(function() {
$('#getfavicon').submit(function(){
var self = $(this);
var action = self.attr('action');
var form_data = self.serialize();
$.get(action, form_data, function(data) {
$('#result_holder').html(data);
});
return false;
});
});
})(jQuery);
An dieser kleinen Methode kann man auch schön sehen, wie man allgemein ein Formular mit jQuery und Ajax absenden kann.
Nun ist so ein Formular um Favicons auszulesen vielleicht nicht unbedingt ein geeigneter Anwendungsfall. In der Realität wäre es aber ganz schön, wenn Links direkt mit Favicons angezeigt würden. Es gibt jedoch auch gut Gründe, dies nicht bei jedem einzelnen Link zu tun. Ein prominentes Beispiel das diese Technik verwendet ist Youtube, zumindest wenn man das neue Cosmic Panda Design aktiviert hat. Dort werden alle Links eines Kanals mit dem entsprechenden Favicon angezeigt.
Um das Favicon automatisch zu einem Link hinzuzufügen, schreiben wir eine kleine Javascript Funktion. Per jQuery .each() wird jeder Anchor Tag auf der Seite durchlaufen und das href Attribut ausgelesen.
function setAchorFavicon() {
$('a').each(function(){
var self = $(this);
url = 'url='+self.attr('href');
$.get('includes/ajax_favicon.php', url, function(data) {
self.before(data);
});
});
}
setAchorFavicon();
Achtung, für jeden einzelnen Link wird ein eigener Ajax Request durchgeführt, das kann bei sehr vielen Links doch arg an die Performance der Seite gehen!.
Da wir gleich sehen werden, dass serverseitig nur eine URL zu den Favicons generiert wird, kann in diesem Fall auch gänzlich auf den Ajax Request verzichtet und alles direkt per Javascript umgesetzt werden.
function setAchorFavicon() {
$('a').each(function(){
var self = $(this);
var url = self.attr('href').replace(/http[s]?:\/\//gi, '');
url = 'http://www.google.com/s2/favicons?domain='+url;
self.before('<img src="'+url+'"/>');
});
}
Die Serverseite mit PHP
Nun fehlt noch die Serverseite die bisher nur eine Blackbox war, die halt funktioniert hat. Daran wird sich auch nicht viel ändern, da das Favicon nicht manuell von uns ausgelesen wird, sondern nur eine URL konstruiert wird, um auf das von Google gecachte Icon zuzugreifen.
function getFavicon($domain){
$domain = strtolower($domain);
$replace = array('http://', 'https://');
$domain = str_replace($replace, '', $domain);
$domain = urlencode($domain);
return 'http://www.google.com/s2/favicons?domain='.$domain;
}
Favicons aus dem Cache von Google zu laden hat Vorteile und Nachteile.
Vorteile
Schnelle Antwort, da Googleserver
Webseiten unabhängig, alle Icons laden gleich schnell/langsam
Einfach zu programmieren
Nachteile
Nicht alle Favicons im Cache (staticfloat.com z.B. nicht)
1. Cooles Blog update
2. Kann ich das auch nutzen wenn ich Links ausgeben? Also wenn ich eine Linkliste habe die FavIcons ausgelesen werden?
Dankö schon mal
hi,
ja klar im Prinzip brauchst du nur die Domain an die Google Cache URL dran zu hängen. Der Link ist dann ein Direktlink zum Icon.
http://www.google.com/s2/favicons?domain=1. Danke mache ich wenn Alenan wieder Online ist
2. Danke das du es so schnell beantwortet hast...
Eigentlich müsste auch sowas funktionieren:
$('a').each(function(){ $(this).before('<img src="'+this.href.split('/')[0]+'//'+this.href.split('/')[2]+'/favicon.ico" style="height:16px;width:16px" />'); });Ja das würde gehen aber eben unter der Voraussetzung, dass das Favicon auch unter der URL erreichbar ist.
Die Methode aus dem Artikel würde auch ohne Ajax funktionieren.
Mit error() könnte man das noch abfangen, falls es das Bild wirklich nicht gibt.
Das kann man auch alles ohne Google machen .
Ist nur mehr arbeit !!! :D