SET OF 17+ CUSTOM FACEBOOK LIKEBOXES

Riyadi April 19, 2017 0 Comments
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.

 How to add it to blogger blog
Copy code of your desired style and paste it in Notepad
Replace Riyadibhai with your facebook fanpage username, Copy new code
Now login to your Blogger Dashboard
Select your blog
Go to Layout > Add Widget > HTML/JavaScript
Paste the code
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%2Friyadibhai&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.riyadibhai.blogspot.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%2FRiyadibhai&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.riyadibhai.blogspot.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%2Friyadibhai&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.riyadibhai.blogspot.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%2Friyadibhai&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.Riyadibhai.blogspot.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%2Friyadibhai&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.riyadibhai.blogspot.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%2Friyadibhai&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.riyadibhai.blogspot.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%2Friyadibhai&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.riyadibhai.blogspot.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%2Friyadibhai&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.riyadibhai.blogspot.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%2Friyadibhai&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%2Friyadibhai&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.riyadibhai.blogspot.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%2Friyadibhai&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.riyadibhai.blogspot.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%2Friyadibhai&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.riyadibhai.blogspot.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%2Friyadibhai&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.riyadibhai.blogspot.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%2Friyadibhai&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.riyadibhai.blogspot.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%2Friyadibhai&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.riyadibhai.blogspot.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%2Friyadibhai&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.riyadibhai.blogspot.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%2Friyadibhai&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.riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>

Credits
Patterns and backgrounds -
subtlepatterns.com
colourlovers.com
google

Widget -
Riyadi Bhai

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..
  1. Happy Blogging...
Tags
Related Article
Riyadi

Posted byRiyadi

As salaam-Aleykum, I'm Ibrahim Riyad, Founder and CEO of Riyadibhai.blogspot.com from Tanzania. I started this blog as a Passion and it now empowering thousands of readers around the globe.Here I usually share news, Adsense Tips, Blogger, wordpress,software, Lifestyle, Health Tips, Games, Widget, Gadget, etc.

0 Comments

Je unamaoni kuhusu makala uliyoisoma dondosha maoni yako hapa