Social Icons

facebookgoogle plustwitterrss feedemail

Freitag, 5. April 2013

Facebook LIKE Button unter jedem Blogspot Blogbeitrag automatisch anzeigen lassen

Facebook bietet seit geraumer Zeit die Möglichkeit an, auf externen Seiten den aus Facebook gewohnten Like-Button anzuzeigen. Das funktioniert auch, mit einer kleinen Veränderung des Codes, bei blogspot.com, bzw. blogger.com Blogs. Klickt ein Facebook User in Deinem Blog auf diesen Button, dann erstellt er damit einen Eintrag im Aktivitäten Fenster auf seinem Facebook Profil mit dem Inhalt „Username xyx gefällt Beitragstitel“, wobei das Ganze mit einem Link zum entsprechenden Beitrag auf Denen Blog verknüpft wird.

Damit hat jeder Besucher Deines Blogspot-Blogs die Möglichkeit, jeden Artikel mit nur einem einzigen Klick in sein Facebook-Profil zu posten, ohne den Umweg über Facebook (Seite öffnen, Link kopieren und eintragen, abschicken) gehen zu müssen. Deine Leser können damit also Deine Beiträge verlinken, Du bekommst dadurch u.U. mehr Leser. Wie Du das Ganze automatisch unter jeden Deiner Beiträge einbaust, erkläre ich Dir im folgenden. (Die Facebook-Likebox, bei mir im Blog auf der rechten Seite eingebaut, ist eine andere Funktion, die ich Dir in Kürze auch erklären werde).

Facebook bietet mehrere Varianten an. Ich habe mich hier für die entschieden, die nur den Button anzeigt und daneben eine Zahl, wie viele User den Button bereits gedrückt haben. Das Ganze passiert dann anonym, es werden in Deinem Blog keine Usernamen angezeigt. Ich habe gemerkt, dass eine Anzeige des Namens die User eher davon abschreckt diesen Button zu drücken, daher hier die anonyme Variante.

Als erstes musst Du Dich unter blogger.com in Dein blogspot Dashboard einloggen. Dort wechselst Du auf VORLAGE und dann auf HTML bearbeiten. Du solltest Dir nun eine Sicherheitskopie Deines Templates herunterladen. Wie Du das machst, habe ich hier erklärt. Nun setzt Du das Häkchen bei Widget-Vorlagen komplett anzeigen (letzteres fällt weg, falls Du schon den neuen Editor mit den Zeilennummern und mehrfarbigem Inhalt verwendest). Im Vorlagenfeld suchst Du nun nach dem Ausdruck:
<data:post.body/>
Falls Du nicht den kompletten Text mit den Augen durchsuchen möchtest, nutze doch einfach die Suchfunktion Deines Browsers, normalerweise mit der Tastenkombination strg und f bei PCs oder cmd und f bei Macs. Dann einfach data:post.body ins Suchfeld eingeben und freuen, dass es so einfach war. Beim neuen Editor von Blogspot wird mit derselben Tastenkombination die editorinterne Suche verwendet, die aber genauso funktioniert.

Direkt darunter, also in einer neuen Zeile, fügst Du folgenden Code ein:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=180&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:180px; height:30px;' align='right'/>
</b:if>
und speicherst das Ganze mit VORLAGE SPEICHERN ab. Das war auch schon alles.

Sollte es im Template Deines Blogs mehrmals eine Fundstelle für
<data:post.body/>
geben, dann wiederholst Du diesen Eintrag bitte jeweils. Er wird zwar nur an einer Stelle genutzt werden, an den anderen stört er allerdings nicht. Und da ich hier nicht alle Templates auswendig kenne ist dies immerhin eine Möglichkeit es funktionierend und nicht störend hinzubekommen. Um weitere Fundstellen zu finden, klicke einfach auf weitersuchen, im neuen Editor einfach nochmal ins Suchfeld gehen und ENTER drücken. Hier mal ein Beispiel, wie es im neuen Editor aussehen würde wenn der Code an der richtigen Stelle eingegeben wurde:



Wenn Du Dir jetzt einen Beitrag in Deinem Blog anschaust, siehst Du unter dem Beitragstext den „Gefällt mir“ Button.

