Facebook type extract url data using PHP and jQuery

This tutorial showcases an amazing power of PHP. The PHP script is able to extract any particular content of a given page.It can tell you almost all information about the requested url. Ex: page title, page description, keywords from the webpage's meta tag, images and a lot more information.

I've seen facebook as well as google+ use this kind of script to show the url information of any entered url.

The HTML

<div class="container">
<input type="hidden" id="cur_image" value="0">
<label>Enter the webpage url (Ex: http://www.2lessons.info)</label>
<div class="input">
 <textarea class="textInput" id="url" name="url" ></textarea>
 <p class="form_tip" style="color:#D73B96;" id="err_url">.</p>
 <div id="loader">
  </div>
</div>
<div class="load" style="display:none">&nbsp;</div>
<span class="items">
<div id="list_item_title" class="title"></div>
<div id="list_item_url" class="url"></div>
<div id="list_item_description"></div>
<div id="list_item_tags" class="keywords"></div>
</span>
<span id="span_image" >&nbsp;</span>
</div>

The CSS

#previmg{cursor:pointer;}
#nextimg{cursor:pointer;}

.totalimg{ font-size:10px; color:#333333;float:left; margin:5px;}

.textInput {
height: 48px;
line-height: 1.28;
background-color: transparent;
border: 2px solid #d83b97;
-webkit-box-sizing: border-box;
outline: 0;
width: 550px;
}
.container{
 width:550px; height:250px;
 margin:0 auto;
 border:1px solid #eeeeee;
 padding:10px;
}
.items{
float:right;
width:400px;
padding:0 10px;
}
.title{
 font-weight:bold;
}
.keywords{
 margin-top:5px;
}
.url{
 font-size: 11px;
 font-weight: normal;
 color: #666;
}

The Javascript

$(function(){
var loading_image='<img src="images/round-loader.gif" />';
function url_extract()
 {
   if(!isValidURL($('#url').val()))
   {
    $('#err_url').html('Please enter a valid url. url must start with http://');
    return false;
   }
   else
   {
   $('#err_url').html('');
   $('.load').html(loading_image).show();
   var ajaxRequest = $.ajax({
      type: "POST",
      url: "url_fetch.php",
      data: "url="+$('#url').val(),
      cache: false,
      success: function(response)
    {
     $('#span_image').html($(response).fadeIn('slow'));
     $('.images img').hide();
     $('.load').hide();
     $('img#1').fadeIn();
     $('#cur_image').val(1);
     $('#list_item_title').html($('#span_image .title').val());
     $('#list_item_url').html($('#url').val());
     $('#list_item_description').html($('#span_image .desc').val());
     //$('#list_item_tags').html($('#span_image .tags').val());
    }  });
   }
 }

$('#url').live("keyup", function(){
 url_extract();
});
// next image
$('#nextimg').live("click", function(){
 totalImages = $('#total_images').val();
 var firstimage = $('#cur_image').val();
 $('#cur_image').val(1);
 $('img#'+firstimage).hide();
 if(firstimage < totalImages)
 {
  firstimage = parseInt(firstimage)+parseInt(1);
  $('.totalimg').html(firstimage+' of '+totalImages);
  $('#cur_image').val(firstimage);
  $('img#'+firstimage).show();
 }
 else if(firstimage = totalImages){
  $('#cur_image').val(0);
 }
}); 
// prev image
$('#previmg').live("click", function(){
 totalImages = $('#total_images').val();
 var firstimage = $('#cur_image').val();
 
 $('img#'+firstimage).hide();
 if(firstimage>0)
 {
  firstimage = parseInt(firstimage)-parseInt(1);
  $('.totalimg').html(firstimage+' of '+totalImages);
  $('#cur_image').val(firstimage);
  $('img#'+firstimage).show();
 }
 
}); 

}); 
function isValidURL(url){
var RegExp = /(ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?/;

if(RegExp.test(url)){
 return true;
}else{
 return false;
}
}

Features
The above script is full of features

• It extracts any DOM data including title, description, keywords, images
• It only finds those images which have a minimum width of 50 pixels
• It also extracts a thumbnail of youtube videos
• Images are loaded at once. So no wait time in between while scrolling images.
• Extracts 10 images from the specified url
• Gives and option for user to choose between images
• Also counts the number of images that is available 
• It automatically converts all local urls to absolute urls for proper extraction of images
• It can be easily integrated into any website
• Supports a wide range of browsers
• Easy to customize