Thursday, October 20, 2011

Facebook, Twitter like JSON feeds with PHP, JavaScript, Ajax, jQuery,MySQL


When you go to Facebook or Twitter, The first thing you notice is that the page is loaded and within seconds the status feeds will be displayed. That is because the page is loaded first and after that it sends an ajax request to another page and gets back the feeds in the JSON format and display it using JavaScript & jQuery.

We will demonstrate this with a simple posts from mysql table using PHP and JavaScript...

1 ) Create a mysql database and table 'posts' with the following schema.




CREATE TABLE IF NOT EXISTS `posts` (
`post_id` int(5) NOT NULL AUTO_INCREMENT,
`user_id` int(5) NOT NULL,
`user_name` varchar(50) NOT NULL,
`post` varchar(500) NOT NULL,
`time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`post_id`)

And insert some rows in the table 'posts'



2 ) create a php page 'json-posts.php' that fetches data from database and display it in the JSON format.

json-posts.php

<?php
//database connection
$dbHost='localhost';
$dbUserName='root';
$dbPassWord='';
$dbName = 'twinfo_demos';
$dbLinkConnection = mysql_connect($dbHost,$dbUserName,$dbPassWord) or die("Couldn't make connection.");
$dbSelected = mysql_select_db($dbName, $dbLinkConnection) or die("Couldn't select database");

//select posts from database
$query="select * from posts order by post_id desc";
$result=mysql_query($query) or die("couldn't select data from table");

//create json format text from posts
$json=array();
while($row=mysql_fetch_array($result)){
$from=array('id'=>$row['user_id'],'name'=>$row['user_name']);
$post=array('post_id'=>$row['post_id'],'from'=>$from,'post'=>$row['post'],'time'=>$row['time']);
array_push($json,$post);
}

//display it to the user
header('Content-type: application/json');
echo "{"posts":".json_encode($json)."}";
?>

The above code will fetch the data from database and gives it in the following JSON format...

{
"posts":[
{
"post_id":"3",
"from":{
"id":"103",
"name":"AshokRaj"
},
"post":"Third Post. Third Post. Third Post.",
"time":"2011-10-18 08:37:53"
},
{
"post_id":"2",
"from":{
"id":"102",
"name":"MohanKumar"
},
"post":"Second Post. Second Post. Second Post.",
"time":"2011-10-18 08:37:23"
},
{
"post_id":"1",
"from":{
"id":"101",
"name":"ArunDavid"
},
"post":"First Post. First Post. First Post.",
"time":"2011-10-18 08:37:23"
}
]

3 ) create anothe page 'posts.php' to fetch the posts in JSON format and display it to the user. In that page add the following code to send the ajax request for json data using jquery and display the posts for the user.

<html>
<head>
<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function(){
$.getJSON('json-posts.php', function(json) {//to send a ajax request for json data
var output="";
for(var i=0;i<json.posts.length;i++){//for each posts in the json response
output+="<div>";
output+="<b>"+json.posts[i].from.name+"</b><br/>";
output+=json.posts[i].post+"<br/>";
output+="<small>posted on "+json.posts[i].time+"</small>";
output+="</div>";
}
$('#posts').html(output);
});
});
</script>
</head>
<body>
<div id="posts"></div>
</body>

This will display the json posts in user readable format and also useful for giving API to others through JSON. Make use of my previous post to display the time in friendly readable format.

Live Demo | Download Code

13 comments:

  1. Similarly single line comments should always start with a double slash. To include comments in a JavaScript you can place the lines anywhere within a line.
    learn web design

    ReplyDelete
  2. Socialkik provides an easy way to get a great number of Facebook likes and followers which is today's best method to increase popularity, visibility and market share in the increasingly competitive world of marketing where every company is determined to beat the other out at obtaining a competitive edge and hence retaining, attracting and maintaining their share of likes and followers on Facebook!buy twitter followers

    ReplyDelete
  3. nice sharing love to read your post. i would like to see a post on your blog on psd to cratejoy tips.

    ReplyDelete
  4. Try not to sit around idly utilizing Twitter to point to blog entries, utilize TwitterFeed to post your blog entries specifically onto Twitter. buy twitter followers uk

    ReplyDelete
  5. I must say, I thought this was a pretty interesting read when it comes to this topic. Liked the material. . . . . free facebook video downloader

    ReplyDelete
  6. This is probably one of the finest promotion strategies that any company can follow. Following pages and accounts that serve your target segment will keep you updated with the happenings of your niche and then you can adapt your promotional activities accordingly. BRSM.IO Social Marketing

    ReplyDelete
  7. This not only reduces the chances of having your personal or business pages hijacked, but also prevents friends and family from being bombarded with information about your business.www.gotodiveshack.com

    ReplyDelete
  8. Before building your Twitter marketing plan, you must examine your current Twitter use and the success https://twitter.com/darrenwinters01 it has brought to your business.

    ReplyDelete
  9. A 2009 study conducted at Liverpool Hope University found that people with three or more tattoos had significantly lower levels of self esteem.
    tattoo supply

    ReplyDelete