Fun.Think.Wonder - Mabzicle

HOW TO: Remove Facebook Recommendation Box's Border?

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.

Facebook Recommendation plugin has been proven to increase page views and boost the site's activity between visitors and the 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 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.

<style>
.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
You can just set and adjust the width and height according to your style in any part of your website.
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?
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 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 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.

 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)
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 &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="https://www.mabzicle.com/" data-app-id="386945361401193" data-width="300" data-border-color="#FEFEFE" data-height="390" data-header="false"&gt;
&lt;/div&gt;
Notes:

  •                  - 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.
Name

Art,1,Artist,1,bandwidth,1,Blogging,3,Business,3,Camera,1,CISCO,1,COMELEC,1,Connectivity,2,CSC,9,CSC Exams,2,Dating,1,Design,3,DIY,1,Dota,1,Dota 2,4,EaseUS,1,Epic Games,3,explained,1,Facebook,6,Facebook Application,1,Featured,3,Featured Post,1,Flagship Phone,1,food,2,Forms,1,Freelance,1,Fruit,1,Gadget,2,Game,15,GCASH,1,Giveaway,3,Globe,1,Globe Telecom,5,Google,1,Google Doodle,1,Health,11,History,1,How TO,23,Huawei,1,Infographic,1,ISP,1,Job Hiring,4,Job Search,1,Life Hacks,1,Life Style,1,Lifestyle,7,Logo,1,Mid-Range,1,Multimedia,1,Napolcom,1,Networking,1,News,6,Online Job,2,Paper,1,People,1,PH Government,5,Poster,1,PRC,1,Press Release,1,Productivity,1,Promos,1,Redmi,2,Relationship,1,Research,3,Review,2,Reviewer,2,Science,9,Security,1,Smart,1,Smartphone,3,Software,3,Specs,4,Sponsored,2,Standalone,1,Steam,4,Technology,9,Tekken,1,Tip,9,Tips,2,TM,1,Tool,1,Trivia,1,Tutorial,9,Valve,1,ViVO,1,Warcraft,1,Web,2,Windows,2,Winner,1,Xiaomi,1,Youtube,1,
ltr
item
Mabzicle: HOW TO: Remove Facebook Recommendation Box's Border?
HOW TO: Remove Facebook Recommendation Box's Border?
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.
https://1.bp.blogspot.com/-UyerpLE9TRQ/XraDlwdII6I/AAAAAAAAo1o/Md5SF32S_wkCFM-cqM2TDc524ZrbSbtfgCLcBGAsYHQ/s640/remove%2BFacebook%2Brecommendation%2Bbox.jpg
https://1.bp.blogspot.com/-UyerpLE9TRQ/XraDlwdII6I/AAAAAAAAo1o/Md5SF32S_wkCFM-cqM2TDc524ZrbSbtfgCLcBGAsYHQ/s72-c/remove%2BFacebook%2Brecommendation%2Bbox.jpg
Mabzicle
https://www.mabzicle.com/2013/02/remove-facebook-box-border.html
https://www.mabzicle.com/
https://www.mabzicle.com/
https://www.mabzicle.com/2013/02/remove-facebook-box-border.html
false
219040821802169216
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content