Contao Community Documentation - Benutzerbeiträge [de]

Facebook

2011-05-19T09:50:04Z

Frank Berger: /* Facebook Like Button */

{{stub}}
[[Category:Admin HOWTOS]]
=Einleitung=
Diese Anleitung soll dazu dienen, Facebook Plugins (Kommentare, Share, Like, ...) in eine Contao Seite einzubauen. Die Beispiele basieren auf dem Nachrichtensystem von Contao (kann jedoch auch einfach auf ein anderes Modul geändert werden - e.g Events).

=Facebook=
Zuerst muss auf Facebook eine sog. Facebook App erstellt werden - diese kann man, sofern man sich als "Entwickler" bestätigt hat (kann via SMS vorgenommen werden), mit seinem Facebook Benutzerprofil erstellen.

==Facebook App==
Auf der [http://www.facebook.com/developers/createapp.php Facebook Entwicklerseite] folgt man den Anweisungen von Facebook (siehe Bilder).

BILDER, BILDER, BILDER

==Facebook Like Button==
Wie man generell einen Likebutton integriert findet ihr unter http://developers.facebook.com/docs/reference/plugins/like/. Aber um diesen Button '''korrekt''' einzubinden benötigt man ein wenig mehr, sogenannte Open Graph Tags (http://developers.facebook.com/docs/opengraph/) die im Headbereich eingebunden werden. Diese Angaben liefern Facebook die gewünschten Informationen. So kann man die Darstellung auf Facebook gut kontrollieren.

'''Folgende Werte sind quasi Pflichtangaben.'''
<source lang="html4strict">
<meta property="og:title" content=""/>
<meta property="og:type" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:image" content=""/>
<meta property="fb:admins" content=""/> (Benutzer IDs von Admins der Fanpage) oder <meta property="fb:app_id" content=""/>
</source>

Ich empfehle grundsätzlich immer auch noch description mitzugeben.
<source lang="html4strict">
<meta property="og:description" content=""/>
</source>

Alle Felder bis auf og:image können im Seitentemplate leicht via Inserttags (http://www.contao.org/inserttags.html) befüllt werden. Aber gerade beim Imagetag ist es wichtig korrekt zu befüllen, da Facebook sonst irgendein Bild der Seite, meistens das Falsche, oder auch gar keins nimmt. Beide Fälle sind nicht sonderlich schön. Man muss also aus den globalen Variablen das Vorschaubild z.B. für News auslesen.

Folgender Code muss ganz oben in Euer Readertemplate z.B. news_full.tpl

<source lang="php">
<?php $GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="{{env::url}}/'.$this->singleSRC.'" />'; ?>
</source>

Damit wird Euer Bild, welches bei der News im Backend gewählt wurde, als Thumbnail für Facebook ausgegeben.

Das Ganze funktioniert übrigens auch bei allen anderen Readertemplates z.B. Catalog. In diesem Fall kann der Pfad zur Bildvariable anders sein. Dies kann man aber in der Ausgabe von $globals nachsehen.

Am Ende könnte hier mit dem Linter (http://developers.facebook.com/tools/lint/) testen wie Facebook Eure Seite parsen würde.

Beitrag im Forum: http://www.contao-community.de/showthread.php?18218-Ausgaben-im-Headbereich-Meta-Tags-f%FCr-Facebook&p=130301

=Contao CMS=
Damit die Facebook Plugins richtig eingebunden werden können, müssen Templates angepasst und das Seitenlayout erweitert werden.

==fe_page.tpl==
Beim Template sollte der Doctype angepasst werden (u.a wegen Internet Explorer). Dazu [[Templates_bearbeiten|erstellt]] man im Backend ein neues "fe_page.tpl" Template. Der Name ist frei wählbar, muss jedoch mit ''fe_'' beginnen - in diesem Beispiel wird das Template "fe_page_facebook.tpl" benannt.
<source lang="php">
<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
</source>
muss geändert werden zu
<source lang="php">
<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?> xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://developers.facebook.com/schema/">
</source>

Facebook

2011-05-19T09:34:53Z

Frank Berger: HowTo Facebook Like Button

{{stub}}
[[Category:Admin HOWTOS]]
=Einleitung=
Diese Anleitung soll dazu dienen, Facebook Plugins (Kommentare, Share, Like, ...) in eine Contao Seite einzubauen. Die Beispiele basieren auf dem Nachrichtensystem von Contao (kann jedoch auch einfach auf ein anderes Modul geändert werden - e.g Events).

=Facebook=
Zuerst muss auf Facebook eine sog. Facebook App erstellt werden - diese kann man, sofern man sich als "Entwickler" bestätigt hat (kann via SMS vorgenommen werden), mit seinem Facebook Benutzerprofil erstellen.

==Facebook App==
Auf der [http://www.facebook.com/developers/createapp.php Facebook Entwicklerseite] folgt man den Anweisungen von Facebook (siehe Bilder).

BILDER, BILDER, BILDER

==Facebook Like Button==
Wie man generell einen Likebutton integriert findet ihr unter http://developers.facebook.com/docs/reference/plugins/like/. Aber um diesen Button '''korrekt''' einzubinden benötigt man ein wenig mehr, sogenannte Open Graph Tags (http://developers.facebook.com/docs/opengraph/) die im Headbereich eingebunden werden. Diese Angaben liefern Facebook die gewünschten Informationen. So kann man die Darstellung auf Facebook gut kontrollieren.

'''Folgende Werte sind quasi Pflichtangaben.'''
<source lang="html4strict">
<meta property="og:title" content=""/>
<meta property="og:type" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:image" content=""/>
<meta property="fb:admins" content=""/> oder <meta property="fb:app_id" content=""/>
</source>

Ich empfehle grundsätzlich immer auch noch description mitzugeben.
<source lang="html4strict">
<meta property="og:description" content=""/>
</source>

Alle Felder bis auf og:image können im Seitentemplate leicht via Inserttags (http://www.contao.org/inserttags.html) befüllt werden. Aber gerade beim Imagetag ist es wichtig korrekt zu befüllen, da Facebook sonst irgendein Bild der Seite, meistens das Falsche, oder auch gar keins nimmt. Beide Fälle sind nicht sonderlich schön. Man muss also aus den globalen Variablen das Vorschaubild z.B. für News auslesen.

Folgender Code muss ganz oben in Euer Readertemplate z.B. news_full.tpl

<source lang="php">
<?php $GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="{{env::url}}/'.$this->singleSRC.'" />'; ?>
</source>

Damit wird Euer Bild, welches bei der News im Backend gewählt wurde, als Thumbnail für Facebook ausgegeben.

Das Ganze funktioniert übrigens auch bei allen anderen Readertemplates z.B. Catalog. In diesem Fall kann der Pfad zur Bildvariable anders sein. Dies kann man aber in der Ausgabe von $globals nachsehen.

Am Ende könnte hier mit dem Linter (http://developers.facebook.com/tools/lint/) testen wie Facebook Eure Seite parsen würde.

Beitrag im Forum: http://www.contao-community.de/showthread.php?18218-Ausgaben-im-Headbereich-Meta-Tags-f%FCr-Facebook&p=130301

=Contao CMS=
Damit die Facebook Plugins richtig eingebunden werden können, müssen Templates angepasst und das Seitenlayout erweitert werden.

==fe_page.tpl==
Beim Template sollte der Doctype angepasst werden (u.a wegen Internet Explorer). Dazu [[Templates_bearbeiten|erstellt]] man im Backend ein neues "fe_page.tpl" Template. Der Name ist frei wählbar, muss jedoch mit ''fe_'' beginnen - in diesem Beispiel wird das Template "fe_page_facebook.tpl" benannt.
<source lang="php">
<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
</source>
muss geändert werden zu
<source lang="php">
<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?> xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://developers.facebook.com/schema/">
</source>