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:

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

<divclass="twitterHandle"></div>

<divclass="twitterID"></div>

<divclass="userName"></div>

<divclass="location"></div>

<divclass="websiteURL"></div>

<divclass="favoritesCount"></div>

<divclass="followersCount"></div>

<divclass="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:

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.

i have tried this example but end up with below error./**/({"errors":[{"message":"The Twitter REST API v1 is no longer active. Please migrate to API v1.1. https://dev.twitter.com/docs/api/1.1/overview.","code":64}]});

I have copy all this code but still its not working for me I put $.getJSON("https://api.twitter.com/1/users/show.json?callback=?&screen_name=kunal2383", function (data) { in single line then also it is not working.

About Me

Kunal Chowdhury is a Windows Platform Development MVP of Microsoft, a Telerik MVP, Nokia Developer Champion, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.