BloggerLatein

Wie kann man die Facebook Like Box bei einem Blogspot Blog einbinden? Wie kann man bei Blogger Blogspot die Gefällt mir Box einbinden? Wie bettet man die Like Box mit Hover Effekt ein?

Wenn man eine Facebook Seite hat kann man auf seinem Blog dafür etwas Werbung machen. Eine Möglichkeit bietet die Einbettung der Gefällt mir Box (Like Box).

In diesem Tutorial wird die Einbindung der Gefällt mir Box mit Hover Effekt vorgestellt. Diese Box wird seitlich des Blogs eingebunden und wenn man man mit dem Mauszeiger über diese Box fährt öffnet sie sich.

Für die Einbindung der Like Box werden zwei Schritte nötig:

1. der Code für die Box wird in ein HTML/JavaScript Gadget eingefügt
2. das Script für den Hover Effekt (damit sich die Box öffnet) wird in die Template Vorlage eingefügt

Einige Template Vorlagen können schon für andere zusätzliche Funktionen das jQuery Script enthalten. Damit es nicht doppelt in die Template Vorlage eingebunden wird, fügt man erst den Code für die Box in ein HTML/JavaScript Gadget, lädt den Blog neu und fährt mit der Maus drüber. Öffnet sich die Box, dann muss das Script kein zweites Mal eingebunden werden.

Wurde die Like Box eingebunden sieht es wie auf diesem Blog aus:

Fährt man mit dem Mauszeiger über den Facebook Button dann öffnet sich die Like Box:

Ist die Facebook Seite noch recht neu und es hat noch niemand auf Gefällt mir geklickt, dann ist die Box vorerst noch leer. Später wird man dann die verkleinerten Profilbilder der Facebook Nutzer sehen können, die auf Gefällt mir gedrückt haben.

1. Code für die Like Box in ein HTML/JavaScript Gadget einfügen

An der blau markierten Stelle befindet sich der Link des  Facebook Buttons. Der Button kann heruntergeladen und selbst gehostet oder durch einen anderen Button ersetzt werden (evt. Werte für padding (0 5px 0 30px) anpassen).

An der rot markierten Stelle wird die URL (Webadresse) der Facebook Seite eingesetzt.

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 der Like Box einfügen >> Speichern
• Blog neu laden, der Facebook Button sollte nun zu sehen sein, fährt man mit der Maus drüber und die Box öffnet sich nicht, dann muss noch das jQuery Script eingefügt werden

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 der Like Box einfügen >> Speichern
• Blog neu laden, der Facebook Button sollte nun zu sehen sein, fährt man mit der Maus drüber und die Box öffnet sich nicht, dann muss noch das jQuery Script eingefügt werden

2. jQuery Script für den Hover Effekt (damit sich die Box öffnet) in die Template Vorlage einfügen

HTML Code in der alten Blogger Oberfläche

• bei blogger.com einloggen und entsprechenden Blog aufsuchen
• Design >> HTML bearbeiten >> Haken bei Widget-Vorlagen komplett anzeigen

HTML Code in der neuen Blogger Oberfläche

• bei blogger.com einloggen und entsprechenden Blog aufsuchen
• Vorlage >> Live im Blog >> HTML bearbeiten und es erscheint ein Warnhinweis, Fortfahren >> Haken bei Widget-Vorlagen komplett anzeigen

In beiden Blogger Oberflächen

• die Seitensuche aktivieren (STRG+F oder F3)
• in die Suchmaske </head> eingeben und gleich darunter das Script einfügen:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

• Vorlage speichern
• Blog neu laden, mit der Maus über den Facebook Button fahren und die Gefällt mir Box für die Facebook Seite sollte sich nun öffnen