Thursday, December 13, 2012

Facebook Like Twitter Follower Box using jQuery

Facebook Like box is very popular and you must have seen/implemented on websites. But how about having the same kind of box for your Twitter followers. Well, by default Twitter doesn't provide such plugin. But this can be done using jQuery Plugin Twitter Follow Box.

Twitter Follow Box is simple but powerful jQuery plugin to add facebook like box style widget for twitter. This plugin comes with enough options to customize the twitter follow box widget to match your site design.


How To Use


It is very simple to add twitter follow box to your site. The process is just like adding any other jquery plugins. Add the following code inside head tag. Just download the required CSS and js library and include them along with jQuery library.
<link href="css/followbox.css" rel="stylesheet" type="text/css"></link>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery.followbox.min.js" type="text/javascript"></script>
Now to display the widget inside a div with id #dvTwitterFollower, here is the code to call the plugin. All you need to pass is the twitter username.
$('#dvTwitterFollower').followbox({
    'user' : 'jquerybyexample'
});​
See result below



Available Options


There are many options available for customization. For example, you can change the theme, assign different border color, change width, height and many more. Below is the list of all the available options.
  • user : Twitter user name
  • width : Widget width in pixels
  • height : Widget height in pixels
  • theme : Values can be 'light', 'dark' or 'custom'. Customization can be done only in 'custom' mode
  • border_color : Widget border color
  • bg_color : Widget background color
  • bg_image : Widget background image url. It will override background color
  • title_color : Widget main title color
  • total_count_color : Color of line showing follower count
  • follower_name_color : Color of followers' names
Official Website
Feel free to contact me for any help related to jQuery, I will gladly help you.