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.
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.
Generate your own “iframe version” Facebook Like Box (without borders):
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).
- Like the article? Finally found out how to remove the Facebook Like Box blue border? 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.