Facebook Type Link Preview


Posted on Apr 22nd, 2014


 

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.

<html>
<head>
	<title></title>
	<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src="jquery.linkpreview.js" type="text/javascript"></script>
	<script type="text/javascript">
		
		$(document).ready(function() {

			$("#url").linkpreview({
				image_no: 1,
				outputDiv: $("#html"),
				loaderDiv: $("#loader"),
				loaderImg: 'indicator_snake.gif',
				css: true
				//processor: 'http://localhost/link_preview/class.linkpreview.php'
			});

		})

	</script>

	<style type="text/css">

		
		#url {
		    border: 1px solid #CCCCCC;
		    border-radius: 5px;
		    color: #696969;
		    left: 50%;
		    margin-left: -200px;
		    padding: 10px;
		    position: relative;
		    width: 400px;
		}

		
		#html {
		    left: 50%;
		    margin-left: -250px;
		    position: absolute;
		    top: 100px;
		}

		body {
			background: #EDEDED;
		}

		#loader{
			display: block;
		    margin-left: 49%;
		    margin-top: 18px;
		}

		
	</style>


</head>
<body>
	<input type="text" id="url" placeholder="Enter an URL to preview">
	<span id="loader"></span>
	<div id="html"></div>
</body>
</html>

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

<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="jquery.linkpreview.js" type="text/javascript"></script>

Next we, initialize the Link_preview plugin.

$(document).ready(function() {

	$("#url").linkpreview({

		//specify the div id where the preview will be displayed
		outputDiv: $("#html"),

		//specify the div id or class where the loader will display
		loaderDiv: $("#loader"),

		//image that you want to use as a loader
		loaderImg: 'indicator_snake.gif',

		// if you want to apply the css along with the html markup
		css: true

		//this wont be required as you are using Ajaxtown's service
		//processor: 'http://localhost/class.linkpreview.php'
	});			

})

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.

<div id="preview">

		<div class="left" id="thumbnail">
			<img width="100" data-src = "" src="">	
		</div>		

		<div class="left" id="content">

			<span class="title"></span>
			<span class="description"></span>
			<span class="url"><a href=""></a></span>

		</div>
		
		<div id="toolbar" class="clearfix"><button id="changeimg">></button></div>
</div>

Next we add the html markup of the input box.

<body>
    <input type="text" id="url" placeholder="Enter an URL to preview">
	<span id="loader"></span>
	<div id="html"></div>
</body>

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

Done !

 


Tutorial: AngularJS FundamentalsThemeforest vs Mojo Themes

Comments


  • Oct 2, 2015, 9:30 AMVidit
    This is great. I have been looking for something like this for days now. I have one question - What URL would I put instead of below if I am using my own server which is in node.js. //processor: 'http://localhost/class.linkpreview.php'
  • Apr 2, 2016, 1:35 AMLeigh Brown
    This would be WAY more helpful as a bbpress plugin - to auto generate once a user submits their post / story. Any plans to develop / support that aspect?
  • May 12, 2016, 10:26 AMAhmet
    Hi, where can I download the class.linkpreview.php?
  • Aug 2, 2017, 6:37 AMSHUBHAM NIGAM
    where to find class.linkpreview.php
  • Aug 14, 2017, 9:51 AMBen
    Hay, as in the preceding questions, I also need the class.linkpreview.php. Can you tell me how to get?
100% Complete