How to Extract a Twitter Profile in API

Twitter's API allows users to search Twitter without visiting Twitter. te can search Twitter searches to your website

Adding gadgets to a website is an excellent way to entertain visitors and show them how tech savvy you are. Twitter gadgets, for example, allow site visitors search twitter and retrieve profile information about any Twitter user. These gadgets work by accessing Twitter's database through its Application Programming Interface. Using HTML and a little JavaScript, you can build your own gadget that search gadget and place it on any Web page you like.

Instructions

1. Launch an HTML editor and paste the code shown below into your document's body section:

   <input type="text" id="twitterName" />
   <input type="button" value="Get Profile" onclick="return getInfo()" />

   <ul>
   <li><div id="userPicture" </div></li>
   <li>Screen Name <div id="userScreenName"></div></li>
   <li>Name <div id="userName"></div></li>
   <li>Creation Date <div id="userCreated"></div></li>
   <li>Location <div id="userLocation"></div></li>
   <li>Followers <div id="userFollowers"></div></li>
   <li>Friends <div id="userFriends"></div></li>
   <li>URL <div id="userURL"></div></li>
   <li>Bio <div id="userBio"></div></li>
   </ul>

   This code creates a text box for entering a Twitter name, a button to trigger a search and an unordered list that contains the profile fields Twitter returns to your Web page.

2. Add the following code to your document's script section:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
   </script>

   twitterURL = "http://twitter.com/users/";

   The first statement makes jQuery functions you need available in your document. The twitterURL variable holds the URL of Twitter's search API.

3. Paste the JavaScript function shown below after the code listed in the previous step:

   function getInfo() {

   var userID = $('#twitterName').val();
   var searchQuery = twitterURL + userID;

   $.getJSON(twitterURL + userID + '.json?callback=?',
   function (results) {

   $('#userFriends').html(results.friends_count + '</b>');
   $('#userBio').html(results.description + '</b>');
   $('#userLocation').html(results.location + '</b>');
   $('#userURL').html('<b>' + results.url + '</b>');
   $('#userScreenName').html('<b>' + results.screen_name + '</b>');
   $('#userName').html('<b>' + results.name + '</b>');
   $('#userFollowers').html('<b>' + results.followers_count + '</b>');
   $('#userCreated').html('<b>' + results.created_at + '</b>');
   $('#userPicture').html('<img src="' + results.profile_image_url + '" height="50" width="50">');

   });
   }

   The getInfo function runs when you click the button you created. GetInfo calls the getJSON function which passes the value stored in twitterURL to Twitter along with the user ID entered in the text box. When Twitter sends back a reply, it stores the retrieved profile information in the results variable. The callback function uses the values in that variable to set the values of the items in your unordered list.

4. Save your document, open it in a Web browser and type the name of a Twitter user in the text box that appears. Click the button to view the profile results that Twitter returns.

Tips & Warnings

• The results variable contains all the data fields shown in this example. The results.screen_name, for example contains the user’s screen name and results.location contains the user’s location. Format these results any way you like.

References

• Twitter Developers: GET Users/profile_image/:screen_name

Resources

• W3Schools.com: JavaScript Objects Introduction