Set of 15+ Custom Facebook Likeboxes - Helper Blogger

Blogger Widgets | Templates | Tutorials

Latest

Tuesday, 23 December 2014

Set of 15+ Custom Facebook Likeboxes


Whats up people, Today I have something very special for you :)
Presenting a set of 15+ custom styles for official facebook likebox widget and I am sure you will definitely like it. Facebook likebox is plugin which is used by almost every website and blog but the main problem is that facebook developers don't provide much options to customize it as you want. So here, By using some CSS code, I have managed to customize background and other things. Now without wasting time lets have a look on them but before that we will see how to add it to blogger blog.

All Styles Demo

How to add it to blogger blog

  1. Copy code of your desired style and paste it in Notepad
  2. Replace helper.blogger with your facebook fanpage username, Copy new code
  3. Now login to your Blogger Dashboard
  4. Select your blog
  5. Go to Layout > Add Widget > HTML/JavaScript
  6. Paste the code
  7. YaY!!! You are done :)
Now lets have a look on styles

Style 1




<style type="text/css">
    .hbfbOuter {
        background-color: #F4F4F4;
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #000000;
        -webkit-box-shadow: inset 0 0 10px #000000;
        box-shadow: inset 0 0 10px #000000;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>


Style 2




<style type="text/css">
    .hbfbOuter {
        background-color: #FFDFFF;
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #AD72A8;
        -webkit-box-shadow: inset 0 0 10px #AD72A8;
        box-shadow: inset 0 0 10px #AD72A8;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>



Style 3




<style type="text/css">
    .hbfbOuter {
        background-color: #CBFFD6;
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #447444;
        -webkit-box-shadow: inset 0 0 10px #447444;
        box-shadow: inset 0 0 10px #447444;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>




Style 4




<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://2.bp.blogspot.com/-63WM6qQ8PIw/VJkf_Hw5QxI/AAAAAAAAD0Q/Mo6RsQ0kvDI/s1600/hb-custom-facebook-likebox1.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #00000;
        -webkit-box-shadow: inset 0 0 10px #000000;
        box-shadow: inset 0 0 10px #000000;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>



Style 5




<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://2.bp.blogspot.com/-tvv61adlm6s/VJkgAXNUFjI/AAAAAAAAD0w/zJpCfBb3bdE/s1600/hb-custom-facebook-likebox2.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #00000;
        -webkit-box-shadow: inset 0 0 10px #000000;
        box-shadow: inset 0 0 10px #000000;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>



Style 6




<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://4.bp.blogspot.com/-fE_VY-EqHQo/VJkgA4vOuYI/AAAAAAAAD0o/mZ6iRp4SqoA/s1600/hb-custom-facebook-likebox3.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #00000;
        -webkit-box-shadow: inset 0 0 10px #000000;
        box-shadow: inset 0 0 10px #000000;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>



Style 7




<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://4.bp.blogspot.com/--DbsKDS3yns/VJkgBu9fXnI/AAAAAAAAD04/ioyHqXCVgXQ/s1600/hb-custom-facebook-likebox4.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #00000;
        -webkit-box-shadow: inset 0 0 10px #000000;
        box-shadow: inset 0 0 10px #000000;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>



Style 8




<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://4.bp.blogspot.com/-gsq-_nZ2cfM/VJkgDD0O6AI/AAAAAAAAD1I/n49o7hMuBUc/s1600/hb-custom-facebook-likebox5.jpg);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #00000;
        -webkit-box-shadow: inset 0 0 10px #000000;
        box-shadow: inset 0 0 10px #000000;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>



Style 9




<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://1.bp.blogspot.com/-LgoaT2r91e8/VJkgDv_C98I/AAAAAAAAD1U/xWUVG0UhgJ4/s1600/hb-custom-facebook-likebox6.png) repeat-y;
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>



Style 10




<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://2.bp.blogspot.com/-sSZv99SpRBc/VJkgDppxALI/AAAAAAAAD1M/wv7S0tkCSqs/s1600/hb-custom-facebook-likebox7.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>



Style 11




<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://3.bp.blogspot.com/-vIOKkGyw8DI/VJkgEUHKEvI/AAAAAAAAD1Y/k_sNFc_UI3Q/s1600/hb-custom-facebook-likebox8.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>



Style 12




<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://1.bp.blogspot.com/-qD_cJrEjZFY/VJkgE6dnX9I/AAAAAAAAD1k/DwMbNzbT2Yg/s1600/hb-custom-facebook-likebox9.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>



Style 13




<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://2.bp.blogspot.com/-x8LVc9d6iT8/VJkf_kXB2bI/AAAAAAAAD0c/mH6k8IFGbac/s1600/hb-custom-facebook-likebox10.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>


Style 14




<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://3.bp.blogspot.com/-BQpSUKysBow/VJkf_ZeFIGI/AAAAAAAAD0U/lUOQzMPSI7A/s1600/hb-custom-facebook-likebox11.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>



Style 15




<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://1.bp.blogspot.com/-IrlH1WC4PQg/VJkgACMXvrI/AAAAAAAAD0k/N6MiD9MjHog/s1600/hb-custom-facebook-likebox12.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>



Style 16




<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://1.bp.blogspot.com/-t-PL9gabCX0/VJlbAVGoGdI/AAAAAAAAD14/pepygmu4vWo/s320/hb-custom-facebook-likebox13.jpg);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>



Style 17




<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://4.bp.blogspot.com/-dRvX7Hr_3U4/VJlcZF3go0I/AAAAAAAAD2E/XVEEJ8kRpdY/s1600/hb-custom-facebook-likebox14.gif);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>


Credits

Patterns and backgrounds -
subtlepatterns.com
colourlovers.com
google

Widget -
Helper Blogger

Note - If you want to share this widget on your blog then you have to link back to this article.

Final Words

Hope you have liked it friends, if you are getting any trouble while installation of widget then feel free to comment below :) I will respond as soon as time allows.

Have a nice day..
Happy Blogging...

2 comments:

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM