Facebook Like URL data Extract Using jQuery PHP and Ajax

Author: Zeeshan Rasool | Last updated on January 11th, 2013

Facebook, PHP, Web Design

You have seen in Facebook, that how we give a url and it extract data such as images, title and description. Here now you can get this amazing script at 99Points. You have seen amazing and popular facebook style tutorials which can help you to get some amazing effects on your websites. I have created this awesome tutorial which is 99% same as facebook style. Check the demo and download the source code.

[ad#ad-3]

[ad#co-2]

JQuery Code

// <![CDATA[	
$(document).ready(function(){	

// delete event
$('#attach').livequery("click", function(){

	if(!isValidURL($('#url').val()))
	{
		alert('Please enter a valid url.');
		return false;
	}
	else
	{
		$('#load').show();
		$.post("fetch.php?url="+$('#url').val(), {
		}, function(response){
			$('#loader').html($(response).fadeIn('slow'));
			$('.images img').hide();
			$('#load').hide();
			$('img#1').fadeIn();
			$('#cur_image').val(1);
		});
	}
});	
// next image
$('#next').livequery("click", function(){

	var firstimage = $('#cur_image').val();
	$('#cur_image').val(1);
	$('img#'+firstimage).hide();
	if(firstimage <= $('#total_images').val())
	{
		firstimage = parseInt(firstimage)+parseInt(1);
		$('#cur_image').val(firstimage);
		$('img#'+firstimage).show();
	}
});	
// prev image
$('#prev').livequery("click", function(){

	var firstimage = $('#cur_image').val();
	
	$('img#'+firstimage).hide();
	if(firstimage>0)
	{
		firstimage = parseInt(firstimage)-parseInt(1);
		$('#cur_image').val(firstimage);
		$('img#'+firstimage).show();
	}
	
});	
// watermark input fields
jQuery(function($){
   
   $("#url").Watermark("http://");
});
jQuery(function($){

	$("#url").Watermark("watermark","#369");
	
});	
function UseData(){
   $.Watermark.HideAll();
   $.Watermark.ShowAll();
}
});	
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;
}
}
// ]]>

// <![CDATA[

$(document).ready(function(){

// delete event

$('#attach').livequery("click", function(){

if(!isValidURL($('#url').val()))

{

alert('Please enter a valid url.');

return false;

}

else

{

$('#load').show();

$.post("fetch.php?url="+$('#url').val(), {

}, function(response){

$('#loader').html($(response).fadeIn('slow'));

$('.images img').hide();

$('#load').hide();

$('img#1').fadeIn();

$('#cur_image').val(1);

});

}

});

// next image

$('#next').livequery("click", function(){

var firstimage = $('#cur_image').val();

$('#cur_image').val(1);

$('img#'+firstimage).hide();

if(firstimage <= $('#total_images').val())

{

firstimage = parseInt(firstimage)+parseInt(1);

$('#cur_image').val(firstimage);

$('img#'+firstimage).show();

}

});

// prev image

$('#prev').livequery("click", function(){

var firstimage = $('#cur_image').val();

$('img#'+firstimage).hide();

if(firstimage>0)

{

firstimage = parseInt(firstimage)-parseInt(1);

$('#cur_image').val(firstimage);

$('img#'+firstimage).show();

}

});

// watermark input fields

jQuery(function($){

$("#url").Watermark("http://");

});

jQuery(function($){

$("#url").Watermark("watermark","#369");

});

function UseData(){

$.Watermark.HideAll();

$.Watermark.ShowAll();

}

});

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;

}

// ]]>

