March 20, 2024 4:02 am

How to create Facebook badge using jQuery & CSS

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 create Facebook badge using jQuery & CSS

[wpdm_file id=86]DEMO

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.

[wpdm_file id=86]DEMO

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.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

One response to “How to create Facebook badge using jQuery & CSS”

  1. Ankur says:

    I am Not able to download the facebadge plugin from Github it says

    — ‘an error occured while trying to connect to github’.

Leave a Reply

Your email address will not be published. Required fields are marked *