Custom Facebook LIKE Box | Customize Facebook LIKE Box Using CSS

The Facebook Like box placed on your website /blog is probably the easiest way to attract new fans to your Facebook page.

And the same rectangular box can even help convert casual visitors to your site into regular ones. That’s because the photo pile inside the box will show visitors pictures of their friends who are already fans and when they seen a known face, it could increase their relative interest in your site.

Custom Facebook LIKE Box

Customize the Facebook Like Box – CSS

Facebook offers a simple Like Box plugin that you can easily integrate into your website using either JavaScript or IFRAME. You can customize the border color, the height and the width of the Like Box but, officially, nothing more.

That said, if you would like to add a background color to the Like Box to better match your site’s color theme or if you would like to completely remove the Facebook logo and other branding from the box to make it less crowded, you can easily do that with the help of CSS.

To get started, copy the code below and paste it anywhere inside your website template. Change the URL in Line19 where is says data-href= to point to your own Facebook page and you’re done. Enjoy your Custom Facebook LIKE Box!

Adjust the styles .facebookOuter & .facebookInner to get it looking the way you want.
 

<style type=”text/css”>
.facebookOuter {
background-color:#F4F4F4;
width:250px;
padding:10px 0 10px 10px;
height:250px;
border:1px solid #CCCCCC;
}
.facebookInner {
height:250px;
overflow:hidden;
}
</style>

<div class=”facebookOuter”>
<div class=”facebookInner”>
<div class=”fb-like-box”
data-width=”245″ data-height=”290″
data-href=”http://www.facebook.com/fanpagemaker”
data-border-color=”#F4F4F4″ data-show-faces=”true”
data-stream=”false” data-header=”false”>
</div>
</div>
</div>

<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/all.js#xfbml=1”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
</script>

Previous What the @$#@ happen to Godaddy?
Next Add You Own Custom Share Image for Each Page or Post - Wordpress Plugin

About author

Jarrett Gucci
Jarrett Gucci 289 posts

Jarrett Gucci is the owner of Dynasty Web Solutions. A full service Internet presence provider specializing in WordPress development for business owners. Jarrett Gucci along with his team of professionals have designed over 400 WordPress websites. Jarrett Gucci believes strongly in creating websites that are unique, functional and generate referrals.

You might also like

Ninja Tricks 0 Comments

Create a WordPress Menu With Images – No Plugin Needed

WordPress makes it easy to create and adjust navigation menus but one thing that is difficult to do is create a menu that is image based.  Yes there are many

How to YouTube 0 Comments

YouTube Embed Code Options – Have it Autoplay

Here are some problems I face when embedding YouTube videos on my website. First, the user has to click on the “play” button for the video to play. People who

How to YouTube 0 Comments

Change the YouTube Embed Image to Custom Image

If you want a specific preview image for your YouTube video, you’re pretty much out of luck. When you upload a video, YouTube chooses 3 frames from your video based

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply