SmexyyWeby

Scripting for Fun and Passion

Fetch Tweets Using jQuery & JSON: TweeteReads


Update: The App right now works best in Mozilla Firefox 7.0+ also sometimes you will get no tweets when using Chrome or other browser. This is not an error but a restriction by twitter on the no of API calls a particular application can make and hence restricted by twitter.

Twitter is growing popular day by day and has already occupied a place in users browsers & smartphones as Apps. The power of the social media apps and other web applications these days is that they allow users to use the app without even the need for visiting the webpage of that app.

I recently had the opportunity to solve the following problem:

Write an HTML page to fetch the top 10 tweets of a user whose Screen Name is entered by the user.

Looks trivial, considering the RSS feed of a twitter user are easily available. You can check the RSS Feed of my tweets at https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=theshubhanshu&count=2

However when writing an HTML page this method of retrieving tweets via RSS won’t work because of the security issues of HTML. The reason is your HTML page will try to do a Cross Site Request [XSS Request] which is not allowed by browsers.

To solve this problem, the web architect community came up with a new format of information exchange between 2 websites called JSON [JavaScript Object Notation] which allows websites to develop APIs to allow other web applications to use their data.

Twitter Supports JSON as one of the formats for data exchange in its API. https://dev.twitter.com/docs/api

To solve the problem stated above. I used Twitter’s JSON API to fetch the latest tweets of any user whose screen_name is given. I used jQuery to publish the tweets on the web page.

function getTweets(){
$("#tweets").html("</pre>
<h1>Loading ...</h1>
<pre>
");
var screen_name = document.getElementsByName("screen_name")[0].value;
$.getJSON("https://api.twitter.com/1/statuses/user_timeline.json?screen_name="+screen_name+"&count=10&callback=?",
 function(data) {
 $("#tweets").html("");
 $.each(data, function(i,item){
 $("

").html(item.text).appendTo("#tweets");
 if ( i == 10 ) return false;
 });
 });
}

The code above uses the jQuery getJSON function to fetch and parse the tweets in JSON format and display them on the webpage.

I used the GET statuses/friends_timeline function of the twitter api.

I added a little bit of styling to the page which rendered the page like this:

TweeteReads

TweeteReads

The full code of the page is

<!DOCTYPE html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
  *{
	margin: 0px;
  }
  body{
	font: 20px cursive;
	margin: 0px;
  }
  #header{
  margin: 0px;
	background-color: #9AE4E8;
	border-bottom: solid 2px black;
  }
  p{
	background-color: #9AE4E8;
	padding: 2px;
	margin: 10px auto;
	border: solid 1px black;
	width: 50%;
  }
  #tweets{
	text-align: center;
  }
  input{
	
    border: 5px solid #9AE4E8;
    border-radius: 5px 5px 5px 5px;
    font: 20px cursive;
	margin: auto;
  }
  input[type="text"]{
	text-align: right;
	width: 50%; 
	
  }
  input[type="submit"]{
	background-color: #4DB8FF;
  }
  #inputPanel{
	margin: 50px auto;
	text-align: center;
  }
  </style>
</head>
<body>
<div id="header">
<h1 align="center">TweeteReads</h1>
<h4 align="center">Designed & Coded by <a href="http://twitter.com/theshubhanshu">@TheShubhanshu</a></h4>
</div>
<div id="inputPanel">
<input type="text" name="screen_name" />
<input type="submit" value="Retrieve Tweets" onclick="javascript: getTweets();" />
</div>

<div id="tweets">

</div>

<script>
function getTweets(){
$("#tweets").html("<h1>Loading ...</h1>");
var screen_name = document.getElementsByName("screen_name")[0].value;
$.getJSON("https://api.twitter.com/1/statuses/user_timeline.json?screen_name="+screen_name+"&count=10&callback=?",
  function(data) {
	$("#tweets").html("");
    $.each(data, function(i,item){
      $("<p />").html(item.text).appendTo("#tweets");
      if ( i == 10 ) return false;
    });
  });
}
</script>

</body>
</html>
The full source code can be downloaded from : https://sites.google.com/site/shubhanshumishra/jsonTest.htm
Please feel free to post a comment if you find any difficulty in using the app.
Feel free to share the information and help others.
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: