Einbau eines Facebook-Like-Buttons auf einer Webseite

Aus Tipps, Tricks und Anleitungen

Wechseln zu: Navigation, Suche
Wie kann ich einen Facebook-Like-Button auf einer Webseite einbauen einbauen?
Dieser Artikel beschreibt, wie man einen Facebook-Like-Button auf einer Webseite einbinden kann. Dabei handelt es sich um den prinzipiellen Einbau auf einer Seite, in deren Programmcode man sich gut auskennt. Insbesondere wird dabei auch eine 2-Klick-Möglichkeit beschrieben. Vor der Lektüre oder Umsetzung dieses Artikels empfiehlt sich der Artikel "Facebook-Like-Button auf Webseite einbauen", in dem es darum geht, welche Vorteile und Nachteile ein solcher Like-Button auf einer Webseite haben kann.


Inhaltsverzeichnis

Wichtige Hinweise

Die beschriebene Lösung enthält teilweise programmiertechnische Lösungen. Es wurde versucht, diese so genau wie möglich zu beschreiben, damit auch Laien sie durchführen können. Bitte lese Dir den Artikel erst einmal genau durch und entscheide dann, ob Du die Anleitung umsetzen willst. Auch garantiert die beschriebene 2-Klick-Lösung nicht automatisch Sicherheit vor rechtlichen Problemen. Die Beschreibung wurde nach bestem Wissen und Gewissen erstellt, allerdings wird keinerlei Haftung übernommen für irgendwelche Probleme, die trotz oder wegen der Anwendung der hier beschriebenen Methode auftreten. Wenn Du nicht sicher bist, ob du dieses Risiko eingehen möchtest, unterlasse bitte alle Änderungen und führe bitte keinen der genannten Schritte durch

Direkter Einbau

Facebook stellt den Code für den Einbau des Like-Buttons auf seiner Webseite zur Verfügung. Dazu bietet es ein Eingabeformular, in das man die Rahmendaten eintragen kann. Durch Klicken auf den "Get Code"-Button wird einem der zum Einbau nötige Code angezeigt, den man kopieren und an passender Stelle in die eigene Webseite einbauen muss. In dem Fenster mit dem angezeigten Code kann man zudem wählen, ob man den Button einbinden will als HTML5, XFBML oder als iframe. Letzteres hat den Vorteil, dass der Buttoncode ohne Javascript-Anteil auskommt. Bevor man den Code in der eigenen Webseite nutzt, sollte man jedoch in jedem Fall die Nutzungsbedingungen von Facebook zum Einsatz des Buttons lesen. Im Großen und Ganzen kann man vermuten, dass diese Bedingungen jedoch "fair" sind, da Facebook selbst ja ein Interesse an der Verbreitung des Buttons hat. Diese Vermutung allein entbindet einen jedoch nicht von der Verantwortung, die Facebook-Bedingungen zu lesen. Zu vermuten ist, dass Missbrauch oder Veränderungen des Buttons nicht in jedem Fall erlaubt sein werden.

2-Klick-Button

Der Einbau des Like-Buttons ist zum Teil auch mit Nachteilen behaftet, so dass es unter Umständen sinnvoll ist, den Button nicht direkt einzubinden, sondern ihn erst auf Anforderung des Nutzers nachzuladen. Die Nachladefunktion verwendet dabei Javascript, was jedoch auf den meisten Webservern funktioniert und auch von den meisten Benutzern verwendet wird. Wie in "Wichtige Hinweise" am Anfang des Artikels beschrieben, geschieht eine Umsetzung entsprechend dieses Artikels auf eigene Verantwortung. Falls die im Folgenden beschriebene Lösung den eigenen Ansprüchen nicht gerecht wird, kann man sich gegebenenfalls auch die Umsetzung von heise anschauen.

Funktionsweise

