Facebook Like Box | Rahmen entfernen

Sehr viele Websites benutzen die von Facebook bereitgestellten Social Plugins, um die Interaktion zwischen der Website und Facebook zu erhöhen und durch Facebook Like-Empfehlungen von Usern höheren Traffic zu generieren. Welches Social Plugin man verwendet, bleibt jedem selbst überlassen, ich jedenfalls halte die Like Box für die attraktivste Form, da es Userbilder enthält und somit lebendiger und realer wirkt, als ein simpler Like Button. In diesem kurzen Tutorial zeige ich Euch, wie man den Rahmen der Facebook Like Box entfernt.

Der große Nachteil an der Verwendung von Facebook Social Plugins liegt in der Statik, sprich Unveränderbarkeit des Designs. So z.B. hat die Facebook Like Box einen hässlichen Rahmen, welcher in der Cusomization entfernt werden kann:

Diesen frame kann man eigentlich relativ leicht in zwei Schritten entfernen bzw. verstecken. Beim Generieren der Like Box enthält man einen entsprechenden Code, der wie folgt aussieht:

[php]<div class="fb-like" data-href= data-href="http://www.facebook.com/NAMEDERPAGE" data-width="370"
data-height="200" data-show-faces="true" data-stream="false" data-header="false"></div>[/php]

Um den Rahmen zu entfernen, setzt man den iframe einfache in ein neues div id, welche ich hier einfach likebox-rahmen genannt habe:

[css]<div id="likebox-rahmen"> <iframe src="http://www.facebook.com/plugins/likebox.php?id=XXXXXX&amp;
width=900&amp;connections=16&amp;stream=false&amp;header=false&amp;height=190" scrolling="no"
frameborder="0" style="z-index:9;border:none !important; overflow:hidden; width:900px; height:190px;"
allowtransparency="false"></iframe> </div>[/css]

Über das neue div können wir nun per CSS die likebox ansprechen und mit folgendem Code den Rahmen durch Abdeckung durch das neue DIV verbergen.
An der Stelle “DEINEHINTERGRUNDFARBE” sollte man die Hintergrundfarbe seiner Sidebar oder wo auch immer man die like-box integriert eintragen.
Im letzten Schritt positioniert man das ganze noch so, dass man vom Rahmen der Facebook Like Box nichts mehr sieht.
Hier der Code:

[css]#likebox-rahmen{ border:2px solid #DEINEHINTERGRUNDFARBE; width:894px; z-index:10; height: 156px; overflow: hidden; position:relative; top:-1px; left:-2px; }
#likebox-rahmen iframe{ left:-5px; overflow:hidden; position:relative; top:-1px; }[/css]

Hier das Ergebnis:

Vielen Dank an dieser Stelle an Adam Breckler!

Comments 1

  1. Avatar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.