20 February 2013

HOW TO: Remove Facebook Recommendation Box's Border?

Facebook Recommendation plugin has been proven to increase page views and boost site's activity between visitors and site/blog. It is Fair enough to use it without any modification on its code. Sometimes you still want to edit some design (color, size, font etc.) now here comes the CSS Trick.

And most website owners wanted to remove the border in the Facebook Recommendation Box. How?

Why do you need to add Recommendations plugin by the way?
Most expert and web developers suggest putting some related posts or widgets that will increase the page views so that it will increase less the bounce rate, and at the same time, it is potentially higher chance to earn MORE money out of it.

Now, sometimes we need to remove some additional design like border now. I will give straight and direct way to remove the Facebook Recommendation Box border using a simple CSS code.

How to Remove Facebook Recommendation Box Border?

Update: March 25, 2013 | 03-25-2013

There's a bit problem here. The Facebook box can't be accessed directly in CSS of HTML elements because it wrapped up in the iframe. However, some geeks solved it by wrapping around it with container div.Here some CSS elemets that removes that border.
Since data-border-color: attribute does not work 100%, now I added some CSS values and put it in a div. I would like to thank here.

.fb-container {
    width: 296px;
    height: 386px;
    overflow: hidden;
.fb-container > div {
     margin: -1px 0px 0px -1px;
<div class="fb-container">
<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/en_US/all.js#xfbml=1&appId=386945361401193";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-recommendations" data-site="http://www.mabzicle.com/" data-app-id="386945361401193" data-width="300" data-border-color="#00ffff" data-height="390" data-header="false">
  • Red color texts: Must change with your site and id configuration
You can just set and adjust the width and height according to your style in any part of your website.
Thank you: http://jsfiddle.net/ for the real-time tests update of the code.
To add Facebook Recommendation Box Plugin you should get its code, to find and grab the code. You need to visit here.Facebook Recommendation Box.

There are following useful requirements though not necessary to have.
  • App ID (you need it somehow)
  • Color Picker Eyedropper
First how to get your APP ID?
2.  Do you need to put your app name? Here I have a sample: app name
 3. Then it requires you to type captcha individual
 4. After that, you will see like this. Now you can get your App ID with this selected/highlighted ID.
5. Now save that app id later and use it here.

Color Picker Eyedropper
There are many Color Picker out there, but here I choose this straightforward and small program to demonstrate on how to get the color. But if you know the background color then it is easier and efficient.

Steps to get the background color
1. You must have a color picker here I used http://instant-eyedropper.com/, and it is free to download and install.

2. Now, if you are done in installing it. 

3. You will see it in your system tray. Now, mouse over the eyedropper icon and left-click + hold so that it will show magnify cross-hair icon to get the hexadecimal color on that mouse-over point.

 4. Here I mouse over the background color of the Facebook Recommendation Box (shown in green point) after I mouse over the eyedropper it displays certain hexadecimal of #fefefe and can be used to edit the border color on the box.
Now, you have done those things. Next is to put those elements(app id and bg color) to the Facebook Recommendations Box Plugin.

To add a Facebook Recommendation Box. Visit here. And add desired attributes(add your app-id)
  • site - the domain to show recommendations for. The XFBML version defaults to the current domain. 
  • action - a comma separated list of actions to show recommendations for. 
  • app_id - will display recommendations for all types of actions, custom and global, associated with this app_id. 
  • width - the width of the plugin in pixels. Default width: 300px. 
  • height - the height of the plugin in pixels. Default height: 300px. 
  • header - specifies whether to show the Facebook header. 
  • colorscheme - the color scheme for the plugin. Options: 'light', 'dark' 
  • font - the font to display in the plugin. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana' 
  • linktarget - This specifies the context in which content links are opened. By default all links within the plugin will open a new window. If you want the content links to open in the same window, you can set this parameter to _top or _parent. Links to Facebook URLs will always open in a new window. 
  • ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). Specifying a value for the ref attribute adds the 'fb_ref' parameter to the any links back to your site which are clicked from within the plugin. Using different values for the ref parameter for different positions and configurations of this plugin within your pages allows you to track which instances are performing the best. 
  • max_age - a limit on recommendation and creation time of articles that are surfaced in the plugins, the default is 0 (we don’t take age into account). Otherwise the valid values are 1-180, which specifies the number of days.

Now to modify border element you need to take note the color highlighted because this is where you will edit the color so that it will remove the color border.

You need to add this in the &lt;body&gt; tag

&lt;div id="fb-root"&gt;&lt;/div&gt;
&lt;script&gt;(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/en_US/all.js#xfbml=1&amp;appId=386945361401193";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));&lt;/script&gt;
Place this code wherever you want the plugin to appear on your page.
&lt;div class="fb-recommendations" data-site="http://mabzicle.blogspot.com/" data-app-id="386945361401193" data-width="300" data-border-color="#FEFEFE" data-height="390" data-header="false"&gt;

  •                  - you need to change it to your domain/site/blogsite.
  •                  - your app id that you set awhile ago.
  •                  - this is the trick. :) it will blend the color of the border to its background color. So you can see no boundaries on it. 
Finally, you will be able to see slight change about your border, and you will also see that it blends in the background color and notably remove the border color.

Hope you will find this helpful.


Featured Offers: