Facebook Like (Gefällt mir) Box bei Blogger Blogspot einbinden

blogger blogspot
Wie kann man eine Facebook Like Box bei einem Blogger Blogspot einbinden einbinden? Wie kann man die Facebook Gefällt mir Box bei Blogger Blogspot in der Seitenbar oder im Footer einbinden? Woher bekommt man das Gadget Facebook Like Box bzw. Facebook Gefällt mir Box?

Wer schon eine Facebook Seite hat oder noch eine Facebook Seite passend zu seinem Blogger Blogspot Blog einrichtet, kann dann die Facebook Like Box bzw. Facebook Gefällt mir Box einbinden. Für ein normales Facebook Profil funktioniert es nicht.

Der Code wurde so erstellt, dass er sehr leicht über Gadgets hinzufügen in einen Blogger Blogspot Blog integriert werden kann. Ein etwas komplizierterer Eingriff in die Template Vorlage bleibt somit erspart.

Ist die Facebook Like Box im Blog eingebunden können die Leser:

  • den “Gefällt mir” Button drücken  und man gewinnt neue Fans für seine Facebook Seite
  • in einer Vorschau sehen, was auf der Facebook Seite gepostet wird, also eine Übersicht der letzten Aktivitäten
  • sehen, wie vielen Personen die Facebook Seite gefällt, von diesen Personen ist das Profilfoto zu sehen und verlinkt

Einfache Anleitung zum schnellen Einbau der Facebook Like Box:

Facebook Like Box - Facebook Gefällt mir Box - Blogger Blogspot - Gadget


Gadget für HTML/JavaScript in der alten Blogger Oberfläche hinzufügen

  • bei blogger.com einloggen und entsprechenden Blog aufsuchen
  • Design >> Seitenelemente >> Gadget hinzufügen >> HTML/JavaScript auswählen und den Code einfügen >> Speichern

Gadget für HTML/JavaScript in der neuen Blogger Oberfläche hinzufügen

  • bei blogger.com einloggen und entsprechenden Blog aufsuchen
  • Layout >> Gadget hinzufügen >> HTML/JavaScript auswählen und den Code einfügen >> Speichern

Code für die Facebook Like Box bzw. Facebook Gefällt mir Box

<div class="fb-like-box" data-href="http://www.facebook.com/pages/BloggerLatein-Blogger-Blogspot-Tipps-und-Tricks/283692315026862" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
<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>

Rote Markierung: dort wird die eigene Webadresse (URL) der eigenen Facebook Seite eingesetzt. Wer diese nicht auswendig kennt, loggt sich bei Facebook ein, sucht seine Seite auf und kopiert die URL aus der Adresszeile des Browsers. Die Webadresse (URL) endet mit der Seiten ID (eine längere Zahl).

Blaue Markierung: um die Box breiter zu machen wird eine größere Zahl eingegeben und um die Box schmaler zu machen gibt man eine kleinere Zahl ein.

Grüne Markierung: möchte man im unteren Teil der Box keine Profilbilder anzeigen lassen, wird das Wort true mit dem Wort false ersetzt.

Orange Markierung: möchte man den scrollbaren Mittelteil (Postvorschau der Facebook Seite) ausblenden und nur die Profilfotos anzeigen lassen, wird das Wort true mit dem Wort false ersetzt.

Rosa Markierung: möchte man die Überschrift Finde uns auf Facebook ausblenden, wird das Wort true mit dem Wort false ersetzt.

Wie man eine Facebook Like Box mit Hover Effekt (ausklappbar beim Anklicken) einbindet, wird in diesem Artikel erklärt: Facebook Like Box mit Hover Effekt bei Blogspot einbinden

Artikel als PDF herunterladen

47 Kommentare:

Erdbeerliese 11. April 2012 um 09:41

Bei mir gibt es beide Varianten nicht. Wenn ich auf Gadget hinzufügen klicke, kann ich nirgendwo GTML/JavaScript auswählen und >Design-Seitenelemente< gibt es auch nicht =/

BloggerLatein 11. April 2012 um 11:03

@Erdbeerliese

ALTE BLOGGER OBERFLÄCHE:
Design >> Seitenelemente >> Gadget hinzufügen >> HTML/JavaScript auswählen und den Code einfügen >> Speichern

