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

Abhishek Saha

Abhishek Saha is a programmer from Bangalore, India. He has a background in Electrical & Electronics. He works with Cognizant professionally and uses/develops various other PHP and JavaScript frameworks and libraries. He loves to figure out how things work and use that knowledge again in his work. Abhishek loves clean, commented and simple code. When he's not coding, he spends most of his time with his friends and playing Dota.

Related Posts
Comments ( 3 )
  1. NovoGeek
    April 23, 2014 at 6:41 am
    Reply

    Many thanks. This is awesome!

  2. maillot france coupe du monde 2014
    May 22, 2014 at 5:10 am
    Reply

    maillot france coupe du monde 2014

    Hi, I think your website might be having browser compatibility issues. When I look at your website in Chrome, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, ver…

    • Abhishek Saha
      Abhishek Saha
      May 22, 2014 at 1:17 pm
      Reply

      I don’t consider IE as a browser. It is a bug created by Microsoft.

Leave a reply
Captcha Click on image to update the captcha .