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 …

About whit3h4t

Lars Nutzenberger (Google+) | 1980er | Hamburger | CEO | EX-SEO | Blogger | Nerd | passionierter Linkdieb und OnPage-Nörgler | Gegen den Strom Schwimmer | Studienabbrecher | Googlefreund | Teufelskerl & Freund

Comments

  1. 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/

  2. whit3h4t says:

    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 😉

  3. 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?

  4. whit3h4t says:

    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

  5. 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

  6. 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?

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

  8. whit3h4t says:

    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

  9. @Maria
    Aber was ist, wenn man mehrere Seiten pro Tag aktualisieren will?
    Gibt es da kein Tool dazu? Sonst brauche ich ja ewig. 🙁

  10. 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

  11. Dietmar says:

    Dank an Maria für den Hinweis auf das Lint Tool. Damit konnte ich endlich meine share Probleme lösen!

  12. 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

  13. its me again
    jetzt geht es. Braucht wohl ein bischen …

  14. whit3h4t says:

    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 😉

  15. Danke whit3h4t.
    Schön das sich einer kümmert …
    guter Blog!

  16. whit3h4t says:

    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 …

  17. 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!

  18. whit3h4t says:

    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

  19. 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

  20. 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. :/

  21. whit3h4t says:

    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 …

  22. Kann man den type=“box_count“ auf für blogspot bekommen?

    LG,
    Jasmin

  23. whit3h4t says:

    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…

  24. 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

  25. whit3h4t says:

    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…

  26. 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^^)

  27. whit3h4t says:

    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…

  28. 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 🙂

  29. Freggle says:

    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

  30. whit3h4t says:

    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…

  31. Wie übersetzt man `share on facebook` auf Deutsch?
    danke

  32. whit3h4t says:

    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…

  33. 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

  34. whit3h4t says:

    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

  35. 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/

  36. Danke schön Lars

    mit freundlichen Grüßen
    Katya

  37. 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 !!

  38. @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…

  39. 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!

  40. whit3h4t says:

    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…

  41. Deine Share-Button Codes funktionieren nicht mehr richtig, wie die Darstellung des Worts „Teilen“. Auch der unangepasste Code zeigt nicht den Button. Ist das nur bei mir so?

  42. whit3h4t says:

    @ David,

    wie schon im Artikel (oben fett) geschrieben, Facebook unterstützt den Share-Button zwar noch, er ist aber veraltet. Ich würde nur noch den Like-Button nutzen und im Falle von WordPress gibt es sicherlich gute und schmale Plugins.

  43. Ich fan den Share-Button eigentlich gar nicht so verkehrt, ich will ja nicht unbedingt alles „liken“ was ich anderen mitteilen will.

  44. Hallo zusammen,

    super interessante Beiträge. Leider habe ich das gleiche Problem wie Maria vom Anfang. Ich habe den Teilen button zwar hingekriegt, nur kann ich weder Title, noch Beschreibung oder Bild selbst gestalten. Auch durch Aktualisierung mit dem Link passiert nichts. Weiss nicht mehr weiter… worin liegt der Fehler? Hier der Quellcode:

    [Ich hab den Code mal entfernt …]

    Wer kann mir helfen? Bin kein Pro… eher ein Newbie… Danke!!!

  45. whit3h4t says:

    Nabend Stella,

    schau dir mal den Punkt mit den Open Graph Tags von Facebook an. Ich denke damit könnte dir geholfen sein. https://developers.facebook.com/docs/reference/plugins/like/

  46. Hallo,

    auch auch habe mehr oder minder erfolgreich den „Share Button“ auf meiner Page integriert. Leider muss ich feststellen, dass manche meiner Gruppen nicht erreichbar sind, soll heißen, ich kann diese in meinem Menü zum „sharen“ nicht finden. Wer kann mur sagen was da schief läuft und was ich andern kann.

    VG Sascha

Trackbacks

  1. […] 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 […]

Speak Your Mind

*

Kommentare werden moderiert. Es kann etwas dauern, bis dein Kommentar angezeigt wird.