[ad#co-4]

index.php

<input type="hidden" name="cur_image" id="cur_image" />
<div class="wrap" align="center">

	<div class="box" align="left">
	
		<div class="head">Link</div>
		<div class="close" align="right">
			<div class="closes"></div>
		</div>
		
		<br clear="all" /><br clear="all" />
		
		<input type="text" name="url" size="64" id="url" />
		<input type="button" name="attach" value="Attach" id="attach" />
		<br clear="all" />
		
		<div id="loader">
			
			<div align="center" id="load" style="display:none"><img src="load.gif" /></div>
			
		</div>
		<br clear="all" />
	</div>

</div>

</div>

</div>

</div>

If you Like this Tutorial and Want to get New Tutorials news by Email, Then Subscribe Here.

fetch.php

I have get images and title using fopen method of php but for description I used get_meta_tags() function which returns meta tags of url. After getting all images I just put a loop and get all images which size is greater than 100px so that small images should not be included. I have created this tutorial separate from our facebook style wall posting and comment application and facebook profile edit. However if you want to add this functionality in that script just download all files and add your code.

<?php
$url = $_REQUEST['url'];
$url = checkValues($url);

function checkValues($value)
{
$value = trim($value);
if (get_magic_quotes_gpc()) 
{
	$value = stripslashes($value);
}
$value = strtr($value, array_flip(get_html_translation_table(HTML_ENTITIES)));
$value = strip_tags($value);
$value = htmlspecialchars($value);
return $value;
}	

function fetch_record($path)
{
$file = fopen($path, "r"); 
if (!$file)
{
	exit("Problem occured");
} 
$data = '';
while (!feof($file))
{
	$data .= fgets($file, 1024);
}
return $data;
}

$string = fetch_record($url);
/// fecth title
$title_regex = "/<title>(.+)<\/title>/i";
preg_match_all($title_regex, $string, $title, PREG_PATTERN_ORDER);
$url_title = $title[1];

/// fecth decription
$tags = get_meta_tags($url);

// fetch images
$image_regex = '/<img[^>]*'.'src=[\"|\'](.*)[\"|\']/Ui';
preg_match_all($image_regex, $string, $img, PREG_PATTERN_ORDER);
$images_array = $img[1];
?>
<div class="images">
<?php
$k=1;
for ($i=0;$i<=sizeof($images_array);$i++)
{
	if(@$images_array[$i])
	{
		if(@getimagesize(@$images_array[$i]))
		{
			list($width, $height, $type, $attr) = getimagesize(@$images_array[$i]);
			if($width >= 50 && $height >= 50 ){
			
			echo "<img src='".@$images_array[$i]."' width='100' id='".$k."' >";
			
			$k++;
			
			}
		}
	}
}
?>
<!--<img src="ajax.jpg"  alt="" />-->
<input type="hidden" name="total_images" id="total_images" value="<?php echo --$k?>" />
</div>
<div class="info">
	
	<label class="title">
		<?php  echo @$url_title[0]; ?>
	</label>
	<br clear="all" />
	<label class="url">
		<?php  echo substr($url ,0,35); ?>
	</label>
	<br clear="all" /><br clear="all" />
	<label class="desc">
		<?php  echo @$tags['description']; ?>
	</label>
	<br clear="all" /><br clear="all" />
	
	<label style="float:left"><img src="prev.png" id="prev" alt="" /><img src="next.png" id="next" alt="" /></label>
	
	<label class="totalimg">
		Total <?php echo $k?> images
	</label>
	<br clear="all" />
	
</div>

<?php

$url = $_REQUEST['url'];

$url = checkValues($url);

function checkValues($value)

{

$value = trim($value);

if (get_magic_quotes_gpc())

{

$value = stripslashes($value);

}

$value = strtr($value, array_flip(get_html_translation_table(HTML_ENTITIES)));

$value = strip_tags($value);

$value = htmlspecialchars($value);

return $value;

}

function fetch_record($path)

{

$file = fopen($path, "r");

if (!$file)

{

exit("Problem occured");

}

$data = '';

while (!feof($file))

{

$data .= fgets($file, 1024);

}

return $data;

}

$string = fetch_record($url);

/// fecth title

$title_regex = "/<title>(.+)<\/title>/i";

preg_match_all($title_regex, $string, $title, PREG_PATTERN_ORDER);

$url_title = $title[1];

/// fecth decription

$tags = get_meta_tags($url);

// fetch images

$image_regex = '/<img[^>]*'.'src=[\"|\'](.*)[\"|\']/Ui';

preg_match_all($image_regex, $string, $img, PREG_PATTERN_ORDER);

$images_array = $img[1];

<?php

$k=1;

for ($i=0;$i<=sizeof($images_array);$i++)

{

if(@$images_array[$i])

{

if(@getimagesize(@$images_array[$i]))

{

list($width, $height, $type, $attr) = getimagesize(@$images_array[$i]);

if($width >= 50 && $height >= 50 ){

echo "<img src='".@$images_array[$i]."' width='100' id='".$k."' >";

$k++;

}

</div>

<?php echo @$url_title[0]; ?>

</label>

<?php echo substr($url ,0,35); ?>

</label>

<?php echo @$tags['description']; ?>

</label>

Total <?php echo $k?> images

</label>

</div>

Download all files and use this awesome tutorial.
[ad#ad-3]

Recommended WordPress Themes Store

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com

Markus Newhart

Yeah. Images don’t load. Would be nice if they did.
Nitin

hello Johannes, your script looks good. We are trying to download it from: ‘http://www.screamlabs.at/dev/fetch/fetch.zip’ but this link is not working.

I was wondering if it has been shifted to some other location? Could you please provide us a new link or email us directly at nitinwaves@gmail.com
Ahsan Habib

nice https://uploads.disquscdn.com/images/e748431cf4f3f448fe1db1f45d1890b6c1db8257a4c7c949047d14dad9e8b534.jpg