Facebook Like-Button
Der Facebook "Gefällt mir"-Button erfreut sich zunehmender Popularität. Die Integration dieser Funktion in einen mit weblica erstellten Web-Auftritt ist rasch erledigt. Die folgende Anleitung erklärt, wie es geht.
Und so geht es:
Und so geht es:
- Legen Sie ein Feld an für die URL der Seite, auf der der Button angezeigt werden soll.
- Fügen Sie den Code ein auf der Seite für das Laden des nötigen Javascript-Codes von Facebook.
- Fügen Sie den Code für den "Gefällt mir"-Button an der gewünschten Stelle auf der Seite ein.
- Optional: passen Sie die Eigenschaften des Knopfs (Grösse, Beschriftung, etc.) an.
1. Ein Feld für die URL der Seite
Ersetzten Sie hierbei die Zeichenkette IhreDomain durch die WWW-Zieladresse Ihres Projekts; Sie finden diese in den Server-Einstellungen des Projekts.
Dieses Feld können Sie nun für jede Seite verwenden, um Facebook die Adresse, die sog. URL, der Seite mitzuteilen, für die die "Gefällt mir"-Angabe gezählt werden soll. Wie das geht, erfahren Sie gleich.
Dieses Feld können Sie nun für jede Seite verwenden, um Facebook die Adresse, die sog. URL, der Seite mitzuteilen, für die die "Gefällt mir"-Angabe gezählt werden soll. Wie das geht, erfahren Sie gleich.
2. Der nötige Javascript-Code für die Kommunikation mit Facebook
Damit Sie den "Gefällt mir"-Button und die von Facebook hierfür bereit gestellten Funktionen nutzen können, müssen Sie auf Ihrer Seite die folgenden Zeilen Javascript-Code einbinden. Wir verwenden hiefür wiederum ein Feld und nennen dieses fb.button.script:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Damit sind die nötigen Vorbereitungsschritte erledigt.
3. Den "Gefällt mir"-Button hinzu fügen
Jetzt können Sie den "Gefällt mir"-Button an der gewünschten Stelle einfügen. Der Code hierfür sieht wie folgt aus:
<div class="fb-like"
data-href="$(fb.page.url)"
data-send="true"
data-width="450"
data-show-faces="true"
data-font="verdana">
</div>
data-href="$(fb.page.url)"
data-send="true"
data-width="450"
data-show-faces="true"
data-font="verdana">
</div>
Diesen Code können Sie direkt in einem HTML-Absatz verwenden oder wiederum flexibler in einem Feld hinterlegen, das Sie dann auf allen Seiten verwenden, auf denen Sie den "Gefällt mir"-Button nutzen möchten.
Das Aussehen des Buttons anpassen: Die Einstellungsmöglichkeiten
Die Eigenschaften des Buttons können in einem gewissen Ausmass angepasst werden, die folgende Tabelle zeigt die einzelenen Parameter und deren Bedeutung:
Die Anzeige des "Gefällt mir"-Knopfs können Sie über verschiedene Parameter wie folgt steuern:
| Option |
Beschreibung |
Vorgabe |
| data-send |
Zusätzlich zum "Gefällt mir"-Button den "Senden"-Button von Facebook anbieten:
|
|
| data-width |
Breite der Anzeige in Pixel | '450' |
| data-show-faces | Profil-Bilder der Liker anzeigen:
|
'true' |
| data-font | Die Schrift für die Anzeige des Buttons. Folgende Optionen stehen zur Verfügung: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana' |
'lucida grande' |
| data-layout | Legt die gewünschte Anzeige fest:
|
'standard' |
| data-action | Die gewünschte Aktion. Momentan untersützt Facebook lediglich die beiden folgenden Optionen:
|
'like' |
| data-colorscheme | Das zu verwendende Farbschema. Aktuell bietet Facebook die beiden folgenden Varianten:
|
'light' |
Hinweis
Unter der folgenden URL finden Sie die Infos von Facebook zum "Like"-Button (in Englisch) und einen Generator, mit dem Sie den gewünschten Code auch selber generieren können: Facebook Reference: Like Button.