Facebook is world’s number one social media platform and gives you many widgets for your websites. Today I am going to give you a very nice and simple tutorial on how to create Facebook badge on your websites using jQuery and CSS looks like your Facebook page header, with like count, Like button, Display picture and Cover image.

How to use it:

I have used a jQuery plugin by Fábio Sales its very simple and easy to integrate.

Include jQuery files

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script src="http://demo.phpgang.com/facebook-badge-using-jquery-and-css/jquery.faceBadge.js"></script>
<link rel="stylesheet" href="http://demo.phpgang.com/facebook-badge-using-jquery-and-css/faceBadge.css">

Call jQuery function of faceBadge

<script type="text/javascript">
    $(document).ready(function() {
        $(".test").faceBadge({
        pageId: "9H9Gang", // Your Facebook page name or id
        loaderText: "Creating badge...", // message to show when loading page
        width: 350,  // width of your badge
        coverHeight: 120, // height of cover image
        showDesc: false,  // show your page description 
        linkToPage: true // enable / disable like button
    });
});
</script>

This above jQuery call faceBadge plugin function and put your badge in div with class test. You can increase and decrease size of your badge as per your requirement.

<div class="test"></div>

You can add multiple page badges on a single page.

Demo and Download the code for free is available below.

That’s all I hope this tutorial helps you and please don’t forget to give us your feedback and do share with your friends.