Implementing Twitter-like Oauth Home Timeline Display Using 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 timeline with Jquery and PHP.

Twitter Home Timeline JSON File.

{ "posts":[
{ 
"favorited": false,
"contributors": null,
"truncated": false, 
"text": "askgif blog http://askgif.com",
"created_at": "Tue Sep 14 06:48:09 +0000 2010", 
"retweeted": false, 
"coordinates": null, 
"source": "<a href="http://labs.askgif.com">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/sumit_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": "askgif", 
 "url": "http://askgif.com", 
 "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.

<?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
}