Sometimes we need to remove some unnecessary design like border now. I will give straight and direct way to remove the Facebook Recommendation Box border using CSS.
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?
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 a border. I will give a 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 elements that remove 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 you here.
.fb-container {
width: 296px;
height: 386px;
overflow: hidden;
}
.fb-container > div {
margin: -1px 0px 0px -1px;
}
</style>
<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="https://www.mabzicle.com/" data-app-id="386945361401193" data-width="300" data-border-color="#00ffff" data-height="390" data-header="false">
</div>
</div>
- Red color texts: Must change with your site and id configuration
Thank you: https://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. Recommendation Box. Note: The Recommendations Feed plugin was deprecated with the release of Graph API v2.3.
There are following useful requirements though not necessary to have.
- The app ID (you need it somehow)
- Color Picker Eyedropper
First how to get your APP ID?
1. Visit here: https://developers.facebook.com/apps/
2. Do you need to put your app name? Here I have a sample: app name
5. Now save that app id later and use it here.
Color Picker Eyedropper
There are many Color Pickers out there, but here I choose this straightforward and small program to demonstrate 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 instant-eyedropper, 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.
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)
NOTE:
Attributes
- 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 <body> tag
<div id="fb-root"></div>Place this code wherever you want the plugin to appear on your page.
<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="https://www.mabzicle.com/" data-app-id="386945361401193" data-width="300" data-border-color="#FEFEFE" data-height="390" data-header="false">Notes:
</div>
- - you need to change it to your domain/site/blogsite.
- - the 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 a slight change in 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.