!!!! ODER !!!

NEUE BLOGGER OBERFLÄCHE:
Layout >> Gadget hinzufügen >> HTML/JavaScript auswählen und den Code einfügen >> Speichern

Wenn Du schon bei "Gadget hinzufügen" bist, klickst Du es an, dann öffnet sich ein kleines Fenster, dort scrollst Du weiter nach unten, das 10.Gadget ist das Gadget "HTML/JavaScript", das klickst Du an, es öffnet sich wieder ein Fenster und dort kommt der Code rein und in diesem Fenster klickst Du wieder auf speichern und dann noch den Blog neu laden.

Bei der URL (Webadresse) von der Facebookseite (die Du in den Code einfügst) löscht Du alles was "hinten noch dranhängt". DIE URL muss (wie oben) mit einer Nummer enden. Wenn Du schon einen eigenen Namen hast, dann endet sie mit dem Namen, den Rest löschst Du.

Wenn es gar nicht klappt melde Dich noch einmal. Viel Erfolg.

Viele Grüße

Superschnucki73 13. April 2012 um 08:29

super vielen dank habewig gesucht wie ich nun meine facebooksiete mit dem blog verbinde toll hat geklappt und super beschrieben tausnd dank

BloggerLatein 13. April 2012 um 13:39

@Superschnucki73

Vielen Dank für das Feedback. Und um so schöner wenn die Anleitung verständlich ist. Na dann noch viel Spaß mit Deinem Blog.

Viele Grüße

Jacqueline 7. Mai 2012 um 10:26

Vielen Dank für die super Anleitung. Ich bin so froh, dass es diesen Blog gibt =) Da fällt es sogar mir leicht meinen Blog einzurichten, obwohl ich von html keine Ahnung habe.

BloggerLatein 7. Mai 2012 um 11:18

@Jacqueline Bier

Sehr schön, viel Erfolg & Freude mit deinem Blog noch und vielen Dank für Dein Feedback.

vg

Tatjana 4. Juni 2012 um 06:45

Auch ich möchte mich bedanken, obwohl ich oft genug nach hilfreichen tipps mich im Internet auf die Suche begebe, habe ich selten welche gefunden, dessen Sprache ich gleich verstanden habe!!! Somit ein ganz großes Lob. Danke deiner erklärung war es für mich ein leichtes die ausgeblendete Facebook Like box einzubinden.

MERCI!!!!!!

BloggerLatein 4. Juni 2012 um 07:02

@Tatjana

Herzlichen Dank für das positive Feedback und schön wenn einige Artikel hilfreich sind. Viel Spass noch mit Deinem Blog.

Karl 9. Juli 2012 um 16:05

Knapp, präzise und verständlich vielen Dank für den Beitrag. Werde öfters mal vorbei schauen. Karl

Michaela 9. August 2012 um 23:30

Hmm.... irgendwie gehts nicht bei mir.... habe die seite rein gemacht....

data-href="http://www.facebook.com/pages/Funhouse/296821223711454"

wo ist der fehler... LG Michaela

BloggerLatein 10. August 2012 um 15:41

@Michaela

Habe eben einige Dinge ausprobiert...

Sofern Du bei Facebook eingeloggt bist, bekommst Du nicht viel zu sehen.

Füge den Code mit Deiner o.g. Facebook-URL für Deine Seite mal wieder in ein HTML/JavaScript Gadget.

Logge Dich bei Facebook aus, lade Deinen Blog neu und Du solltest die Box sehen können.

Wenn es gar nicht funktioniert melde Dich noch einmal und man könnte dann eine Alternative ausprobieren.

VG

Michaela 11. August 2012 um 22:22

hmmm.... es will nicht gehen....

BloggerLatein 12. August 2012 um 10:19

@Michaela

Kopiere mal diesen Code in ein HTML/JavaScript Gadget, speichern und Blog neu laden. Deine Facebookseiten-URL ist schon eingefügt, musst Du also nicht mehr hinzufügen. Auch diese Variante funktioniert im TestBlog. Sollte es wieder nicht funktionieren: lege mal einen neuen Testblog an und probiere es dort, wenn es dort funktioniert liegt das Problem eher in der Vorlage Deines Hauptblogs.

