A Wonderful Branding Free Facebook Like Box

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.

3D Facebook Like Box

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&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23FFF&amp;stream=false&amp;header=false&amp;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&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23FFF8ED&amp;stream=false&amp;header=false&amp;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&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23EDF4FF&amp;stream=false&amp;header=false&amp;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&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23E6E8EF&amp;stream=false&amp;header=false&amp;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&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23EFF1F6&amp;stream=false&amp;header=false&amp;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&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23F2F2F2&amp;stream=false&amp;header=false&amp;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.

17 thoughts on “A Wonderful Branding Free Facebook Like Box”

  1. Avatar photo
    Abhimanyu Bhardwaj

    बहुत ही सुन्‍दर लेख

    हिन्‍दी तकनीकी क्षेत्र की रोचक और ज्ञानवर्धक जानकारियॉ प्राप्‍त करने के लिये इसे एक बार अवश्‍य देखें,

    लेख पसंद आने पर टिप्‍प्‍णी द्वारा अपनी बहुमूल्‍य राय से अवगत करायें, अनुसरण कर सहयोग भी प्रदान करें

  2. Avatar photo
    Kavi Mayank Poet

    बहुत सुन्दर और सार्थक प्रस्तुति!

    साझा करने के लिए आभार…!
    शुभ रात्रि ….!

  3. Avatar photo
    Arun Prasath

    wow that’s an awsome widget. I have added it to my blog :) Can we increase the widget’s width and height?

    1. Avatar photo
      Vinay Prajapati

      Hi Arun you can increase widget’s height and width anytime. At my home page you can see it’s example. Regards

      1. Avatar photo
        Arun Prasath

        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? :)

Leave a Comment

Your email address will not be published. Required fields are marked *