Friday 14 March 2014

Filled Under:

How to create Facebook badge using jQuery & CSS


                     Facebook is world's largest social networking website and it will give you many widgets for your website.Today in this post i have explained that how to create facebook badge on your website using jQuery and css.you can create here same as facebook header with like count,Like Button,Display icture and Cover image.here follow just fea step to create facebook widget.






1. 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">


2. 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>

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


you can add multiple badges on a single web page.
below Demo and Download the complete source code free available.

 




12 comments: