Um die Nutzung der Social Plugins von Facebook zu verbessern, kann man selber bestimmen, welches Bild Facebook als Miniaturbild nutzen soll. Dies geschieht über die Angabe von bestimmten Meta-Tags.
Diese sind nicht XHTML 1.1 valide. Dort kann aber nachgebessert werden, sodass der W3C-Validator nicht meckert.
Zusätzliche Meta-Angaben für Facebook, wie auf der Seite des Social Plugins „Like-Button“ zu sehen, zeigen Facebook beispielsweise welches Bild als Miniaturbild genutzt werden soll. Außerdem ist es möglich einen zusätzlichen Titel für die Seite anzugeben, den Facebook anstatt dem <title>-Tag nutzen soll.
Die folgenden, dort gezeigten Meta-Tags sind nicht XHTML valide.
<meta property="og:title" content="The title of your page" /> <meta property="og:site_name" content="The name of your web site" /> <meta property="og:image" content="The URL of the best picture for this page" />
Das Problem wird umgangen, indem wir diese Meta-Tags nur dann anzeigen lassen, wenn Facebook die Seite durchsucht. Dazu benötigen wir den Browser-Agent von Facebook.
Dieser lautet:facebookexternalhit/1.0 (+http://www.facebook.com/externalhit_uatext.php)
Update:
Nun lautet der Facebook Browser-Agent wie folgt:facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
Nun folgen zwei Beispiele für den Lösungsweg. Einmal für normale PHP-Seiten, einmal für TYPO3 per TypoScript.
<html>
<head>
<?php
if($_SERVER['HTTP_USER_AGENT'] == 'facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)') { ?>
<meta property="og:title" content="The title of your page" />
<meta property="og:site_name" content="The name of your web site" />
<meta property="og:image" content="The URL of the best picture for this page" />
<?php } ?>
</head>
<body>
...[useragent = facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)] page.headerData.15 = HTML page.headerData.15.value ( <meta property="og:title" content="The title of your page" /> <meta property="og:site_name" content="The name of your web site" /> <meta property="og:image" content="The URL of the best picture for this page" /> ) [global]
Nun sollte Facebook eure explizit bereitgestellten Informationen abrufen können und der W3C-Validator nichts mehr zu meckern haben.
Ist das Klasse?
Bis demnächst!
