“In this article i will show you how to get/build a working Facebook 'Like Box' without the blue border.”

Zaterdag 25 mei 2013
Blog / Interesting / How to remove the Facebook Like Box border

Notice: Undefined property: plgContentCodeCitation::$convertEntities in /public/sites/www.fxwebdesign.nl/libraries/domit/xml_saxy_shared.php on line 184

Notice: Undefined property: plgContentCodeCitation::$convertEntities in /public/sites/www.fxwebdesign.nl/libraries/domit/xml_saxy_shared.php on line 184

Notice: Undefined property: stdClass::$profile in /public/sites/www.fxwebdesign.nl/components/com_k2/models/itemlist.php on line 669

Notice: Undefined property: stdClass::$profile in /public/sites/www.fxwebdesign.nl/components/com_k2/models/itemlist.php on line 669

How to remove the Facebook 'Like Box' border

  • Zaterdag 03 december 2011
  • door  Roy Jansen, FX Webdesign
Beoordeel dit project
(2 stemmen)
The Like Box is a social plugin that enables Facebook Page owners to attract and gain Likes from their own website. The Like Box enables users to:

- See how many already like this Page, and which of their friends like it too
- Read recent posts from the Page
- Like the Page with one click, without needing to visit the Page


A nifty little likebox widget, but the widget comes with an ugly blue border that cannot be overridden with css because it is in a facebook iframe.

The Solution: Wrap the likebox in an extra div (with a border color set to your pages background color, and position the wrapper to overlap the likebox).

In this article i will show you how to get/build a Facebook “Like Box” without the (ugly) blue border.
 
Like Box with borderEdit your Facebook Like BoxLike Box without border
 

1. The iframe version

  • This is the more simple version of the box. Just add this code wherever you want the 'non-bordered' box to appear on your website. Change 'http%3A%2F%2Fwww.facebook.com%2Fpages%2FFX-Webdesign%2F165127526910012' to your own 
    Facebook Page URL
    .
<style type="text/css">
#likebox-frame {
	border:2px solid #ffffff;
	height:255px;
    left:-2px;
    overflow:hidden;
    position:relative;
    top:-2px;
    width:285px;
    z-index:10;
}
#likebox-frame iframe {
	left:-5px;
	overflow:hidden;
	position:relative;
	top:-1px;
}
</style>

<div id="likebox-frame">
	<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FFX-Webdesign%2F165127526910012&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe>
</div>

Generate your own “iframe version” Facebook Like Box (without borders):

Attributes:

  • href - the URL of the Facebook Page for this Like Box.
  • width - the width of the plugin in pixels. Default width: 300px.
  • height - the height of the plugin in pixels. The default height varies based on number of faces to display, and whether the stream is displayed. With the stream displayed, and 10 faces the default height is 556px. With no faces, and no stream the default height is 63px.
  • colorscheme - the color scheme for the plugin. Options: 'light', 'dark'
  • show_faces - specifies whether or not to display profile photos in the plugin. Default value: true.
  • stream - specifies whether to display a stream of the latest posts from the Page's wall.
  • header - specifies whether to display the Facebook header at the top of the plugin.
  • border_color - the border color of the plugin.
  • force_wall - for Places, specifies whether the stream contains posts from the Place's wall or just checkins from friends. Default value: false.

2. The XFBML & HTML5 version

  • So, the method works at the Like Box iframe version. What about the XFBML & HTML5 version?
    • Yes! Wrap the likebox in an extra div (with a border color set to your pages background color, and position the wrapper to overlap the likebox).
    As long as you “wrap” the likebox widgetcode in an extra div. Use a code structure like this.
<style type="text/css">
#likebox-frame {
	border:2px solid #ffffff;
	height:255px;
    left:-2px;
    overflow:hidden;
    position:relative;
    top:-2px;
    width:285px;
    z-index:10;
}
#likebox-frame iframe {
	left:-5px;
	overflow:hidden;
	position:relative;
	top:-1px;
}
</style>

<div id="likebox-frame">
	<!-- Facebook Like Box code here. (default width 292px) iframe,XFBML,HTML5 versions. http://developers.facebook.com/docs/reference/plugins/like-box/ -->
</div>
  • Like the article? Finally found out how to remove the Facebook Like Box blue border? wink Please consider a donation or comment. I suspect that like many of you, “scripting is just a hobby for me”. Thank you very much, i'd very much appreciate it.

cialis non genericorder cialis discounted viagra buy cialis
argaiv1821



Aanvullende informatie


Blogitems Kalender

«mei 2013»
madiwodovrzazo
  12345
6789101112
13141516171819
20212223242526
2728293031  

Categoriën






Partnersites
Online Behaviour
Vandaag: 150 | Week: 1201 | Maand: 4956 | Totaal: 154092
Naar Boven