Der sichtbare Teil enthält einen Link (am Ende des Codes: <a> und </a>). Damit dieser anklickbar erscheint, verweist er auf eine Dummy-Adresse ("href="javascript:void(null)") - bewirkt also als Link keine Änderung. Der Zusatz "onclick="fblb()"" ruft jedoch die vor dem Link genannte Javascript-Funktionalität auf (zwischen <script> und </script>), die den Link verschwinden läßt und statt dessen einen Facebook-Button einblendet. Dieser Button wird auch erst in diesem Moment geladen. Beispiele für die Funktionsweise des Buttons findet man bei http://www.pooq.org, http://www.pooq.org/fyi und http://www.einsteigerwissen.de/index.php/Hauptseite.

Der Button-Code zwischen <iframe> und </iframe> entspricht einem von der oben genannten Facebookseite generierten Programmcode. Lediglich die Internetadresse innerhalb des Codes wurde geändert. Der Link, der vor dem Code sichtbar ist, enthält hingegen lediglich den Text "Facebook-Like-Button" und keinerlei Facebook-Bestandteile. Man sollte hier auch vermeiden, eine Facebook-Graphik zu verwenden, denn diese Grafiken sind im Zweifelsfall durch Facebooks Rechte geschützt und dürfen nicht ohne Weiteres benutzt werden. Das Facebook-Bild auf dem nachgeladenen Button wird jedoch von Facebook durch den Button-Code geschickt und kann darum verwendet werden.

Quellcode (statisch)

Der folgende Quellcode erstellt einen 2-Klick-Button, der eine feste Zieladresse verwendet. Diese Lösung wird also egal, wo sie eingebaut wird, immer nur die fest genannte Adresse (im Beispiel: "www.example.com" - diesen Textteil muss man entsprechen der gewünschten Webseite austauschen) "like-bar" machen: 

 <script>
 var giveback;
 function fblb ()
 {
   giveback = '<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&send=false&layout=
   button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" 
   frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>';
   document.getElementById('fblb').innerHTML=giveback;
 }
 </script>
 <a href="javascript:void(null)" id=fblb style="display:inline; width:140px; height:21px; color:#EEEEEE; text-align:center;" 
 onclick="fblb()">Facebook-Like-Button</a>

Script-Teil

Der Teil zwischen <script> und </script> definiert die Javascript-Funktionalität, die den Button bei Aufruf einblendet. Der Codeteil zwischen <iframe> und </iframe> entspricht dabei einem von der oben genannten Facebookseite generierten Programmcode.

HTML-Teil

Der HTML-Teil erzeugt den sichtbaren HTML-Link-Text für die Webseite.

Quellcode (dynamisch)

Der folgende Quellcode erstellt einen flexiblen 2-Klick-Button, der die Adresse der aktuellen Webseite automatisch berechnet und einsetzt. Dies ist praktisch, wenn man den Button auf sehr vielen Seiten einbinden möchte und die Zieladresse nicht jedesmal manuell anpassen will: 

 <script>
 var giveback;
 function fblb (www)
 {
   giveback = '<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2F' + www + '&send=false&layout=button_count
   &width=80&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0"
   style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>';
   document.getElementById('fblb').innerHTML=giveback;
 }
 </script>
 <?
   echo '<a href="javascript:void(null)" id=fblb style="display:inline; width:140px; height:21px; color:#EEEEEE; 
   text-align:center;" onclick="fblb('."'".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']."'".')">Facebook-Like-Button</a>';
 ?>

Script-Teil

Der Teil zwischen <script> und </script> definiert die Javascript-Funktionalität, die den Button bei Aufruf einblendet. Der Codeteil zwischen <iframe> und </iframe> entspricht dabei einem von der oben genannten Facebookseite generierten Programmcode. Lediglich die Zieladresse innerhalb des Codes wird durch den Baustein " + www + " dynamisch gestaltet.

HTML-Teil

Der HTML-Teil enthält eine PHP-Routine, die den HTML-Link-Text für die Webseite erzeugt. Der PHP-Bereich wird dabei durch <? und ?> definiert. Er erstellt lediglich den im statischen Teil beschriebenen HTML-Quellcode, wobei er die Linkadresse der aktuellen Seite automatisch generiert.

Verwandte Artikel

Dieser Artikel gehört zu folgenden Kategorien:  "Computer"



Neuen Artikel erstellen Diesen Artikel bearbeiten Rückmeldung geben
Von "http://www.web-fortbildung.de/wiki/index.php/Einbau_eines_Facebook-Like-Buttons_auf_einer_Webseite"
Persönliche Werkzeuge

Impressum