We all love Facebook. You can catch up with friends, family or colleagues, meet new people, share photos, links and whatnot. One of the most striking feature of Facebook's timeline is inline content embedment. It enables you to view content from third-party websites without having to visit the site. Facebook might be using oEmbed with a lot of modification of their own. Over the last weekend, I tried to create a mock-up of Facebook's inline content embedment with jQuery oEmbed and some AJAX. This tutorial is about how you can create it on your own. I hope you'd enjoy it. :-)Download SourceTry DemoYou might also like:

What is jQuery oEmbed?

oEmbed is an open format which allows sites to embed content from third party sites. You can embed photos, videos, documents, flash players or any other rich multimedia contents (from selected sites). oEmbed is supported by an array of popular sites — from Flickr to Youtube to Vimeo, among others.
jQuery oEmbed is a plugin that uses the oEmbed API to embed content. It's super lightweight (minified version is 4KiB) and, like most jQuery plugins, simple in its use. Here's the syntax:

There's nothing much about the CSS that needs explanation. Only the "oembed-container" class. jQuery.oEmbed, by default, creates a div with class-name "oembed-container". We put some styles to distinguish the embedded content.

The Database and Table

We need a table to store the status messages. I created a very simple table with only two fields — id and content. id is the numeric id of the status message and content is the status message text. To create a table like this, use the following SQL code.

Please note that the table super-simple. Most applications have a user_id field in such tables to identify which user posted the status. But for this simple tutorial, I avoided all this. If you have queries, use the comment form below. :-)

Connect to the Database

Create a new file and save it as config.php. Put the following code in it.

Create the Timeline

When the page is loaded we want the user to see what's posted on the timeline. So, we connect to the database and fetch all the statuses and create a div for each status. The following lines of code will do it. Add them inside <div class='msgs'></div>

Don't forget to place jquery.oembed.min.js in the same directory as index.php

Post Status Messages via AJAX

Now, it's time we add some AJAX functionality to our little application. When the user clicks on share button, we do two things with the help of before submitting it via AJAX. The first thing is to check and remove all HTML tags from the status messages. Secondly, we have to replace URLs with HTML anchor tags. Create new file, functions.js, and put the following two functions in it.

The first function removes all HTML tags and the second function (source: StackOverflow) replaces URLs with HTML anchor tags. (If you're wondering what the functions are, I used Regular Expressions.) Attach functions.js to index.php by adding this line inside <head> tag.

<script type='text/javascript' src='functions.js'></script>

Next, we add these few lines of code inside the <head> tag of index.php

Above code works when the user clicks on the Share button. When no text is entered, nothing happens. If text is entered, we use those JavaScript functions to remove HTML and turn URLs to HTML anchor tags. After sanitizing the text, we make AJAX request to ajaxUpdate.php (which we will create). If the response is "true", the posted message is added to the timeline, and the links in the message are converted to embedded content. If the response is not "true", we alert the user that the message cannot be posted at the moment.
We put the following code in ajaxUpdate.php

This is fairly simple — first, we make sure that the page is accessed only via AJAX. Then we check to see that the status message text is non-empty. If it is not empty, we insert the message to the table and "true" is printed. "false" otherwise.
That is it!

Conclusion

oEmbed also has a PHP library. If you're looking for more control over your application, you may find it helpful. I hope you enjoyed the tutorial. If you have queries, feel free to use the comment form below.

Welcome to Technabled.com

Technabled is a blog on everything technology. It is dedicated to helping you use technology in a better and effective way. The site offers tips, tricks, tutorials and reviews on softwares, web-applications, web-development. Enjoy your stay here. And don't forget to subscribe to the feed to stay connected.