Facebook Share-Button einbinden
Laut aktuellen Zugriffszahlen scheinen die Suchanfragen, welche sich mit dem Einbinden des Facebook Share-Buttons auseinandersetzen nicht abzureißen. Und das obwohl der alte Button eigentlich durch den flexiblen Like-Button abgelöst werden sollte. Wer sich also immer noch fragt, wie man den Facebook Share-Button einbinden kann ohne dafür extra ein PlugIn zu nutzen, dem soll geholfen werden. Im Grunde genommen brauchen wir nicht viel um den Button erfolgreich, und in wenigen Schritten in ein WordPress-Theme einzubinden. Facebook selbst stellt eigentlich schon das Snippet für den Button in der Developer-Sektion (Seit Anfang des Jahres 2011 befindet sich keine Dokumentation mehr für den Share-Button innerhalb Facebook, auch das Snippet des Sharers ist nicht mehr aufzufinden. Es hat momentan den Anschein, dass Facebook komplett vom Share auf den Like-Button wechseln will.) von Facebook. Dennoch scheint immer noch einiges an Bedarf zu dem Thema da draußen zu existieren.
Der Share-Button Code
Theoretisch genügt es uns, dass Snippet des Share-Buttons zu kopieren und in einem beliebigen Div-Container auf unserer Seite einzubinden. Der ursprüngliche Code sieht wie folgt aus:
<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php"> Share</a> <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"> </script>
Jedoch ist dieser Button noch der statischste von allen Variationen und besteht lediglich aus einem Standard-Icon von Facebook plus dem Wort “Teilen”. Zudem teilt diese Variante lediglich die Top-Level-Domain, welche unter href=” ” angegeben wurde. Da wir aber den Share-Button auf jeder Unterseite einbinden wollen müssen wir den Code ein wenig anpassen. Im Falle der Einbindung für WordPress würde der Code des Share-Buttons wie folgt geändert:
<a type="button" share_url="<?php the_permalink();?>&t=<?php the_title(); ?>" href="http://www.facebook.com/sharer.php">Teilen</a> <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"> </script>
UPDATE: Ich hatte in letzter Zeit immer wieder ein paar Probleme mit der Darstellung des Buttons was den angepassten Code angeht, sofern der bei euch nicht funktionieren sollte, versucht einfach den ersten unangepassten Button!
Wie von WordPress gewohnt übergeben wir einfach die Platzhalter für den jeweiligen Permalink <?php the_permalink();?> und den Title der Seite <?php the_title(); ?>. So einfach kann Facebook sein. Wer jetzt kein WordPress nutzt sollte natürlich die von seinem CMS typischen Platzhalter für die URL und den Title übergeben.
Die Share-Button Varianten
Jetzt wissen wir schonmal wie wir den Facebook Button einbinden. Zusätzlich zu dem Code gibt uns Facebook aber auch die Möglichkeit vier verschiedene Varianten für den Button auszuwählen. Um das Layout des Share-Buttons anzupassen, genügt es den jeweiligen Platzhalter type=”" innerhalb des Codes anzusprechen. Die vier möglichen Varianten des Buttons von Facebook plus den jeweiligen Wert für type habe ich euch hier einmal aufgelistet:
type=“icon_link“
type=“button“
type=“button_count“
type=“box_count“
Bei den Vorschaubilder handelt es um die Original-Button von Facebook aus der Developer-Sektion. Lasst euch also nicht vom englischem “Share” beeindrucken, in den Beispielsnippets hier habe ich “Share” schon durch “Teilen” ersetzt.
Einen eigenen Share-Button nutzen
Wem das irgendwie alles zuviel ist, oder wem das Layout des Share-Button nicht wirklich zusagt, der kann sich auch selbst einen eigenen Facebook Share-Button mit Hilfe des sharer.php basteln und einbinden. Der Code hierfür wäre:
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>
&t=<?php the_title(); ?>">
<img src="<?php bloginfo('template_url'); ?>/images/icons/facebook.png" alt=""/>
</a>
Bei der Variante müsst ihr lediglich den Pfad für euer Image richtig anpassen <?php bloginfo(‘template_url’); ?>/images/icons/facebook.png” alt=”"/>. Danach könnt ihr wie gewohnt das Snippet in euer WordPress-Theme einbauen und fertig ist der Share-Button. Wie das Ganze im Endeffekt aussehen könnte, seht ihr unter dem Artikel in der “Sharing is Caring”-Abteilung des Blogs 
Falls jetzt jemand noch explizit irgendeine Frage zu dem Thema hat, so möge er oder sie doch bitte von der Kommentar-Funktion dieses Blogs Gebrauch machen …
Autor des Artikels: whit3h4t
Lars Nutzenberger | 1980er | Hamburger | CEO | EX-SEO | Blogger | Nerd | passionierter Linkdieb und OnPage-Nörgler | Gegen den Strom Schwimmer | Studienabbrecher | Googlefreund | Teufelskerl & Freund
Aktualisiert am 26. April 2011
40 Kommentare
Ein Pingback
-
[...] dem Send-Button geht Facebook den nächsten Schritt in Richtung Egalisierung des Share-Buttons. So langsam aber sicher versucht man alles unter einem Hut und einer Technik zu vereinen, nämlich [...]
Sven Wolfermann schrieb am 1. Oktober 2010 um 13:52
Schöne Zusammenfassung! Wird aber bei den Grafiken nicht “Teilen” angezeigt? Ich hatte mal ein Tutorial geschrieben, wie man den “Share-Button” in TYPO3 einbinden kann: http://blog.marit.ag/2010/07/08/facebook-share-und-twitter-update-button-mit-typoscript/
whit3h4t schrieb am 1. Oktober 2010 um 14:00
Moin Sven,
danke für den Hinweis. Ich hatte noch die Buttons direkt aus der Developer-Sektion als Screenshot. Ich werde das mal kurz ergänzen
maria schrieb am 6. Oktober 2010 um 16:28
ja, auch ich google nach dem share-button
folgendes (vielleicht auch als ergänzung zum artikel):
es ist ja möglich mit
meta name=”title” content=”Der Titel”
meta name=”description” content=”Die Beschreibung”
facebook noch einen individuellen titel und eine beschreibung mitzugeben, und jetzt kommen wir zu meiner frage, bei der du hoffentlich helfen kannst
mit
link rel=”image_src” href=”http://www.domain.com/bild1.jpg”
link rel=”image_src” href=”http://www.domain.com/bild2.jpg”
kann man noch bilder mitgeben, hab ich gemacht, funktioniert auch wunderbar, nur …
jetzt habe ich aber neue bilder eingefügt, facebook aktualisiert sie aber nicht.
woran kann das liegen. wie cached facebook diese und kann ich es dazu überreden, die neuen bilder zu verwenden?
whit3h4t schrieb am 6. Oktober 2010 um 16:43
Hallo Maria,
danke für deine Ergänzung.
Zu deiner Frage, ich denke nicht das Facebook die Bilder im Nachhinein von alleine erneuert, sondern frühestens wenn die Meldung ein weiteres Mal über Facebook geschickt wird, ob das Bild dann aber wirklich neu im Cache landet ist eine andere Frage
Ich würde an deiner Stelle einfach mal die entsprechende Seite ein weiteres Mal über einen Freund(in) über Facebook teilen und schauen was passiert … wäre mal interessant zu wissen was passiert.
Ich hab es selbst noch nicht ausprobiert, bzw getestet denke aber nicht das Facebook das Image austauscht nur weil du das Bild änderst …
Die Frage nach Cache ist allerdings eine Gute, mal sehen ob ich da was stichfestes finden kann …
Hoffe die soweit (auf die Schnelle) geholfen zu haben
Lars
maria schrieb am 6. Oktober 2010 um 17:00
hi lars,
nur zur verdeutlichung: ich meine nicht die bilder in einem bereits geteilten post, also jene die schon auf facebook bei irgendjemanden auf die pinwand geheftet sind. dass die gleich bleiben ist klar.
ich meine jene, im fenster das aufgeht, nachdem man auf den share-button geklickt hat.
diese bilder aktualisieren sich nicht und an dieser stelle brauche ich hilfe
daher die idee mit dem cache seitens facebook …
vielleicht hast du da noch einen tipp?
ansonsten wäre es auf jeden fall wichtig anzumerken: ACHTUNG bilder die einmal eingestellt wurden (u.a. auch in wordpress-blogs oder wo auch immer) sind nachträglich nicht mehr änderbar.
den tipp mit freund/freundin probiere ich auch gleich aus
Maria schrieb am 8. Oktober 2010 um 23:04
hallo lars,
danke für deine antwort.
hab versch. tests mit freunden gemacht, browsercache gelöscht, cookies entfernt, mir die finger wund gegoogelt.
fazit: NIX
hier ein link zum verständnis des problems … hast du einen rat parat?
das wäre wiklich sehr hilfreich …
ansonsten bleibt wohl nur das warten auf die launen des facebook-robots … ui unangenehm.
oder eine alternative, aber welche?
Maria schrieb am 8. Oktober 2010 um 23:24
LÖÖÖÖÖSUNG,
da ich mich so freue, muss ich diese sofort posten:
um den facebook-robot zu zwingen die metadaten der seite nochmals auszulesen, die betreffende url hier eintragen: http://developers.facebook.com/tools/lint/
… und dann funktioniert es
würde sagen: ein volltreffer ;0)
liebe grüße
maria
whit3h4t schrieb am 9. Oktober 2010 um 17:04
Hallo Maria,
na das ging im Endeffekt ja dann doch noch schnell mit dem finden der Lösung. Freut mich das du das richtige gefunden hast und danke für deine ganzen Hinweise. Ich werde das ganze nochmal zusammenfassen und vllt noch einen Artikel daraus machen …
Grüße
Lars
Axel schrieb am 13. Oktober 2010 um 12:30
@Maria
Aber was ist, wenn man mehrere Seiten pro Tag aktualisieren will?
Gibt es da kein Tool dazu? Sonst brauche ich ja ewig.
Tom schrieb am 27. November 2010 um 15:28
Habe noch eine Frage zur Ausrichtung des share-buttons und hoffe, mir kann jemand helfen…
Will folgenden Button rechtsbündig bei blogger einfügen:
Wie kriege ich das hin???
Beste Grüße,
Tom
Dietmar schrieb am 9. Januar 2011 um 16:29
Dank an Maria für den Hinweis auf das Lint Tool. Damit konnte ich endlich meine share Probleme lösen!
joe schrieb am 19. Januar 2011 um 15:01
Hallo,
ich bekomme das mit den Bildern nicht hin. (Siehe Post von Maria).
Auch der Tipp mit lint funktioniert nicht.
any help or idea?
grüße joe
joe schrieb am 19. Januar 2011 um 15:10
its me again
jetzt geht es. Braucht wohl ein bischen …
whit3h4t schrieb am 19. Januar 2011 um 15:13
Moin Joe,
joa manchmal spielt einem entweder der Browser- oder der Facebook-Cache dazwischen, so dass Änderungen über das “lint”-Formular erst ein wenig später zusehen sind.
Hatte dir zwischenzeitlich auch ne Mail geschrieben, aber das Problem hat sich ja von selbst gelöst
joe schrieb am 19. Januar 2011 um 15:18
Danke whit3h4t.
Schön das sich einer kümmert …
guter Blog!
whit3h4t schrieb am 19. Januar 2011 um 15:23
Dafür nicht Joe, dass Problem hat sich ja ohnehin von selbst erledigt. Ansonsten helfe ich gerne, wenn ich denn zur Problemlösung beitragen kann …
lg schrieb am 23. Februar 2011 um 20:24
Hey,
bei mir geht weder die eine Methode noch die andere. Der übernimmt weder Topic noch URL und ich lande einfach auf der share.php Seite von Facebook und muss alles von Hand eingeben. Was mach ich denn falsch? Bei meinem selbstgebauten Like Button geht es doch auch, allerdings würde ich viel lieber mal eben was teilen als es nur zu mögen.
Danke für jede Hilfe!
EDIT 23.02.2011 (20:35):
Oh doch geht jetzt, hatte einen Fehler im Script. Danke für den Artikel, ist echt praktisch!
whit3h4t schrieb am 24. Februar 2011 um 08:31
Moin lg,
ja manchmal sieht man Fehler im Code erst auf den zehnten Blick … Freut mich das es dir dann doch auf eigene Faust gelungen ist, den Share-Button einzusetzen
Maria schrieb am 4. März 2011 um 00:14
ahoi,
muss auch mal wieder ein wenig senf loswerden, v.a. da es mich wieder stunden gekostet hat.
aaaalso, die geschichte mit dem facebook-cache: ja das kann auch dauern, aber jetzt bin ich noch über einen seeeehr dummen fehler meinerseits gestolpert …
falls sich jemand wundert, weshalb facebook partout nicht die url die man beim einbinden übergibt, übernehmen will, also WIRKLICH WIRKLICH WIRKLICH nicht
ein hinweis: den canonical-tag checken
vielleicht hilft dieser hinweis dem ein oder anderen
alsdennn ALAAAF
kurt schrieb am 25. März 2011 um 17:11
warum funktioniert das ganze überhaupt nicht wenn ich es auf einer facebook page (in einem feld für FTML) einbetten will? es taucht kein button auf… nur ein verlinkten “Share” wort. Wenn man das klickt passiert garnix. :/
whit3h4t schrieb am 28. März 2011 um 09:41
Moin Kurt,
wenn ich dich richtig verstanden habe, versuchst du den Share-Button in einen Reiter einer Fanpage zu packen? Ich denke nicht das das überhaupt möglich ist, da ein bestehender “Teilen”-Link ja an jedem Ende einer Page ist … Weiter denke ich auch nicht das die FBML-Reiter für eine derartige Konzeption ausgelegt sind …
Jasmin schrieb am 25. Mai 2011 um 01:04
Kann man den type=“box_count“ auf für blogspot bekommen?
LG,
Jasmin
whit3h4t schrieb am 25. Mai 2011 um 10:26
Halle Jasmin,
eine gute Frage und ehrlich gesagt kann ich dir die so auf Anhieb nicht beantworten. Ich werde heute mal schauen welche Möglichkeiten es für Blogspot, Blogger & Co gibt und dir bescheid geben…
LOfter schrieb am 17. Juli 2011 um 15:13
ich hätte da auch noch eine frage, die, glaube ich, mit der von maria weiter oben zusammenhängt:
der share button sucht sich ja ein bild das er an den letztendlich facebookpost ranhängen kann. kann man ihn irgendwie zwingen nur ein bestimmtes bild zu verwenden (vorausgesetzt der nutzer möchte, dass ein bild angehängt wird)?
habe mir jetzt ein bildchen gebastelt hinter dem sich share-code versteckt (mit deiner anleitung, vielen dank dafür
). dieser ist statisch und repräsentiert nur die top-level-domain (ist auch richtig so). trotzdem sucht er sich die bilder aus den posts raus und will diese dann an den share hängen.
wäre überaus glücklich wenn mir geholfen werden könnte
grüße
lofter
whit3h4t schrieb am 17. Juli 2011 um 16:04
Moin Lofter,
eigentlich müsste das über den OpenGraph von Facebook möglich sein. Dazu müsstest du in deinen header um folgendes erweitern …
Eigentlich müsste das klappen…
LOfter schrieb am 17. Juli 2011 um 17:14
erst einmal vielen dank für die schnelle antwort!
also hab jetzt den meta tag, so wie du es beschrieben hast, einfach in den header geklatscht (muss doch lediglich zwischen stehen oder?!) und die top-level-domain durch den facebook linkter laufen lassen (developers.facebook.com/tools/lint/?url=http%3A%2F%2Fwww.lofter.de%2F)
als image wird mir leider immer noch ein komplett willkürlich gewähltes image von der seite angezeigt und es erscheint u.A. die fehlermeldung “Required Property Missing | og:image is required”.
kann es sein, dass das erst bisschen dauert bis das angenommen wird? kann es sein dass sic hder befehl vielleicht irgnedwie mit SEO tools beißt (ich benutze “all in one SEO”) da dieses ja viele meta tags verwaltet? (zumindest so wie ich das verstanden habe^^)
whit3h4t schrieb am 17. Juli 2011 um 17:50
Moin nochmal Lofter,
joa das dauert ein wenig bis der FB-Cache sich erneuert. Bei mir wird jedenfalls lofter-banner.jpg angezeigt … aber auch nur auf der Startseite. Bei den Artikeln fehlt das Metatag noch…
LOfter schrieb am 17. Juli 2011 um 17:57
aaaah sehr schick
… dann hat sich der grad zwischen unseren posts erneuert 
also bei den posts klappt das bei mir … also wenn man über den posts auf den sharer klickt, wird das post image angezeigt und wenn man rechts auf das image klickt soll ja auch immer lofter-banner.jpg kommen
.
ich bedanke mich vielmals für die schnelle und erfolgreiche hilfe
Freggle schrieb am 21. Juli 2011 um 11:41
Hallo ihr Lieben,
Ich habe bei mir auf der Seite durch die FB Developer Seite den Code für “Like” und “Share” Buttons verwendet.
Da ich diese Buttons allerdings am unteren Ende der Site gesetzt habe brauche ich eure Hilfe:
Wie bekomme ich es hin, dass wenn ich auf SHARE Klicke, sich die Box nach oben hin öffnet und nicht standardmäßig nach unten?
Für eure Hilfe wäre ich euch sehr Dankbar, damit die Site endlich online gehen kann.
LG
Freggle
whit3h4t schrieb am 22. Juli 2011 um 13:20
Moin Freggle,
müsste sich der Bereich nicht eigentlich automatisch zu der Seite öffnen auf der mehr Platz ist? Wenn nicht, dann bleibt dir nichts anderes übrig als den Button nach oben zu setzen… Denn beeinflussen kann man es nicht, da die Einstellungen über das Javascript von Facebook laufen…
Katya schrieb am 1. August 2011 um 14:26
Wie übersetzt man `share on facebook` auf Deutsch?
danke
whit3h4t schrieb am 1. August 2011 um 15:12
Welches “Share” meinst du jetzt? Schau dir die 2te graue Box an, da ist Share durch Teilen ersetzt. Du musst also nur den entsprechenden Platzhalter austauschen…
katya schrieb am 2. August 2011 um 09:22
Auf userer Web Seite haben wir ein Button “share on facebook”. dieser Seite ist deutschsprachig. Mein Boss hat mir gebeten diesen Text auf Deutsch übersetzen. Ich habe diesen Button nur auf English gesehen und weiß nicht wie dieser Satz auf Deutsch klingt. Deshalb bitte ich um eine Hilfe)) vielleicht `auf facebook teilen` oder ?
P.S. Deutsch ist nicht meine Muttersprache
whit3h4t schrieb am 2. August 2011 um 09:46
Hallo Katya,
jep “Auf Facebook Teilen”, “Teilen” oder auch “Inhalt auf Facebook Teilen” eigentlich ist der Button mittlerweile so bekannt, dass jeder Internetnutzer weiß wofür der Button zu gebrauchen ist.
Dennoch “Auf Facebook Teilen” kommt “share on facebook” noch am nächsten…
Grüße
Lars
Maria schrieb am 2. August 2011 um 09:51
hi katya,
wie bindest du den button ein?
mittels iframe müsste es durch den parameter locale=de_DE gehen.
wenn mittels XFBML, dann im javascript
//connect.facebook.net/de_DE/
katya schrieb am 2. August 2011 um 09:56
Danke schön Lars
mit freundlichen Grüßen
Katya
Mordales schrieb am 26. September 2011 um 19:56
Hi leute!
Ich hätt da ne Frage.
Wie kann man den Share-Button am Anfang einer neuen Facebookseite (Fanpage) einbinden?
So das man erst die Seite liken dann teilen muss um sie zu sehen ?
!! Bitte um schnelle Antwort !!
whit3h4t schrieb am 27. September 2011 um 15:59
@Mordales
naja… das müsste dann schon mit einer Programmiersprache erledigt werden. Es gab die Möglichkeit mal via FBML Bereiche auf Fanpages ein-/auszublenden oder sie an Bedingungen zu verknüpfen… Doch wie das jetzt der Fall ist? Frag mich nicht, Sorry. Ich würde dafür einfach mal in der Developer-Sektion von Facebook nachschauen und ggf. in dem Forum stöbern…
Loisi schrieb am 28. Oktober 2011 um 16:23
Hallo!
Ich bin besitzer einer “Facebook-Seite”.
Diese kann man ja ganz gewöhnlich liken. Ich hab auch schon über 1.000 Fans.
Doch 1.000 sind ja nicht gerade sehr viel.
Ich finde immer wieder mal Seiten, bei denen man erst auf “Teilen” klicken muss, um den “Inhalt” der Seite zu sehen…
Ich weis jetzt ja dank deiner Hilfe, wie ich einen solchen “Teilen”-Button auf die Seite einbinde. Das ganze funktioniert über FBML.
Doch nun meine Frage:
Ich funktioniert es, dass die User ERST auf TEILEN klicken müssen, um dann später den Inhalt zu sehen. Also: Wenn sie meine Seite dann geteilt haben, dass sie dann bspw. einen Text sehen!
whit3h4t schrieb am 1. November 2011 um 17:51
Nabend Loisi,
was FBML angeht so wird die Technik gegen Ende des Jahres nicht mehr unterstützt und gegen Mitte 2010 gänzlich verbannt. Es wäre jetzt also die Zeit sich JavaScript zu widmen und die Weichen schon einmal umzustellen (https://developers.facebook.com/docs/reference/javascript/).
Was deine Frage angeht, so ist das “eigentlich” eine ganz einfache if-Abfrage. Also nach dem Motto, wenn kein Fan dann Teilen-Version anzeigen. Du brauchst praktisch ja nur zwei Versionen der Seite – Eine für Fans und eine für Nicht-Fans und die Ausgabe der Seite regelst du über die nötigen Handler
Arbeite dich einfach mal durch die JavaScript SDK Seite von Facebook durch…