Facebook Like (Gefällt mir) Box bei Blogger Blogspot einbinden
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:
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:
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 =/
@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
super vielen dank habewig gesucht wie ich nun meine facebooksiete mit dem blog verbinde toll hat geklappt und super beschrieben tausnd dank
@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
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.
@Jacqueline Bier
Sehr schön, viel Erfolg & Freude mit deinem Blog noch und vielen Dank für Dein Feedback.
vg
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!!!!!!
@Tatjana
Herzlichen Dank für das positive Feedback und schön wenn einige Artikel hilfreich sind. Viel Spass noch mit Deinem Blog.
Knapp, präzise und verständlich vielen Dank für den Beitrag. Werde öfters mal vorbei schauen. Karl
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
@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
hmmm.... es will nicht gehen....
@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&width=292&height=590&colorscheme=light&show_faces=true&border_color&stream=true&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>
VG
super super super, es geht ich danke dir..... :-)
ganz liebe sonnige grüsse Michaela
Perfekt!
Schönen Sonntag noch und
VG
tausend dank! hat super funktioniert! vg jela
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/
@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
@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
Nun geht es. Das Kind hat nur ein wenig Zeit gebraucht.
Firma dankt
Hey! Vielen Dank! Hat super geklappt!
Vielen Dank für diese Anleitung! Selbst für mich als Blog-Neuling sehr verständlich. Super!
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
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?
@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.
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
@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
Hat funktioniert, vielen Lieben Dank...
Gruß Tina
Wow ich bin begeistert. Echt toll erklärt und so einfach zu handhaben. Danke schön mach weiter so!
Kann ich die Anzeige auch in english anzeigen lassen? Statt "gefällt mir" "Like". Wenn ja dann wie :)
@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
Super Erklärung! Vielen lieben Dank!
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
Auch von mir ein herzliches Dankeschön für deinen Code.
Hat wunderbar funktioniert.
Lg Sandra
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 :-)
Hallo Alex,
mit einer reinen Profilseite (den normalen Account) funktioniert es nicht. Dazu muss man eine eigene Seite (Page) extra anlegen bzw. erstellen.
vg
vielen Dank für die Info
vlg alex
hat super geklappt. danke
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
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
Danke für dieses Tutorial.
Grüße
Habe auf gefühlten 1000 Seiten nach einer Lösung gesucht. Diese hat geklappt! DANKE!!!
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
Herzlichen Dank für diese super Seite!
Ohne BloggerLatein wäre ich bei meinem neuen Blog super aufgeschmissen! =)
Herzlichen Dank für die Anleitung!
das Posting ist zwar schon lange her - aber es hat geklappt, vielen Dank!!
Vielen lieben Dank für diesen tollen Artikel! War ganz easy! :)
Kommentar veröffentlichen