Want Cool Facebook Like Box For Your Blog?

Interested of having cool Facebook Like box for your blog just like the one you can found at every end of this blog’s articles?

Pretty interesting right?

Personally, I love it so much as although it is simple, it is bold enough to encourage the readers to click the “Like” button and join my fan page.

And for those who have no idea about css, no worries. The steps to get such cool like box are really simple and straightforward.

The Tricks

You need to go to your theme editor page and head straight to the Stylesheet (style.css). At that particular page, scroll down to the last line of the style.css code and paste below code:

.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:500px;  /* can change depending on the size on the content area */
margin-left: auto;
margin-right: auto;
}

.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:500px;  /* can change depending on the size on the content area */
margin-left: auto;
margin-right: auto;
}

.fb_like_top {
overflow:visible;
padding:0;margin:0 0 10px;
width:349px;
height:24px;
background:url("http://lh5.ggpht.com/_u4gySN2ZgqE/TJ3dpjy9PaI/AAAAAAAABr0/PTUXIS8ykps/fblogo%5B3%5D.jpg") no-repeat scroll left top transparent;
}

.fb_like_top a {
height:24px;
width:114px;
background:url("http://lh6.ggpht.com/_u4gySN2ZgqE/TJ3do-mtwuI/AAAAAAAABrw/NXxp85pCaD0/beafan%5B3%5D.jpg") no-repeat scroll left top transparent;
display:block;
margin-left:385px; /* adjust if there is change made for the width */
text-indent:-5000px;
}

.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:475px; /* adjust if there is change made for the width */
height:35px;
}

Then, download this WordPress plugin, WP Facebook Like into your WordPress blog and edit the single.php file by adding below code:

<div class="fb_like_box">
<div class="fb_like_top"><a href="Put your fan page url" rel="nofollow">Be a Fan</a></div>
</div>

*Update the code above with your fan page url.

and that’s all!

You can now have super cool Facebook like box in WordPress blog.

Enjoy!

# The above steps will work with most of WordPress themes out there. If you have any inquiry or want to share something regarding this quick tutorial, do leave Kissing Crust some comments ok?

Credit:  Ariff Shah