Friends if you are looking for professional branding free Facebook like box then you are at the right place and reading this article. I present you with a fresh design of the Facebook Like Box with the CSS stacking effect. I promise you this widget will look awesome your blog. It is very simple to add this Facebook like box on your blog if you are thinking this will be difficult then I want your attention you are just two steps far away from this beautiful Facebook like box widget. I assure your blog reader will definitely as to how you hide your Facebook branding. Hiding Facebook like box branding is not violating the terms and conditions of Facebook. So you are going to install the best Facebook like box widget so far.

New Facebook Like Box Using CSS Stack Effect Installation Tutorial
1. Blogger Dashboard › Select a blog › Layout (Page Element) › Add an HTML/Javascript Gadget
2. Then paste any of the follow widget code in that and save this HTML/Javascript gadget
Note: Must change the “techprevue” with your page id
In general condition, Facebook page URL is as following –
http://www.facebook.com/techprevue
But if you have a very new Facebook page then it may as following –
http://www.facebook.com/pages/techprevue/365334223544209
It is highly recommended to change your Facebook page URL by copying it from your web browser’s address bar. :)
Style 1: Pure Design – For this widget use following code
<style>
.techprevue-fb-like-box-pure{width:280px;height:150px;border-radius:3px;position:relative;background:#FFF;padding:0px 10px 15px 0}.techprevue-fb-like-box-pure,.techprevue-fb-like-box-pure:before,.techprevue-fb-like-box-pure:after{background:#FFF;border:1px solid #0072C4}.techprevue-fb-like-box-pure:before,.techprevue-fb-like-box-pure:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-pure:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #0072C4}
</style>
<div class="techprevue-fb-like-box-pure">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&width=292&height=258&colorscheme=light&show_faces=true&border_color=%23FFF&stream=false&header=false&appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 2: India Design – For this widget use following code
<style>
.techprevue-fb-like-box-india{width:280px;height:150px;border-radius:3px;position:relative;background:#FFF8ED;padding:0px 10px 15px 0}.techprevue-fb-like-box-india,.techprevue-fb-like-box-india:before,.techprevue-fb-like-box-india:after{background:#FFF8ED;border:1px solid #68914F}.techprevue-fb-like-box-india:before,.techprevue-fb-like-box-india:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-india:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #68914F}
</style>
<div class="techprevue-fb-like-box-india">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&width=292&height=258&colorscheme=light&show_faces=true&border_color=%23FFF8ED&stream=false&header=false&appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 3: Shine Design – For this widget use following code
<style>
.techprevue-fb-like-box-shine{width:280px;height:150px;border-radius:3px;position:relative;background:#EDF4FF;padding:0px 10px 15px 0}.techprevue-fb-like-box-shine,.techprevue-fb-like-box-shine:before,.techprevue-fb-like-box-shine:after{background:#EDF4FF;border:1px solid #ABACB2}.techprevue-fb-like-box-shine:before,.techprevue-fb-like-box-shine:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-shine:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #ABACB2}
</style>
<div class="techprevue-fb-like-box-shine">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&width=292&height=258&colorscheme=light&show_faces=true&border_color=%23EDF4FF&stream=false&header=false&appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 4: Sliver Design – For this widget use following code
<style>
.techprevue-fb-like-box-silver{width:280px;height:150px;border-radius:3px;position:relative;background:#E6E8EF;padding:0px 10px 15px 0}.techprevue-fb-like-box-silver,.techprevue-fb-like-box-silver:before,.techprevue-fb-like-box-silver:after{background:#E6E8EF;border:1px solid #ABACB2}.techprevue-fb-like-box-silver:before,.techprevue-fb-like-box-silver:after{content:"";position:absolute;bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-silver:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #ABACB2}
</style>
<div class="techprevue-fb-like-box-silver">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&width=292&height=258&colorscheme=light&show_faces=true&border_color=%23E6E8EF&stream=false&header=false&appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 5: Sky Design – For this widget use following code
<style>
.techprevue-fb-like-box-sky{width:280px;height:150px;border-radius:3px;position:relative;background:#EFF1F6;padding:0px 10px 15px 0}.techprevue-fb-like-box-sky,.techprevue-fb-like-box-sky:before,.techprevue-fb-like-box-sky:after{background:#EFF1F6;border:1px solid #A8B3CF}.techprevue-fb-like-box-sky:before,.techprevue-fb-like-box-sky:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-sky:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #A8B3CF}
</style>
<div class="techprevue-fb-like-box-sky">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&width=292&height=258&colorscheme=light&show_faces=true&border_color=%23EFF1F6&stream=false&header=false&appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 6: Pearl Design – For this widget use following code
<style>
.techprevue-fb-like-box-pearl{width:280px;height:150px;border-radius:3px;position:relative;background:#F2F2F2;padding:0px 10px 15px 0}.techprevue-fb-like-box-pearl,.techprevue-fb-like-box-pearl:before,.techprevue-fb-like-box-pearl:after{background:#F2F2F2;border:1px solid #CFCFCF}.techprevue-fb-like-box-pearl:before,.techprevue-fb-like-box-pearl:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-pearl:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #CFCFCF}
</style>
<div class="techprevue-fb-like-box-pearl">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&width=292&height=258&colorscheme=light&show_faces=true&border_color=%23F2F2F2&stream=false&header=false&appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Please review this widget with your comments.
Great Post Vinay Sir Thanks.
Most welcome Mr Jaiswal
बहुत ही सुन्दर लेख
हिन्दी तकनीकी क्षेत्र की रोचक और ज्ञानवर्धक जानकारियॉ प्राप्त करने के लिये इसे एक बार अवश्य देखें,
लेख पसंद आने पर टिप्प्णी द्वारा अपनी बहुमूल्य राय से अवगत करायें, अनुसरण कर सहयोग भी प्रदान करें
Welcome but do not advertise your blog over here.
Superb Post
Most welcome, Saitand tv…
बहुत सुन्दर और सार्थक प्रस्तुति!
साझा करने के लिए आभार…!
शुभ रात्रि ….!
Roopchand ji thanks!
wow that’s an awsome widget. I have added it to my blog :) Can we increase the widget’s width and height?
Hi Arun you can increase widget’s height and width anytime. At my home page you can see it’s example. Regards
Thank you very much, I have modified it’s height. I am very much interested in Converting my google+ followers widget too like this. Can you do it? :)
Yup! I will do… thanks for this interesting idea!
Thank You. Iam waiting for it! :)
oh this is really awesome :)
Hi there, Most welcome Jiggyasa!
This post is really awesome i like this post
Most welcome! Nilesh…