Facebook Meta-Tags
in validem XHTML 1.1

Web-Development
Trackback-Link
Kevin Lieser, am 
07.05.2010

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.

HTML
  1. <meta property="og:title" content="The title of your page" />
  2. <meta property="og:site_name" content="The name of your web site" />
  3. <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.

Umsetzung in PHP
  1. <html>
  2. <head>
  3.      <?php
  4.      if($_SERVER['HTTP_USER_AGENT'] == 'facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)') { ?>
  5.           <meta property="og:title" content="The title of your page" />
  6.           <meta property="og:site_name" content="The name of your web site" />
  7.           <meta property="og:image" content="The URL of the best picture for this page" />
  8.      <?php } ?>
  9. </head>
  10. <body>
  11. ...
Umsetzung in TypoScript
   1: [useragent = facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)]
   2: page.headerData.15 = HTML
   3: page.headerData.15.value (
   4:       <meta property="og:title" content="The title of your page" />
   5:       <meta property="og:site_name" content="The name of your web site" />
   6:       <meta property="og:image" content="The URL of the best picture for this page" />
   7: )
   8: [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!

 
Trackback-Link
 

Trackbacks

KA Mediendesign - Kreativ-Blog
08.04.2012
 

Facebook Like Button XFBML in validem XHTML 1.1

Es ist wieder soweit. Eine neue und vielleicht letzte Version des beliebten Facebook Object Validation Scriptes ist verfügbar. Damit lassen sich XFBML Tags von Facebook (z.B. Like-Button) auch in XHTML 1.1 W3......

 

Kommentare & Teilen