<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Funhouse/296821223711454&amp;width=292&amp;height=590&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>

VG

Michaela 12. August 2012 um 14:15

super super super, es geht ich danke dir..... :-)

ganz liebe sonnige grüsse Michaela

BloggerLatein 12. August 2012 um 15:05

Perfekt!
Schönen Sonntag noch und
VG

Jela Arend 3. September 2012 um 01:21

tausend dank! hat super funktioniert! vg jela

Anonym 30. September 2012 um 21:38

Super Anleitung, sehr einfach und verständlich aber ich bekomme es trotzdem nicht hin. Keine Facebookanzeige sondern ein großes weißes Feld ist zu sehen.
Wo ist mein Fehler?

http://kleinstadtgebruell.blogspot.de/

BloggerLatein 30. September 2012 um 22:39

@kleinstadtGEBRUELL

Wenn Du das große weiße Feld siehst; dann logge Dich mal bei Facebook aus, lade den Blog neu und gib mal Bescheid ob es funktioniert.

Sicherheitshalber Deinen Link zur Facebook-Seite noch einmal checken.

VG

BloggerLatein 30. September 2012 um 22:41

@kleinstadtGEBRUELL

...also wenn ich bei Facebook eingeloggt bin, sehe ich auch die von Dir beschriebene Variante. Wenn ich mich aber auslogge und Deinen Blog aufrufe kann ich die Facebook Box sehen.

VG

Anonym 2. Oktober 2012 um 17:04

Nun geht es. Das Kind hat nur ein wenig Zeit gebraucht.

Firma dankt

Unknown 2. Oktober 2012 um 22:33

Hey! Vielen Dank! Hat super geklappt!

Sarah 8. Oktober 2012 um 21:35

Vielen Dank für diese Anleitung! Selbst für mich als Blog-Neuling sehr verständlich. Super!

Unknown 13. Oktober 2012 um 11:11

Danke für diese sehr verständliche Anleitung. Hab die Box bisher nicht verwendet, weil Facebook keine Breite unter 290 zulässt. Jetzt funktionierts perfekt!

jakegyllenhaal.blogspot.de

Unknown 13. November 2012 um 19:08

Hallo. Super Post, aber bei mir will es einfach nicht gelingen.

Habe in meiner Page durch Umwandlung keine Ziffern mehr am Ende. Habe es bereits sowohl mit, als auch ohne Page-ID probiert. Kommt nix, das Feld bleibt einfach leer.

Habe auch die alternative Methode ausprobiert (falls es am Blog-Design liegen sollte)

Hier mal mein Blog: http://philister2.blogspot.de/

Was soll ich machen?

BloggerLatein 14. November 2012 um 18:43

@Märchenrepublik

Das Feld der installierten Box bleibt leer? Log Dich mal bei Facebook aus und lade Deinen Blog neu,dann solltest Du mehr sehen.

Kästi 28. November 2012 um 16:06

Hi, super das es so eine Seite zur Hilfe gibt, ich komme trotzdem nicht weiter. Ich habe meine Facebook gefällt mir seite geöffnet, aber die URL besteht nicht am Ende aus Ziffern, sondern nur: http://www.facebook.com/kaestis
Was mache ich da verkehrt?
Danke schon einmal, Gruß Tina

BloggerLatein 28. November 2012 um 18:38

@Kästi

Gar Nichts! Deine Seite hat eben schon so viele "Likes" erhalten dass Du einen eigenen Sitennamen verwenden kannst und somit sieht Dein Seitenlink nur etwas anders aus. Füge eben diesen Link (http://www.facebook.com/kaestis) an der rot markierten Stelle ein, aber nicht die zwei Anführungszeichen davor und dahinter löschen!!!

Dann logge Dich bei Facebook mal kurz aus sonst siehst Du nur eine große weiße, leere Fläche bei der Facebook Box auf Deinem Blog. Lade Deinen Blog neu und Du solltest die Box sehen und benutzen können.

VG

Kästi 29. November 2012 um 08:34

Hat funktioniert, vielen Lieben Dank...
Gruß Tina

finest-in-internet 5. Dezember 2012 um 19:45

Wow ich bin begeistert. Echt toll erklärt und so einfach zu handhaben. Danke schön mach weiter so!

finest-in-internet 5. Dezember 2012 um 20:28

Kann ich die Anzeige auch in english anzeigen lassen? Statt "gefällt mir" "Like". Wenn ja dann wie :)

