March 5, 2014 8:58 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

How to use it:

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

Include jQuery files

Call jQuery function of faceBadge

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.

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.

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:
  • Ankur

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

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