Coding Platform: URL data extraction like facebook

When you enter a url, then the main data like title, logo, etc. of the page to which the url takes you, are shown. This is called URL extraction. The best example you can see is facebook. Go to facebook homepage, enter the url in its status box. As soon as you type the url ,it shows you the extracted contents of the page corresponding to the url typed.

Let's write a simple script in PHP to show URL extraction. Mainly it will be css, javascript and html. We will use only file_get_contents(url) function of PHP.

Here the code goes...............

Put this code in a text file and save as .html.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>URL Extraction like facebook</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 $("#linkbox").keyup(function()
 {
 var content=$(this).val();
 var regex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
 var link= content.match(regex);
 if(link!=null && link.length>0)
 {
  $("#databox").slideDown('show');
  $("#databox").html("<img src='link_image.gif'>");
  $.get("getdata.php?link="+link,function(data)
  {
   if(data != null & data.length > 0)
   {
    var title=(/<title>(.*?)<\/title>/m).exec(data)[1];
    var logo=(/src='(.*?)'/m).exec(data)[1];
    if(logo && title)
    $("#databox").html("<img src='"+logo+"' class='img'/><div><b>"+title+"</b><br/>"+link);
   }
  });
 }
 return false;
 });
});
</script>
<style>
#linkbox
{
width:500px; height:100px;
border:solid 2px #bbbbbb;
font-size:14px;
margin-bottom:6px;
}
.img
{
float:left; width:150px; max-height: 100px; margin-right:10px;
text-align:center;
}
#databox
{
border:solid 2px #bbbbbb; width: 500px; min-height:100px; padding:15px;
display:none;
}
</style>
</head>
<body>
<div style="margin:50px; padding:10px; width:460px">
<div style="height:25px">
<div style="float:left"><b>Enter url</b><br />e.g., http://thecodinglessons.blogspot.com</div></div><textarea id="linkbox"></textarea><div id="databox"></div></div>
</body>
</html>

link_image.gif - take any image which shows loading picture and put its name in place of link_image.gif.
getdata.php - it is the PHP file which extracts the site data. Its code goes here.......

<?php
if($_GET['link'])
{
 echo file_get_contents($_GET['link']);
}
?>

The title and logo extraction is done in javascript code.

Coding Platform

Pages

Sunday, September 15, 2013

URL data extraction like facebook - Simple script in PHP

1 comment: