Twitter Oauth Home Timeline Display with Jquery and PHP

My previous post Connect Twitter API with OAuth using PHP. In this post I want to explain how to display Twitter Oauth home time line with Jquery and PHP. I had implemented this at labs.9lessons.info it is very simple just follow this post. I hope you like this.

Live Demo

Take a look at this labs.9lessons demo video

Previous post: Connect Twitter API with OAuth using PHP

Twitter Home Timeline JSON File
Take a look at blue color bold words.

{ "posts":[
{        
"favorited": false,
"contributors": null,
"truncated": false,         
"text": "9lessons blog http://9lessons.info",
"created_at": "Tue Sep 14 06:48:09 +0000 2010",         
"retweeted": false,         
"coordinates": null,         
"source": "<a href="http://labs.9lessons.info">labs</a>",         
"in_reply_to_status_id": null,         
"in_reply_to_screen_name": null,         
"in_reply_to_user_id": null,         
"place": null,         
"retweet_count": null,         
"geo": null,         
"id": 24454801041, // Tweet Id        
"user": 
{           
   "follow_request_sent": false,            
   "profile_use_background_image": true,            
   "id": 15761916, //User Id
   "verified": false,            
   "profile_sidebar_fill_color": "FFFFFF",            
   "profile_text_color": "000000",            
   "followers_count": 2242,            
   "protected": false,            
   "location": "Chennai, INDIA",            
   "profile_background_color": "dedede", 
   "listed_count": 170,            
   "utc_offset": 19800,
   "statuses_count": 1097,  
   "description": "Engineer, Blogger, I love skyblue web",            
   "friends_count": 80, 
   "profile_link_color": "ad0000",
   "profile_image_url": "http://url/srinivas_normal.jpg", 
   "notifications": false,            
   "show_all_inline_media": false,            
   "geo_enabled": false,            
   "profile_background_image_url": "http://url/newbgx.png",            
   "name": "Srinivas Tamada ",            
   "lang": "en",            
   "profile_background_tile": false,            
   "favourites_count": 9,            
   "screen_name": "9lessons",            
   "url": "http://9lessons.info",            
   "created_at": "Thu Aug 07 10:47:26 +0000 2008",            
   "contributors_enabled": false,            
   "time_zone": "Chennai",            
   "profile_sidebar_border_color": "333333",            
   "following": true        
}     
}, 

{
// Second Tweet...
},
{
// Third Tweet...
}

]}

home.php
Contains javascript and PHP code. $(".mytweets").click(function(){}) - mytweets is the class name of anchor tag using $.getJSON() functions calling tweets.json file with passing $user_session.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.timeago.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".mytweets").click(function()
{
$.getJSON("tweets.json?user=<?php echo $user_session;?>",
function(data)
{
$.each(data.posts, function(i,data)
{
// Reading JSON file take a look at above code bold blue color words.
var id=data.id;
var text=data.text;
var created_time=data.created_at;
var screen_name=data.user.screen_name;
var image=data.user.profile_image_url;
var source=data.source;

var div_data ="<div class='twitter_status' id='"+id+"'><img src="+image+" class='twitter_image'/><a href='http://twitter.com/"+screen_name+"'>"+screen_name+"</a> "+text+"<br/><div class='twitter_posted_at'><span class='timeago' title='"+created_time+"'></span><i>via "+source+" </i></div></div>";
$(div_data).appendTo(".tweets");
$(".timeago").timeago(); // jquery timeago plugin converting into timestamp
});
});
return false;
});
});
</script>
<a href='#' class='mytweets'>My Tweets </a>
<div class='tweets'></div>

.htaccess file code
$.getJSON function much flexible .json So that using .htacces file rewriting tweets.php to tweets.json.

RewriteEngine on

RewriteRule tweets.json$ tweets.php

Library http://github.com/jmathai/twitter-async

tweets.php (About JSON code is the output)
Contains PHP code you can download the library files from my previous post. Using method get_statusesHome_timeline() getting twitter home timeline json file. More information about methods click here

<?php
include("db.php");
include 'EpiCurl.php';
include 'EpiOAuth.php';
include 'EpiTwitter.php';
$consumerKey='xxxxxxxxxxxxxxxxxxxx';
$consumerSecret='xxxxxxxxxxxxxxxxxxxx';

if($_GET['user'])
{
$user=$_GET['user']; // user session
// Getting stored oauth_token and oauth_token_secret values form users table
$sql=mysql_query("select oauth_token,oauth_token_secret from users where user='$user'");
$row=mysql_fetch_array($sql);
$oauthToken=$row['oauth_token'];
$oauthSecret=$row['oauth_token_secret'];
if(strlen($oauthToken)&gt;5 && strlen($oauthSecret)>5 )
{
$Twitter = new EpiTwitter($consumerKey, $consumerSecret);
$Twitter->setToken($oauthToken,$oauthSecret);
$hometimeline = $Twitter->get_statusesHome_timeline();
$tweets=json_encode($hometimeline-&gt;response);
$final = '{"posts":'.$tweets.'}';
echo $final;
}
}
?>

CSS

.twitter_status
{
min-height:60px;
padding:6px;
border-bottom:solid 1px #DEDEDE
}
.twitterr_status a
{
color:#3cf;
text-decoration:none
}
.twitterr_status a:hover{
color:#3cf;
text-decoration:underline
}
.twitter_image{
float:left;
margin-right:14px;
width:50px;
height:50px;
padding:3px;
}
.twitter_posted_at{
font-size:11px;
padding-top:4px;
color:#999
}