Twitter Oauth Home Timeline Display with Jquery and PHP.
Wall Script
Follow Me:
Tuesday, September 14, 2010

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.

facebook tag friends with jquery

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
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


16 comments:

  1. It was such a brilliant article. Srinivas you rocking web man !

    Thanx a lot ..

    ReplyDelete
  2. It's very good, but my Social Network done thank your script, next release i give this script.

    ReplyDelete
  3. how can we access oauth_token,oauth_token_secret

    Thanks

    ReplyDelete
  4. Well, how can I say it.... hmmmmm... I like the fact that you are sharing your code and we all gotta thank you for that but... this is not a tutorial, is just posting the code.

    In the other hand I was testing the demo and it looks like not even your own test connects to Twitter. It does actually request for authorization but when you come back to the site it keeps saying "Add twitter account", I tried ignoring that and posted a tweet which never made it to the twitter website.

    ReplyDelete
  5. Excellent man... i was looking for this information since 10 days.. finally i reached here (destination).

    Thanks Srinivas, keep it up man.. god blesses you..

    Paresh

    ReplyDelete
  6. On your lab page there is option to display more tweets then just the last one. I saw that you are using &page parameter. Can you please explain how to get older tweets with that parameter?

    Thank you

    ReplyDelete
  7. Can you please make a fully working download? I'm trying for days now =(

    ReplyDelete
  8. works great.
    I'm kinda new to Json
    How can I pass parameters?

    For example "count=5" to have only 5 posts.

    $hometimeline = $Twitter->get_statusesHome_timeline();

    Can I do something like ?
    $Twitter->addparameter:count=5;

    ReplyDelete
  9. $hometimeline = Twitter->get_statusesHome_timeline(array('count'=>5));
    try this.

    ReplyDelete
  10. Hi there has been change in API v1.1. how it will reflect.?

    ReplyDelete
  11. Great article. Excellent Writing skills.

    Looking for Twitter Timeline Integration as having issues with ready made scripts. Works like charm.

    I am also Web Developer and run a blog. I have read a log of articles and each article have detailed description with clear images. Love to see such blogger.

    ReplyDelete

Make in India