Jul

Facebook Like URL data Extract Using jQuery PHP and Ajax

ZeeShaN

AJAX, Facebook, JQuery, PHP, Web Development Tags

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.

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;
}
}
// ]]>

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>

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>

Download all files and use this awesome tutorial.

jQuery Tutorial: Create jQuery and CSS based ...

Facebook Style TextArea with Wall Posting Scr...

How To: Update Your Twitter Status Using PHP....

How can We verify Captcha with Ajax in Codeig...

By HackingEthics

Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.

17 to “Facebook Like URL data Extract Using jQuery PHP and Ajax”

michabbb July 25, 2010 at 1:08 pm
nice work, but there seems to be a problem with the image extraction. i tested a website, the script shows me 11 images, but the switch between them (left and right arrow icon) does not work, shows only 2 of these 11… i tested: blog.macropage.de
ZeeShaN July 25, 2010 at 2:20 pm
Thanks michabbb, it gets error with some urls but not for all. I think when it gets html of url this issue is inside content. Or we can place a check with if image exist then include it.
webandrank July 25, 2010 at 2:32 pm
Nice stuff i hope will work out
Facebook Like URL data Extract Using jQuery PHP and Ajax July 26, 2010 at 12:29 am
[...] awesome tutorial which is 99% same as facebook style. Check the demo and download the source code.Source Link $(document).ready(function() { $('#social_nav_vertical li a').hover(function() { [...]
badboyz July 27, 2010 at 12:07 pm
thanks….. your tutorial was very good…….
ZeeShaN July 27, 2010 at 12:39 pm
@webandrank, @badboyz … Thanks dear
Josh July 31, 2010 at 2:13 am
Hi ZeeShaN,

I have been looking for this exact solution for my website. I am not a software engineer and have no idea what to do with the code you provide. It’s great that the tutorial shows how the code works.

Could you kinkdly give me some tips on how I would integrate it into my site:
I have talked to so many people about being able to populate content into my site, “share to facebook” style and no one has been able to point me in any solution orientated direction.

This is great that you have done this.

Thank you,
Josh
Josh July 31, 2010 at 2:15 am
Oh, to be clear. I want to use your “facebook URL data extract” to populate content INTO my site, not have the code as a button to EXTRACT content from my site.

Thanks,
Josh
ZeeShaN July 31, 2010 at 7:28 am
Thanks Josh: Its my try always that I would create some out standing and awesome work for my users. This code is even simple and clear You just need some help about php to get it done. Good Luck !
Josh July 31, 2010 at 1:22 pm
Hi Zeeshan,

Thanks for your time in response, which is very kind of you

To be clear, I want to make your code into a “widget”, that sits in my bookmarks bar, similar to the “share to facebook” widget, so that I can use your code to populate content INTO my site, with the fb look , as I browse the web. Here is my site:

http://simulacrum.squarespace.com/ ( it’s not much, lol )

Is your code the correct solution for my need? My web host company says they don’t use .php

As I don’t know “a .php” from an API, ( just kidding, but you get my point – I’m not a coder ) I have been running around in circles trying to accomplish, to this novice, what seems to be a very basic need that all the pros I’m talking to are not understanding:

I just want to:

- “share to facebook style” link and meta data ( just like your example above )
-INTO my site ( as a way of populating content in same )
-Exactly like I “share to facebook style” links into by fb profile.

Simple enough to this layman. I’ve been working on driving a solution to this for 4 days, talking to ‘experienced” developers. You’ve got the idea with “URL extraction” I just don’t know how to get my “browser bar” button/widget done.

Am I explaining this clearly?

Thanks for your time in response my friend,
Josh
Srinivas Tamada August 6, 2010 at 5:11 am
Very nice
Amit August 11, 2010 at 6:54 am
Very good script .. well explained. Only prob that michabbb mentioned and you have given solution too..

Thanks Zeeshan for posting.
ZeeShan August 11, 2010 at 8:52 am
Thanks Amit,
agbi oriname August 27, 2010 at 6:36 pm
hi 9c script it worked perfectly.
but my problem is if try to attach ****http://www.punchng.com/Articl.aspx?theartic=Art20100827632898***
i get ****http://www.punchng.com/Articl.aspx?*** instead of

The Punch:: PDP primaries begin September 11
http://www.punchng.com/Articl.aspx?thear...
The primaries are to elect the party’s candidates for the State Houses of Assembly, the National Assembly, governorship and the presidential elections.

i will be grateful if u can help me out on this
ZeeShaN August 27, 2010 at 8:01 pm
Hi , actually some urls creates problem with this. I already mention this above. Thanks
Facebook Style Suggest a Friend Box Using jQuery and PHP. | 99Points August 29, 2010 at 12:13 am
[...] liked my previous facebook like tutorials, specially facebook style wall posting application and facebook like url data extracting with jquery. So I thought to give another script which a web developer wants to put into his [...]
ARIO August 29, 2010 at 12:18 am
I am still learning but I like this one
Can you give more detail how do I add a database and its link shows post 20 links page