Egal ob Du auf der Startseite nur Textauszüge anzeigst oder die kompletten Beiträge, der Button erscheint dort nicht. Öffnest Du jedoch einen einzelnen Beitrag ist der Button unter Deinem Text sichtbar. Willst Du den Button aber auch auf Deiner Startseite unter jedem Beitrag sehen, dann lässt Du einfach die erste und die letzte Zeile des Codes weg.

Drückt ein Leser den Button und war vorher bereits bei Facebook eingeloggt, dann erhöht sich nur die Zahl neben dem Button und das wars (der Eintrag ins Profil passiert unsichtbar). War der Leser noch nicht eingeloggt, dann öffnet sich ein keines Popup-Fenster mit der Aufforderung sich einzuloggen. Die einzugebenden Daten „sieht“ nur Facebook.

Wie das Ganze aussieht und was passiert kannst Du hier ausprobieren, schaue hinterher einfach in Dein Facebook Profil und Du wirst dort auch sofort das Ergebnis sehen.


Wie Du siehst, wird immer der Beitrag selbst empfohlen. Deinen ganzen Blog empfehlen geht natürlich auch, siehe hier bei mir in der linken Sidebar (analog zur Likebox). Auch dazu gibt es in Kürze eine Anleitung von mir.

Zwei kleine Dinge noch am Ende erwähnt, quasi als Belohnung für alle, die bis hierher gelesen haben. Willst Du den Button nicht rechts, sondern links angezeigt bekommen, so tauschst Du einfach das RIGHT im Code gegen ein LEFT aus. Und hast Du einen Blog mit einem dunklen Hintergrund, so wie hier bei mir, dann mach aus dem LIGHT ein DARK, so wirkt es dann stimmiger im Design. Und jetzt, viel Spaß damit!

