Image representing Twitter as depicted in Crun...

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 .

Share this post

Advertisement

1 comments

  1. Nice info, but can i used this trick in my Wordpress???

    ReplyDelete

Here are some rules for commenting on Simplex Design blog :
1, Search first ,then ask question. You will get the answer faster
2, All comments except spams are welcome.
3, Please make all requests in English.
4, Do not use generic titles such as Admin or Mod. This confuses readers