Facebook Update Publishing System Explained with PHP Code (and Ajax)

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

Sharing updates on Facebook is a great way telling your friends what you’re upto. But have you realized how update publishing system in Facebook is designed and why it works so awesomely. From a programmer’s point of view, its really an intriguing matter.

Such a system can be designed using PHP and Ajax. In this post we’ll design a similar system and discuss the entire code in detail. Before we start, have a look at the end-product – View Demo.

1. Making Design in HTML – the front end

In designing, we create two things – the space where updates are written and the block where all updates show up.

Facebook Update Publishing System Explained with PHP Code-1

1. Make textarea (ie the space) for users to write update. When ‘Post’ button is clicked, its published.

<textarea id='fb-update'></textarea>
<input type='submit' id='publish-fb-update' value='Post'>

2. The block div#feed-stream is where updates appear.

In the following code, we’re getting 5 recently published updates(by friends and user) from the database using getFeedsForUser PHP function. Results are returned to showFeedsForUser function which displays it inside div#feed-stream.

<div id='feed-stream'><?PHP echo showFeedsForUser(); ?></div>

<?PHP
// Display Feed for User
function showFeedsForUser() {
	$getFeeds = getFeedsForUser(); // Get feeds in array
	$feeds = "<ul id='feeds'>";
		foreach( $getFeeds as $f ) {
			$feeds .= "<li>";
			$feeds .= "<span class='update'> $f[0] </span>"; // Update
			$feeds .= "<span class='update-time'>".date( 'd M', strtotime( $f[1] ) )."</span>"; // Date
			$feeds .= </li>";
		}
	return $feeds .= "</ul>";
}
?>

<?PHP
// Get Updates From Database
function getFeedsForUser() {
	$feeds = array();
	$q = mysql_query( "SELECT * FROM ".FBUPDATES." ORDER BY ptr DESC LIMIT 5" );
	while( $r = mysql_fetch_row( $q ) ) {
		array_push( $feeds, array( $r[2], $r[3] ) );
	}
	return $feeds; // Return array containing older updates
}
?>

Sending Update to Facebook and Displaying it in Feeds – the backend

The magic of everything lies in what happens at the back-end.

Traditionally, when you post something, the page refreshes – like it goes away and appears again. This is very slow, not user-friendly and potentially fatal for your internet plan. Also it makes the overall experience of the website really bad.

Then came ‘AJAX’ or Asynchronous Javascript and XML that allow to-and-fro data transfer between server and browser without page reload. So virtually user perceives as if everything is happening in real-time, instantly. Due to Ajax, websites and app can communicate with server in a much faster and user-friendly manner.

Almost all features of Facebook use this and update publishing is one of them. Here, as an update is posted, its sent to the server where its saved in the database. After storing, a success message and the published update is returned to user browser which is shown at the top of feeds. All this happens in a blink of an eye, in the background, without user knowing anything about it.

1. jQuery Code picking the update entered by user inside textarea.

$('textarea#fb-update').val()

2. Sending update to Facebook server using Ajax.

<script>
$('input#publish-fb-update').click(function() {
	$.post('facebook-ajax.php','fb_update='+$('textarea#fb-update').val()+
'&op=publish_update',function(data){
		if( data ) {
			$('ul#feeds').prepend("<li>"+data+"</li>"); // If success, publish update
		}
	});
	return false;
});
</script>

3. Sent data is received on server and stored in the database. Server returns the update which is displayed in feeds.

<?PHP
$user_id = 123456789; // Every fb user has an id set in session variable, here we have a fixed value as an example
	$fb_update = strip_tags( $_POST['fb_update'] ); // Get update.
	date_default_timezone_set("Asia/Kolkata");
	$datetime = date( "Y-m-d h:i:s", time() ); // Date and time is calculated based on user country. Here we're saving everything as per India time
	if( !empty( $fb_update ) && mysql_query( "INSERT INTO fb_updates VALUES( '', '$user_id', '$fb_update', '$datetime' )") ) {
		echo "<span class='update'> $fb_update </span><span class='update-time'>".date( 'd M', strtotime( $datetime ) )."</span>"; // If saved successfully
	}
	else {
		echo false; // If saving failed, just in case
	}
?>

That’s the entire idea of publishing user update in Facebook and tweets in Twitter. This is nothing too tricky as this can be done with little knowledge of PHP, Javascript and HTML.

If there is any query, mention in the comments and I’ll try and answer them asap. Thanks for reading.

blog comments powered by Disqus