Kommentare:

  1. Vielen Dank, das ist wirklich einfach beschrieben. So hab ich es sogar geschafft :-)

    AntwortenLöschen
  2. Aber reichen für diese Funktionalität nicht diese "M,B,T,F,G+1"-Freigabeschaltflächen von Blogger selbst?
    Oder hat dieser "Like"-Button hier Features, die bei den anderen fehlen?

    AntwortenLöschen
  3. Zum Einen ist es natürlich Geschmackssache, was das Aussehen angeht. Zum Anderen ist es eben nur ein Knopf, den man auch noch genau dort einbauen kann, wo man will. Letztendlich gibt es auch noch Templates, in denen die Bloggerschaltflächen nicht implementiert sind.
    Aber in einem gebe ich Dir gerne Recht - es gibt immer eine Alternative!

    AntwortenLöschen
  4. Hey!
    Ich habe ein kleines Problem, ich versuche genau deiner Anleitung zu folgen, aber wenn ich beim Layout bin, finde ich keine Möglichkeit den HTML Code zu bearbeiten.. liegt das an meinem vorgefertigtem Layout?
    Vielen Dank im vorraus

    AntwortenLöschen
  5. Uii, da ist mir ein kleiner Fehler unterlaufen. Du musst natürlich
    nicht auf LAYOUT sondern auf VORLAGE gehen. Hab ich auch gleich mal im
    Text oben angepasst.

    AntwortenLöschen
  6. servus,

    erstmal danke für die Hilfe. Bei mir kommt der Button aber neben die Posts. Hätte ihn aber gern drunter? Kann da jemand helfen?
    (http://danielfranke.blogspot.de/)

    AntwortenLöschen
  7. Dies scheint daran zu liegen, dass Du keinen Text in Deinen Beiträgen hast und die Bilder selbst positionierst. Um nicht den ganzen Code umzuschreiben, kannst Du Dir damit helfen, dass Du das
    (kleinerals) BR (leerzeichen) (slash) (grösserals)
    direkt vor dem ersten
    < iframe
    mehrfach wiederholst. Da Deine Bilder alle gleich hoch sind, sollte hier ein wenig testen, wie oft Du wiederholen musst, durchaus für simple Abhilfe ausreichen.

    AntwortenLöschen
  8. danke für die schnelle antwort.
    lg daniel

    AntwortenLöschen
  9. Hallo,


    vielen Dank für deinen Tipp, er ist wirklich gut :)
    Bei mir ging eine Sache schief. Nachdem ich diesen Button eingefügt habe, kann man bei meinen Posts nicht mehr den Titel anklicken, also man kann den Post nicht mehr öffnen, sondern nur das lesen, was auf der Startseite steht...
    Über eine Hilfe würde ich mich freuen.

    AntwortenLöschen
  10. Hi,
    prinzipiell hat ein eingefügter IFRAME keinen Einfluss auf einen Link der viel früher im Quelltext steht. Ich kann mir nur vorstellen, dass Du den Code nicht ganz an der richtigen Stelle eingebaut hast, oder etwas anderes versehentlich dabei gelöscht hast. Dies kann u.U. auch nur ein ; oder eine Klammer sein.
    Da Du Deinen Blog aber nicht verlinkt hast, kann ich nicht nachsehen ob ich was entdecke.

    AntwortenLöschen
  11. Hallo, endlich habe ich das gefunden, wonach ich schon lange gesucht habe. Ich betreibe auch einen sehr gut besuchten Blog, nun wollte ich den Like Button auch bei mir einfügen, nur irgenwie wird er nicht angezeigt, habe mir alles genau durchgelesen, nur funktioniert das nicht bei mir, ich bitte um einen Rat, ich würde es auch gern sehen, wenn sich der Linke Button sich zuerst öffnet bevor der Blog zu sehen ist, kann man da was machen...LG Ben

    AntwortenLöschen
  12. Deine zweite Frage verstehe ich nicht und die erste kann ich mir nur anschauen, wenn Du hier einen Link zu Deinem Blog hinterlässt.

    AntwortenLöschen
  13. Hallo, bei der zweiten frage meinte ich den LIKE button, wenn also mein blog angeklickt wird soll sich zuerst ein fenster öffnen wo die user liken können aber nicht müssen

    hier der link zu meinem blog →
    http://abenteuercityville.blogspot.de/

    AntwortenLöschen
  14. Das geht mit Sicherheit irgendwie, wird aber hier nicht beschrieben. Dazu finden sich bestimmt anderweitig Tutorials. Gesehen habe ich das auch schon, meist mit Layern gelöst. Ich unke aber mal, dass kaum einer Deinen Blog liken wird BEVOR er ihn überhaupt gelesen hat.

    AntwortenLöschen
  15. ber Blog ist eigentlich sehr bekannt mit ca 3000 Besuchern am Tag, nur sieht kaum einer den Like Button auf der linken Seite, das finde ich sehr schade

    AntwortenLöschen
  16. Hallöle.. ich hab in meinem Blog jetzt schon einige Widgets und co eingefügt, aber das hier krieg ich nicht hin. Bei mir gibts das Feld Widget-Vorlagen komplett anzeigen gar nicht.. ich kann also kein Häkchen setzen. Und data:post.body find ich bei mir auch nicht

    AntwortenLöschen
  17. Google hat den Editor für die HTML Bearbeitung umgestellt. Da sieht alles ein wenig anders aus. Da muss ich mich auch erst noch durchforsten.
    Bis dahin kann ich Dir, so Leid mir das auch tut, nicht helfen. Du kannst aber gerne regelmäßig vorbeischauen oder diesem Blog auf facebook folgen, dann bist Du informiert wenn in absehbarer Zeit hier auch der neue Editor beschrieben wird.

    AntwortenLöschen
  18. Och schade... na wenigstens weiss ich jetzt, dass ich nicht selber einfach zu dämlich bin :) so schwer kann das ja aber doch nicht sein.. ich werd auch noch rumtesten. falls ich irgendwie zufällig auf ne Lösung stosse, geb ich bescheid :)

    AntwortenLöschen
  19. Wollt mal kurz n Update geben. Hab herausgefunden, warum es mir die Zeile data:post.body nicht gefunden hat. Beim neuen Editor muss man erst den Cursor an erster Stelle des codes setzen (muss blinken) und dann Strg+F drücken. Dann öffnet sich das Suchfenster direkt im Code und man findet die entsprechende Stelle aus^^ Soweit wär das ja spitze, aber wenn ich jetzt den Code für den Like-Button dort einfüge, passiert einfach gar nix :( Hätte ja auch einfach mal easy sein können :)

    AntwortenLöschen
  20. Vielen Dank für die Mühe. Letztendlich bleibt es aber genau bei der Bearbeitung, wie sie es auch im alten Editor war. Habe das Ganze mal nachgeprüft und den Text oben auch dementsprechend angepasst (inkl. Screenshot), damit es nicht zu Verwirrungen kommt.

    AntwortenLöschen
  21. hehe :) aber no chance bei mir... ich füg den Code genau da ein wo er hin soll und in meinem Blog wird einfach nix angezeigt.. ich glaub ich geb auf

    AntwortenLöschen
  22. Hallo, gibt es schon eine Lösung für das Problem, dass sich aber auch wirklich nichts tut, nachdem man den Code an den richtigen Stellen eingefügt hat? Du schreibst außerdem, man soll ihn nach einfügen, in anderen Anleitungen steht aber, dass man ihn davor einfügen soll. Was ist jetzt richtig und wie kriege ich das ganze funktionsfähig?

    AntwortenLöschen
  23. Ob davor oder danach ist relativ egal, kommt halt darauf an, WO der Button später angezeigt werden soll. Hier ist beschrieben, dass er, wie der Titel sagt, UNTER jedem Beitrag stehen soll.
    Um bei Deinem Problem zu helfen, warum nichts angezeigt wird, müsste ich mir das mal anschauen. So ganz ohne Link wird das allerdings schwer ;)

    AntwortenLöschen
  24. Vielen lieben Dank! - ich wäre fast verzweifelt!
    Mir gefällt dein Blog sehr gut :) !


    Als kleine Anmerkung,
    es ist leider sehr anstrengend die weiße Schrift auf dem sehr dunklen Hintergrund zu lesen ohne das man danach völlig gaga im Kopf ist. Vielleicht gibst du der schrift einen leichten Grauton damit das Flimmern aufhört oder du hellst den hellst den Hintergrund auf.
    Liebe Grüße und nochmals Danke !
    Lea - www.le-velours.blogspot.de

    AntwortenLöschen
  25. Hallo,
    bei mir kommt sobald ich auf den Button klicke ein "Bestätigen", also das wird nicht unsichtbar gepostet. Wie umgehe ich dies?

    AntwortenLöschen
  26. Und kann man eigentlich sehen wer da gefällt mir gedrückt hat?

    AntwortenLöschen
  27. hi, vielen dank für die hilfe. leider passiert auch bei mir nichts. obwohl ich alle schritte präzise durchgeführt habe. kein button in sicht. liegt es vielleicht an meinen grundkonfigurationen? die dann den button erst sichtbar machen? habe ja viel verborgen um die optik von meinem blog reduziert zu halten

    http://igs-royal.blogspot.de/

    freue mich auf feedback und wünsche noch schöne feiertage

    gruß aus berlin, igor

    AntwortenLöschen
  28. Hallo Igor,


    danke erstmal für die Feiertagswünsche, die immerhin in der selben Stadt bleiben ;)


    Ich habe das noch nie ins SIMPLE Template eingebaut, habe daher dort keine Erfahrungen. Da ich aber auch im Quelltext Deines Blogs keinerlei Facebook-Codes finde, denke ich Du hast da doch irgendwo einen Fehler gemacht, sorry.

    AntwortenLöschen
  29. Ja, indem Du Dich VORHER bei Facebook anmeldest. Erst wenn man dort eingelogged ist, können Likes vergeben werden. Ansonsten fordert Dich Facebook halt dazu auf, Dich erst einzuloggen.

    AntwortenLöschen
  30. danke für die rasche antwort. ich habe natürlich alles wieder in den ursprungszustand gebracht, um später nicht durcheinander zu kommen (auch deinen rat mit dem back up befolgt), daher keine spur von den facebook codes :-)
    und SIMPLE template? macht das denn einen unterschied?

    AntwortenLöschen
  31. Hallo und gutes neues Jahr!
    Jetzt muss ich doch auch einmal fragen: Deine Erklärung ist wirklch super easy - und ich finde auch keine andere. Nun habe ich allerdings das Problem, dass in meiner html Bearbeitungsseite absolut kein date:post.body zu finden ist. Weder mit den Augen, noch mit der Suchfunktion. Kann das sein?

    AntwortenLöschen
  32. nagut jetz hab ichs gefunden - peinlich - aber bei mir funktionierts irgendwie auch nicht. es wird nicht angezeigt

    http://coralpinkesbambi.blogspot.de/

    AntwortenLöschen
  33. Ich kann den Code in Deinem Qualltext auch nicht entdecken. An der richtigen Stelle eigefügt?

    AntwortenLöschen
  34. Funktioniert prima. Was ist allerdings mit den Unterseiten? Also die normal erstellten Seiten (Über mich, Impressum etc.), nicht der Blog an sich? Auf diesen Seiten erscheint der Button leider nicht. Gibt es eine Lösung dafür, abgesehen davon es jedes Mal manuell einzufügen?

    AntwortenLöschen
  35. Benjamin Klöppel14. Januar 2014 um 16:54

    Hy,
    vielen Dank für deine Seite!!!
    Eine Frage: kann ich irgendwo sehen wer den like button gedrückt hat???

    AntwortenLöschen
  36. Benjamin Klöppel14. Januar 2014 um 17:30

    Hab gerade gelesen das es nicht geht trotzdem danke!!!

    AntwortenLöschen
  37. Hallo,

    echt ein toller Beitrag. Leider funktioniert es bei mir auch nicht. Hab mal alle von mir eingefügten codes dringelassen. Findest du vielleicht meinen Fehler?

    Liebe Grüße

    Juli

    http://juli-mitliebegemacht.blogspot.de/

    AntwortenLöschen
  38. Also ich kann den Button bei Dir sehen. Steht unter jedem Beitrag, wenn Du ihn aufrufst.
    Wenn Du ihn auch auf der Startseite sehen willst, dann lass, wie in der Anleitung beschrieben, die erste und die letzte Zeile des Codes weg.

    AntwortenLöschen
  39. ooooh menno ich finde keine data:post.body auch wenn ich über die Suchfunktion gehen :-( Kannst du mir helfen?
    Liebe Grüße
    Iris

    AntwortenLöschen
  40. Hallo Iris,
    einige Dinge gibt es in vereinzelten Templates nicht. Das data:post.body muss jedoch da sein, sonst würden bei Dir keine Beiträge angezeigt werden.
    Helfen kann ich Dir allerdings nicht, ich kenne ja Deine Blogadresse nicht...

    AntwortenLöschen
  41. Danke für die Rasche Antwort:

    http://li-le-kunterbunt.blogspot.de/

    liebe Grüße
    Iris

    AntwortenLöschen
  42. Hallo! Ich finde die Erklärung einfach, es hat auf Anhieb geklappt, danke! Gibt es inzwischen schon die Anleitung für die Facebook Likebox? 1000 Dank!
    nahtaktiv.blogspot.de

    AntwortenLöschen
  43. Wenn auch schon etwas älter, dennoch auch jetzt noch eine große Hilfe. Damit hat es bei mir auch geklappt. Vielen Dank dafür http://www.finanznachrichten.de/nachrichten-aktien/facebook-inc.htm

    AntwortenLöschen
  44. Hallo, ich habe alle Schritte ausgeführt, aber leider habe ich dieses "gefällt mir" button nicht unter meinen Blogeinträgen auf Blogspot. :( Kannst du mir weiter helfen? Danke!

    AntwortenLöschen
  45. Wenn ich wüsste, wo ich schauen muss?!?

    AntwortenLöschen
  46. Hey hat doch geklappt ^^ Danke! Hast du auch einen Eintrag wie man die Followers von meiner Facebook-Seite auf Blogspot anzeigen kann? :)

    AntwortenLöschen
  47. Hey hat doch geklappt ^^ Danke! Hast du auch einen Eintrag wie man die Followers von meiner Facebook-Seite auf Blogspot anzeigen kann? :) wäre sehr toll...

    AntwortenLöschen
  48. Dankesehr :) nach Lesen der Kommentare konnte ich auch den Button im neuen Layout einbauen und er ist nun in jedem Beitrag auf www.secrelicious.blogspot.de zu sehen

    AntwortenLöschen
  49. Ich bin am Verzweifeln. Ich habe deine Anleitung befolgt und auch den Quellcode von Facebook selbst habe ich versucht, um überhaupt einen Like-Button auf meine beiden Blogs zu bekommen. Aber nichts funktioniert. Es erscheint entweder gar nichts oder aber der Quellcode von Facebook.

    AntwortenLöschen

Related Posts Plugin for WordPress, Blogger...