{{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 Plugins via eigener Facebook App=
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==
===Facebook App===
Auf der [http://www.facebook.com/developers/createapp.php Facebook Entwicklerseite] folgt man den Anweisungen von Facebook (siehe Bilder).

[[Datei:http://de.contaowiki.org/images/de/7/76/Fb-app-erstellen-001.jpg|miniatur|Facebook Ap erstellen #1]]

[[Datei:http://de.contaowiki.org/images/de/d/d6/Fb-app-erstellen-002.jpg|miniatur|Facebook Ap erstellen #2]]

[[Datei:http://de.contaowiki.org/images/de/6/65/Fb-app-erstellen-003.jpg|miniatur|Facebook Ap erstellen #3]]

===Abschluss (seitens Facebook)===
Nun haben wir unsere Facebook App erstellt und haben einige Informationen bekommen welche wir in Contao "verbauen" müssen - hier eine Übersicht mit allen benötigten Informationen.

<source lang="html4strict">
<meta property="fb:app_id" content="......"/> (Facebook App ID - siehe Bild X, Position Y)
<meta property="fb:admins" content=""/> (deiner Benutzer ID vo Facebook - siehe Bild X, Position Y)
</source>

Das wäre es vorerst von der Facebook Seite. Nun müssen wir das ganze in Contao einbauen.

==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>

zusätzlich habe ich noch folgende [http://developers.facebook.com/docs/opengraph/ Open Graph Tags] von Facebook in das Template eingetragen welche dann mit den vorhanden Informationen ausgestattet werden (vor </head> Abschluss)

<source lang="html4strict">
<meta property="og:title" content="<?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?>"/>
<meta property="og:type" content="blog"/> (Art der Seite - blog, news, ...)
<meta property="og:site_name" content="..."/> (Seitenname)
<meta property="og:description" content="<?php echo $this->description; ?>"/>
</source>

===Seitenlayout===
Bevor wir die anderen [[Templates_bearbeiten|Templates]] bearbeiten sollte das Seitenlayout mit den Facebook Informationen (Punkt 2.X.X) befüllt werden.

'''Zusätzliche <head>-Tags'''
<source lang="html4strict">
<meta property="fb:app_id" content="......"/> (Facebook App ID - siehe Bild X, Position Y)
<meta property="fb:admins" content=""/> (deiner Benutzer ID vo Facebook - siehe Bild X, Position Y)
</source>

'''Eigener JavaScript-Code'''
<source lang="html4strict">

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
<![CDATA[//><!]]>
</script>

</source>

===absolute Pfade für die Bilder via Modul===
Wenn eine Seite auf Facebook "geteilt" wird besteht die Möglichkeit ein Thumbnail auszuwählen. Facebook benötigt dazu, damit man ein Bild auswählen kann, absolute Pfade.
Dazu benötigen wir das Modul "wna_facebook" ([http://contao.silvanogiacomello.ch/module/wna_facebook/wna_facebook.zip Download hier]) (ist <s>noch</s> nicht im ER!).
Sobald das Modul hochgeladen wurde, ist es aktiv und Du kannst, wenn Du einen Link bei Facebook teilst, das Thumbnail auswählen.

====Installation====
Sobald Du die folgenden Anpassungen ([http://de.contaowiki.org/Facebook#Anpassungen_in_der_Datei_MyFacebookHack.php 2.2.3.2 Anpassungen in der Datei MyFacebookHack.php]) getätigt hast, lade den komletten Ordner "wna_facebook" in deine Contao Installation unter ''system/modules'' hoch.

====Anpassungen in der Datei MyFacebookHack.php====
Folgende Anpassungen musst Du machen damit das Modul funktioniert

'''Falls Du nicht das fe_page Template benutzt abändern'''
<source lang="html4strict">if ($strTemplate != 'fe_page')
</source>

'''Falls Du den Ordner (tl_files) unbenannt hast'''
<source lang="html4strict">$arrSearch = array ( '="tl_files/', );
</source>

====Überprüfung der Funktion====
Am einfachsten kannst Du die Thumbnail Funktion (resp. das Modul) überprüfen in dem Du den [http://developers.facebook.com/tools/lint/ URL Linter] von Facebook verwendest. Eine URL eintragen und bei der Überprüfung sollte bei "Image" ein Bild angezeigt werden.

==Facebook Kommentar Plugin==
===Code===
<source lang="html4strict">
(...)
<?php endif; ?>

<fb:comments href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" num_posts="10" width="600"></fb:comments>

</div>
</source>

schauen wir das Kommentar Plugin etwas genauer an

{| border="1" cellspacing="0" cellpadding="5"
! Code !! Beschreibung
|-
| <source lang="html4strict"><fb:comments href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" (...)</source> || Pfad respektive Internetadresse der Seite welche als Link erscheint (auf dem eigenen Facebook Profil - Pinwand) wenn ein Kommentar geschrieben wurde (und die Option "Post to Facebook" aktivier ist beim Kommentarfeld)
|-
| <source lang="html4strict">
(...) num_posts="10" (...)
</source> || wie viele Beiträge sollen als Standart angezeigt werden. Es wird am Ende eine "Box" angezeigt um alle vorhandenen Kommentare anzuzeigen.
|-
| <source lang="html4strict">
(...) width="600"></fb:comments>
</source> || Die Breite des kompletten Plugins
|}

===komplettes Nachrichrichtenleser [[Templates_bearbeiten|Template]] mit Kommentar Plugin===
<source lang="html4strict">
<div class="layout_full block<?php echo $this->class; ?>">

<a href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" title=""><h1><?php echo $this->newsHeadline; ?></h1></a>
<?php if ($this->hasMetaFields): ?>

<p class="info"><?php echo $this->date; ?> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p>
<?php endif; ?>
<?php if ($this->hasSubHeadline): ?>

<h2><?php echo $this->subHeadline; ?></h2>
<?php endif; ?>

<div class="ce_text">
<?php if (!$this->addBefore): ?>

<?php echo $this->text; ?>
<?php endif; ?>
<?php if ($this->addImage): ?>

<div class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>>
<?php if ($this->href): ?>
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">
<?php endif; ?>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
<?php if ($this->href): ?>
</a>
<?php endif; ?>
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($this->addBefore): ?>

<?php echo $this->text; ?>
<?php endif; ?>

</div>
<?php if ($this->enclosure): ?>

<div class="enclosure">
<?php foreach ($this->enclosure as $enclosure): ?>
<p><img src="<?php echo $enclosure['icon']; ?>" width="18" height="18" alt="<?php echo $enclosure['title']; ?>" class="mime_icon" /> <a href="<?php echo $enclosure['href']; ?>" title="<?php echo $enclosure['title']; ?>"><?php echo $enclosure['link']; ?> <span class="size">(<?php echo $enclosure['filesize']; ?>)</span></a></p>
<?php endforeach; ?>
</div>
<?php endif; ?>

<fb:comments href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" num_posts="10" width="600"></fb:comments>

</div>
</source>

====Anpassungen im [[Templates_bearbeiten|Template]] für deine Seite ====
folgende Stellen musst Du im Code auf deine Seite anpassen

<source lang="html4strict">
<a href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" title=""><h1><?php echo $this->newsHeadline; ?></h1></a></source>

<source lang="html4strict">
<fb:comments href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" num_posts="10" width="600"></fb:comments></source> (siehe [http://de.contaowiki.org/Facebook#Code_2 2.4.1 Code] für Erklärung der Optionen)

==Like resp. Send Plugin==
===Code===
<source lang="html4strict">
(...)
<h1><?php echo $this->newsHeadline; ?></h1>
<?php if ($this->hasMetaFields): ?>

<p class="info"><?php echo $this->date; ?> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p>
<?php endif; ?>
<?php if ($this->hasSubHeadline): ?>

<h2><?php echo $this->subHeadline; ?></h2>
<?php endif; ?>

<fb:like href="http://domain-zur-contao-installation.tld<?php echo $this->link; ?>" send="true" width="450" show_faces="false" font=""></fb:like>

<div class="ce_text">
<?php if (!$this->addBefore): ?>
(...)
</source>

schauen wir die Like resp. Send Funktion etwas genauer an

{| border="1" cellspacing="0" cellpadding="5"
! Code !! Beschreibung
|-
| <source lang="html4strict"><fb:like href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" (...)</source> || Pfad respektive Internetadresse der Seite welche "geliked" und/oder "gesendet" werden soll - direkte Adresse zum Beitrag
|-
| <source lang="html4strict">
(...) send="true" (...)
</source> || soll neben "Like" auch die "Send" Funkton aktiviert sein
|-
| <source lang="html4strict">
(...) width="450"> (...)
</source> || Breite des ganzen Facebook Plugin in Pixel
|-
| <source lang="html4strict">
(...) show_faces="false" (...)
</source> || Ob bei einem "like" das Profilbild des jeweiligen "likers" angezeigt werden soll
|-
| <source lang="html4strict">
(...) font=""></fb:like>
</source> || Schriftart des Facebook Plugins. Folgende Schriftarten werden seitens Facebook unterstützt: arial, lucida grande, segoe ui, tahoma, trebuchet ms, verdana
|}

===komplettes Nachrichrichtenleser [[Templates_bearbeiten|Template]] mit Like Plugin===
<source lang="html4strict">
<div class="layout_full block<?php echo $this->class; ?>">

<a href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" title=""><h1><?php echo $this->newsHeadline; ?></h1></a>
<?php if ($this->hasMetaFields): ?>

<p class="info"><?php echo $this->date; ?> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p>
<?php endif; ?>
<?php if ($this->hasSubHeadline): ?>

<h2><?php echo $this->subHeadline; ?></h2>
<?php endif; ?>

<fb:like href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" send="true" width="450" show_faces="false" font=""></fb:like>

<div class="ce_text">
<?php if (!$this->addBefore): ?>

<?php echo $this->text; ?>
<?php endif; ?>
<?php if ($this->addImage): ?>

<div class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>>
<?php if ($this->href): ?>
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">
<?php endif; ?>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
<?php if ($this->href): ?>
</a>
<?php endif; ?>
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($this->addBefore): ?>

<?php echo $this->text; ?>
<?php endif; ?>

</div>
<?php if ($this->enclosure): ?>

<div class="enclosure">
<?php foreach ($this->enclosure as $enclosure): ?>
<p><img src="<?php echo $enclosure['icon']; ?>" width="18" height="18" alt="<?php echo $enclosure['title']; ?>" class="mime_icon" /> <a href="<?php echo $enclosure['href']; ?>" title="<?php echo $enclosure['title']; ?>"><?php echo $enclosure['link']; ?> <span class="size">(<?php echo $enclosure['filesize']; ?>)</span></a></p>
<?php endforeach; ?>
</div>
<?php endif; ?>

</div>
</source>

====Anpassungen im [[Templates_bearbeiten|Template]] für deine Seite ====
folgende Stellen musst Du im Code auf deine Seite anpassen

<source lang="html4strict">
<a href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" title=""><h1><?php echo $this->newsHeadline; ?></h1></a></source>

<source lang="html4strict">
<fb:like href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" send="true" width="450" show_faces="false" font=""></fb:like></source> (siehe [http://de.contaowiki.org/Facebook#Code 2.3.1 Code] für Erklärung der Optionen)

==andere Facebook Plugins===
Ich gehe nicht weiter auf das Einbinden der Plugins ein - die obigen beiden Beispiele sollten reichen - daher wird ab hier (Punkte X.X) nur noch der Facebook Code gezeigt.
===Facebook Send Plugin===
====Code====
<source lang="html4strict">
<fb:send href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" font=""></fb:send>
</source>

schauen wir das Kommentar Plugin etwas genauer an

{| border="1" cellspacing="0" cellpadding="5"
! Code !! Beschreibung
|-
| <source lang="html4strict"><fb:send href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" (...)</source> || Pfad respektive Internetadresse der Seite welche als Link erscheint (in der Nachricht)
|-
| <source lang="html4strict">
(...) font=""></fb:send>
</source> || Schriftart des Facebook Plugins. Folgende Schriftarten werden seitens Facebook unterstützt: arial, lucida grande, segoe ui, tahoma, trebuchet ms, verdana
|}
===weitere Plugins===
Das Einbinden sowie der Code der Facebook Plugins sind untereinander sehr identisch - daher verzichte ich darauf, alle Facebook Plugins hier zu erwähnen. Es gibt noch weitere [https://developers.facebook.com/docs/plugins/ Facebook Plugins].

[https://developers.facebook.com/docs/reference/plugins/like/ Like Button], [https://developers.facebook.com/docs/reference/plugins/send/ Send Button], [https://developers.facebook.com/docs/reference/plugins/comments/ Comments], [https://developers.facebook.com/docs/reference/plugins/activity/ Activity Feed], [https://developers.facebook.com/docs/reference/plugins/recommendations/ Recommendations], [https://developers.facebook.com/docs/reference/plugins/like-box/ Like Box], [https://developers.facebook.com/docs/reference/plugins/facepile/ Faccepile], [https://developers.facebook.com/docs/reference/plugins/live-stream/ Live Stream]

Die Plugins [https://developers.facebook.com/docs/plugins/registration/ Registration] und [https://developers.facebook.com/docs/reference/plugins/login/ Login Button] werden in diesem Wiki Eintrag nicht erwähnt, da diese nicht "einfach so" eingebunden werden können.

=andere Facebook Plugins (ohne eigene Facebook App)=
==Facebook Like Button==
Wie man generell einen Likebutton integriert findet man in den [http://developers.facebook.com/docs/reference/plugins/like/ Facebook Developer Docs]. Aber um diesen Button '''korrekt''' einzubinden benötigt man ein wenig mehr, sogenannte [http://developers.facebook.com/docs/opengraph/ Open Graph Tags], 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>

Es empfiehlt sich 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 [http://www.contao.org/inserttags.html Inserttags] 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 das Readertemplate (per Default news_full.tpl).

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

Damit wird das 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 man mit dem [http://developers.facebook.com/tools/lint/ Linter] testen wie Facebook die Seite parsen würde.

Einen Diskussionsbeitrag im Forum findet man [http://www.contao-community.de/showthread.php?18218-Ausgaben-im-Headbereich-Meta-Tags-f%FCr-Facebook&p=130301 hier].

Datei:Fb-app-erstellen-003.jpg

2011-05-25T21:53:52Z

Silvano:

Datei:Fb-app-erstellen-002.jpg

2011-05-25T21:51:53Z

Silvano:

2011-05-11T10:07:49Z

Silvano:

== '''Diese Anleitung befindet sich im Aufbau!''' ==

== 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 kannst Du, sofern Du dich als "Entwickler" bestätigt hast (kann via SMS vorgenommen werden), mit deinem Facebook Benutzerprofil erstellen.

=== Facebook App ===
Geh auf die Internetseite [http://www.facebook.com/developers/createapp.php] und folge den Anweisungen von Facebook (siehe Bilder)

BILDER, BILDER, BILDER

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

=== "fe_page.tpl" ===
Beim Template sollte der Doctype angepasst werden (u.a wegen Internet Explorer). Dazu erstellst Du via BE ein neues "fe_page.tpl" Template. Nennen kannst Du es wie Du willst - im Beispiel verwende ich "fe_page_facebook.tpl".

''<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">''

muss geändert werden zu

''<?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/">''

Facebook

2011-05-11T10:03:25Z

Silvano: