Displaying Twitter Followers as Text

You can show number of Twitter Followers using third-party services ,but in some cases ,showing a gadget from third-party service may break your web / blog design . So ,it's a time for us to look for a solution to display number of followers as text and ,of course ,we can format this number with CSS for blending with our design .
In this post ,I will show you how we can display the number of Twitter followers as text using Twitter api and a bit of Jquery .

Steps  for making this :
1,In Page elements ,create an HTML/Javascript widget  . As I said in many posts ,you can paste the code direct to template file but it's hard to find and remove when error. So it's better if we use a widget .
2,Paste this code to widget content :
<style>
        body { font-family: Arial, Helvetica, sans-serif; }
        a { color: #0066cc; text-decoration: none; }
        a:hover { text-decoration: underline; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
       
        beforecounter = " [<b>";
        aftercounter = "</b>]";

        $.getJSON('http://api.twitter.com/1/users/show/YOUR_TWITTER_ACCOUNT.json?&callback=?',
            function(data) {
                $('#twitter').append(beforecounter + data.followers_count + aftercounter);
        });

    })
    </script>
<h2>Followers</h2>
<ul>
    <li><a href="http://twitter.com/" id="twitter">Twitter</a></li>
</ul>
in the code above ,please change "YOUR_TWITTER_ACCOUNT" to your account name .
the result of will be show in this line
<ul>
    <li><a href="http://twitter.com/" id="twitter">Twitter</a></li>
</ul> 

You can format this code by adding more CSS for displaying as you want . Adding a Twitter icon , make a round border for this element ... sound fun ,right :))
I hope this post helpful to you .