4 Customized & Good Looking Facebook Like Box For Blogger

Nowadays, Newbie bloggers get 90% Traffic from Social Media Sites like Facebook and Google+. So, they add Facebook Like Box. But most of the newbies do not get pageviews more than 100 per day. So, To get likes from these 100 visitors, I have created or say Customized these Facebook Like Boxes that will highlight itself and force visitors to like your Facebook page. Actually, these Facebook Like Boxes are created with some coding, By adding some shadows, borders and more. Do you want to get these like boxes? Just scroll down dude!

How to Add Facebook Like Box on Blogger?

That's a quite easy work. You just have to follow below steps:

• Go to Blogger Dashboard > Layout > Add a Gadget
• You can write any work on Title Field.
• Now, Move to Content field.
• Copy and paste the code of the like box you choose from bellow.
• Click on Save, Done! 

1. Yellowish Rounded Facebook Like Box

Yellowing Rounded Facebook Like Box, Sound Good? This Like Box looks very nice. You can Customize its border color and background color. In this picture, I have used Yellow color on border color and very light yellow on background.

Code:

<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/sdk.js#xfbml=1&appId=1378578195761370&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/Username" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>

<style>
.fb_iframe_widget {
box-shadow: -2px -2px 4px 1px;
border: 6px solid #FEBD17;
background: none repeat scroll 0% 0% rgba(254, 189, 23, 0.15);
border-bottom-right-radius: 59px;
border-top-left-radius: 37px;
border-radius: 10px;
border-right: 0px solid;
border-bottom: 0;
}
</style>

Cutomization

• Change  #FEBD17 with the color code you want on borders.
• Change  rgba(254, 189, 23, 0.15) with the color code you want on background.
• Change Username with you Facebook Page URL.

2. Button Shape Facebook Like Box

Actually, This like box looks like a button and very much highlight itself on any webpage. I have used some border and shadow codes to give an effect like a button. You can customize its border radius, border color, and more.. 

Code

<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/sdk.js#xfbml=1&appId=1378578195761370&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/Username" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>

<style>
.fb_iframe_widget {
border-top: 4px solid #FEBD17;
border-left: 4px solid #FEBD17;
border-radius: 10px;
box-shadow: -1px -1px 4px 3px;
background: none repeat scroll 0% 0% rgba(254, 189, 23, 0.14);
}
</style>  

Customization

• Change #FEBD17 with the color you want on border.
• Change  rgba(254, 189, 23, 0.15) with the color code you want on background.
• Change Username with you Facebook Page URL.

3. 3D Facebook Like Box

 In this Like Box, I have given effects that look like 3D. This Facebook Like Box style is created with One side border and all side shadow effect. Let's add the HTML and CSS:

Code

<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/sdk.js#xfbml=1&appId=1378578195761370&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/Username" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>

<style>
.fb_iframe_widget {
border-bottom: 4px solid #3B5998;
border-radius: 10px;
box-shadow: 1px 3px 5px 0px;
background: none repeat scroll 0% 0% rgba(59, 89, 152, 0.07);
}
</style>

Customization

• Change #3B5998 with the color you want on border.
• Change  rgba(59, 89, 152, 0.07) with the color code you want on background.
• Change Username with you Facebook Page URL. 

4. Border Like Box

This Facebook Like box is more that simple. I have added three effects 1) Border 2) Box-Shadow 3) Background Color. These 3 effects make this Like Box more than simple and eye-catching;

Code:

<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/sdk.js#xfbml=1&appId=1378578195761370&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/Username" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>

<style>
.fb_iframe_widget {
border: 4px solid #3B5998;
border-radius: 10px;
box-shadow: 1px 3px 5px 0px;
background: none repeat scroll 0% 0% rgba(59, 89, 152, 0.07);
}
</style>

Customization

• Change #3B5998 with the color you want on border.
• Change  rgba(59, 89, 152, 0.07) with the color code you want on background.
• Change Username with you Facebook Page URL. 

 Final Words From Author

I hope you liked these styles of like boxes. These like boxes are eye-catching as well as Good Looking and does not effect your loading speed. If you liked these like boxes, so please leave your comment and share us as much as you can as our reward! Thank You!

Share this post