Facebook Type Link Preview


In facebook, you might have noticed that when you paste an URL in the Post Compose box, it automatically retrieves some information from the content of the link.

This is a tutorial to create a Link Preview similar to Facebook. Before that, watch the demo here.

How Link Preview works ?

There is an event listener attached with the input box. The moment an URL is entered, this event listener  triggers and sends the URL to the server.

Now the server gets the url and uses meta extraction logics to fetch the meta tags.  This information is then passed on back to the client. This cannot be achieved only with the help of javascript because of Cross-Origin problems.

How to implement ?

This can be implemented in 2 ways.  One way is to use the free service which Ajaxtown is providing,  And the other way is to download all the files and host them in your server.

Create a file on your server by the name index.html and paste the below code.  Explanation of the code is written after the code block.

Lets see what we have done. First we have added two js libraries, jquery and link_preview.

Next we, initialize the Link_preview plugin.

The above snippet is quite explanatory except the commented processor part. If you are using Ajaxtown’s free service, you can comment it out. If you want to host this file in your server, uncomment this line and mention the url.

If you decide to write your own css, then below is the Link Preview HTML Markup.


Next we add the html markup of the input box, outputDiv ( id=”html) “and loaderDiv.

I have added some css, to make the above markup a bit more beautiful. You can use your own css.

Done !

 Download this project


  1. thank you for the code but it seem not working well with IIS server once i install it its tell me there is an error in the php file as cannot be found.


Leave a Reply