Tuesday, 25 September 2012

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.

extract url data using PHP and jQuery


<div class="container">
<input type="hidden" id="cur_image" value="0">
<label>Enter the webpage url (Ex:</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 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 id="span_image" >&nbsp;</span>



.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;
 width:550px; height:250px;
 margin:0 auto;
 border:1px solid #eeeeee;
padding:0 10px;
 font-size: 11px;
 font-weight: normal;
 color: #666;

The Javascript

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

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

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

 return true;
 return false;

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