BloggerLatein 5. Dezember 2012 um 21:05

@Mana Pitang

Danke.

Ja, aber man kann die Sprache "nur" für die ganze Box ändern.

Wähle im Code die dritte Zeile von unten. Dort siehst Du de_DE

js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";


Für britisches Englisch ersetzt Du es mit en_GB

js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";


Und für amerikanisches Englisch ersetzt Du es mit en_US

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

VG

CrazyBackNoé 17. Dezember 2012 um 01:46

Super Erklärung! Vielen lieben Dank!

Nadja 6. Januar 2013 um 22:56

Dieser Artikel ist der absolute OBERHAMMER!!!! Tausend Dank! Danke, Danke Danke und nochmal DANKE! Habe mich jetzt drei Stunden mit HTML Text basteln gespielt bevor ich auf deinen perfekten Artikel gestoßen bin und BUM innerhlab von 5 Minuten hatte den Like Button!

www.violetfleur.com

JOLINO 1. März 2013 um 23:24

Auch von mir ein herzliches Dankeschön für deinen Code.
Hat wunderbar funktioniert.
Lg Sandra

Alexandra Skala 14. März 2013 um 13:54

Hallo....wollte mich trotzdem für deine Mühe bedanken....
auch wenns bei mir LEIDER nicht geht....

vielleicht bekommst du es hin wenn ich dir meine Adresse schicke?...

https://www.facebook.com/alexandra.skala.9

das wäre super lieb von dir...
vlg alex :-)

BloggerLatein 14. März 2013 um 18:44

Hallo Alex,

mit einer reinen Profilseite (den normalen Account) funktioniert es nicht. Dazu muss man eine eigene Seite (Page) extra anlegen bzw. erstellen.

vg

Alexandra Skala 20. März 2013 um 10:54

vielen Dank für die Info
vlg alex

Anonym 7. Mai 2013 um 12:44

hat super geklappt. danke

Unknown 12. Mai 2013 um 10:46

Hallo Alex,
bin ich froh über deinen Artikel! Hat geklappt! Jay! Bei mir werden in der Box jedoch auch alle Aktivitäten angezeigt (guckst du: www.delesa.blogspot.de). Die kann man doch sicherlich weglassen? Tipp wäre prima, damit ich mir die Box nicht zerschieße!! DANKE
LG
Delesa

Unknown 12. Mai 2013 um 10:48

Hallo Alex,
wer lesen kann und Farben unterscheiden ist klar im VORTEIL! Sorry, hab' s jetzt selbst dank deiner tollen Farbmarkierungen oben gelöst!!!
Schönen Sonntag noch..
LG

luni 15. Oktober 2013 um 14:33

Danke für dieses Tutorial.

Grüße

The_Editrix 3. Februar 2015 um 14:06

Habe auf gefühlten 1000 Seiten nach einer Lösung gesucht. Diese hat geklappt! DANKE!!!

Unknown 15. Februar 2015 um 19:20

Junge Junge hab ich jetzt gekämpft bis das ging..super danke für den Post...darf ich den Teilen ?
Und wo finde ich mal eine Seite auf der ganz viele blogger.com Seiten auf deutsch gelistet sind..wo kann ich meinen Blog eintragen damit der mal bekannter wird usw usw . :-D
Viele Grüße
Sven

Ardijana 23. Februar 2015 um 12:34

Herzlichen Dank für diese super Seite!
Ohne BloggerLatein wäre ich bei meinem neuen Blog super aufgeschmissen! =)

Bücher in meiner Hand 19. Oktober 2015 um 22:15

Herzlichen Dank für die Anleitung!

Sabine 11. August 2017 um 17:54

das Posting ist zwar schon lange her - aber es hat geklappt, vielen Dank!!

Anonym 25. Januar 2018 um 10:22

Vielen lieben Dank für diesen tollen Artikel! War ganz easy! :)

Kommentar veröffentlichen