How to Fetch Twitter Profile Information using jQuery?


Do you want to show your Twitter profile information (like no. of followers count, status count, location, website URL etc.) in your webpage? Then this post will help you to fetch your profile details from Twitter.

 

In order to implement it, we will use jQuery to fetch the JSON object from Twitter API and populate all the necessary information. Continue reading to know further about the implementation.

 

Introduction

There are many websites that show their Twitter followers count in their website instead of loading the follower button that Twitter provides. When you use the Twitter button, it actually loads the JavaScript that Twitter provides. Sometime it becomes heavy to the site when you have many JavaScripts in your website.

 

Now in case you want to show the followers count, status count, location, website URL etc. of your Twitter profile instead of the default Twitter button, what you have to do? This post will guide you creating the same step-by-step.

 

We will use jQuery to fetch the JSON object from Twitter asynchronously and populate all the required fields that we need in our web application.

 

Implementation Step

First of all we need to integrate the jQuery plug-in in our page. If you already integrated it earlier, you can just skip it. Remember to use the minified latest version of the jQuery plug-in.

 

Let’s add the following line in order to integrate it in our page. It’s a small .js file pointing to jQuery CDN server. We are using 1.7.1 minified version of the file here. Add the following line just before the </head> tag:

 
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>

 

Now inside your <body> … </body> tag, add the following divs based on your requirement:

 
<div class="twitterHandle"></div>
<div class="twitterID"></div>
<div class="userName"></div>
<div class="location"></div>
<div class="websiteURL"></div>
<div class="favoritesCount"></div>
<div class="followersCount"></div>
<div class="statusCount"></div>

 

Make sure to add proper class name to your div tag. We will need the class name in the next step while inserting data. Now the next step is to fetch the JSON data object from Twitter API and populate the records. You should enter the proper Twitter handle and pass it to the API as a query parameter named “screen_name”.

 

Here is the code to fetch the data and populate the data to the respective div tags that we added above:

 
<script type="text/javascript">
    $(document).ready(function () {

$.getJSON("https://api.twitter.com/1/users/show.json?

callback=?&amp;screen_name=kunal2383", function (data) {

            $("div.twitterHandle").text("Twitter Handle : " + data.screen_name);
            $("div.twitterID").text("Twitter ID : " + data.id);
            $("div.userName").text("User Name : " + data.name);
            $("div.location").text("Location : " + data.location);
            $("div.websiteURL").text("Website URL : " + data.url);
            $("div.favoritesCount").text("Favorites Count : " + data.favourites_count);
            $("div.followersCount").text("Followers Count : " + data.followers_count);
            $("div.statusCount").text("Status Count :" + data.statuses_count);
        });
    });
</script>

 

You can insert the above JavaScript code snippet any where in your page and once the web page loading completes, it will call the JSON API to fetch the Twitter profile object.

 

Here is what we will see in the page once the asynchronous data population completes:

 

 

Here is the complete source code for your reference:

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Twitter Profile Demo using jQuery</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js" 
            type="text/javascript"></script>
</head>
<body>
    <div class="twitterHandle"></div>
    <div class="twitterID"></div>
    <div class="userName"></div>
    <div class="location"></div>
    <div class="websiteURL"></div>
    <div class="favoritesCount"></div>
    <div class="followersCount"></div>
    <div class="statusCount"></div>
</body>
<script type="text/javascript">
    $(document).ready(function () {

$.getJSON("https://api.twitter.com/1/users/show.json?

callback=?&amp;screen_name=kunal2383", function (data) {

            $("div.twitterHandle").text("Twitter Handle : " + data.screen_name);
            $("div.twitterID").text("Twitter ID : " + data.id);
            $("div.userName").text("User Name : " + data.name);
            $("div.location").text("Location : " + data.location);
            $("div.websiteURL").text("Website URL : " + data.url);
            $("div.favoritesCount").text("Favorites Count : " + data.favourites_count);
            $("div.followersCount").text("Followers Count : " + data.followers_count);
            $("div.statusCount").text("Status Count :" + data.statuses_count);
        });
    });
</script>
</html>

 

Last but not least, check out the JSON object that the Twitter API returns. You will come to know more about all the data. You can also fetch the last Tweet using this API. Let me know, if you have any queries on this.

 

Don’t forget to connect with me on Twitter and Facebook for technical updates and articles news. Also subscribe to my blog’s Newsletter to get all the updates delivered directly to your inbox. We won’t spam or share your email address as we respect your privacy.


If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Twitter, Facebook, Google+ and LinkedIn. I would love to hear your thoughts and opinions on my articles directly. Also, don't forget to share your views and/or feedback in the comment section below.

7 comments

  1. Tried using my name. It's works very well.

    ReplyDelete
  2. You should wrap some exception handling around data. For example:

    function(data) {
    if(typeof data != 'undefined' && data.id > 0) {

    }
    }

    This way if you get a bad response from twitter or if you don't receive a users twitter data your app doesn't inject a bunch of bad data into the DOM.

    ReplyDelete
  3. It's a good suggestion Jeremy. Thanks for sharing this info.

    Regards,
    Kunal Chowdhury

    ReplyDelete
  4. not working plz define more bro...

    ReplyDelete
  5. Hi Mannu,

    If you copy the code as it is from the above snippet, it will not work. To resolve this, you have to place the following two lines in a single line:

    $.getJSON("https://api.twitter.com/1/users/show.json?
    callback=?&screen_name=kunal2383", function (data) {

    Hope this will now work well. Let me know.

    Thanks & Regards,
    Kunal

    ReplyDelete
  6. Not Working
    NetworkError: 410 Gone

    ReplyDelete
  7. Hii I'm Trying to dao the same but it's not working . What's wrong in this . see here.

    http://jsfiddle.net/6agzv5eg/5/

    ReplyDelete

 
© 2008-2016 Kunal-Chowdhury.com - Microsoft Technology Blog for developers and consumers | Designed by Kunal Chowdhury
Back to top