Facebook Like URL data Extract Using jQuery PHP and Ajax

Written By: Zeeshan Rasool | Posted In: 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.

JQuery Code

// 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




	
	
		Link

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.

(.+)/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 = '/]*'.'src=["|'](.*)["|']/Ui';
preg_match_all($image_regex, $string, $img, PREG_PATTERN_ORDER);
$images_array = $img[1];
?>

= 50 && $height >= 50 ){
			
			echo "";
			
			$k++;
			
			}
		}
	}
}
?>




	
	
		
	
	

	
		
	
	


	
		
	
	


	
	
	
	
		Total  images

Download all files and use this awesome tutorial.

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

Zeeshan Rasool is the founder and editor of this blog. Beside this, he is an experienced PHP web developer and freelancer. He loves to create best and interactive web apps. You can follow him at twitter @99_Points and facebook OR drop an email at 99points.info@gmail.com

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

neha February 18, 2011 at 7:18 am
its not showing images of most websites,, and even not taking long urls like…
http://www.indorichatora.com/dominos-indore-R25
Shared on FAQPAL.com February 20, 2011 at 8:11 pm
Facebook Like URL data Extract Using jQuery PHP and Ajax…

You have seen amazing and popular facebook style tutorials which can help you to get some amazing effects on your websites. Check the demo and download the source code….
Yusuf Selcuk February 27, 2011 at 10:58 am
Hi. As usual, great.
I’m having a problem.
can not get the picture. taking unnecessary pictures. how should I do to fix it
Yusuf Selcuk February 27, 2011 at 3:25 pm
17 pictures find search results.
when I click on forward or back to show only the first 2 of them. Is this a bug
Johannes March 19, 2011 at 11:02 pm
Hi!

This is my Version of this wonderful Script:
Download: http://www.screamlabs.at/dev/fetch/fetch.zip
Demo: http://www.screamlabs.at/dev/fetch/

Changes:
Fetch with CURL and Fake UserAgent (Some ISPs not accept Standard PHP UserAgent from fopen or what ever)
Image Fetch Bugfix: array_unique Picture. The Same Image will not show twice or more.
Next Prev Bug fixed: If you have 13 Images after 13 comes 1 and behind
1 comes 13..
Video Portal AddOn: Put the URL from a YouTube, MySpace, MyVideo Video in the Adress ROw and the Video will be Embedded after the Description and Images.
After you click the Share Button, all needed Variables will be shown.
Lang is German!

MfG
ZeeShaN March 22, 2011 at 2:44 pm
nice work Johannes
Osmar March 26, 2011 at 10:38 pm
Johannes, I tried to open your links, but it didn’t work.
Johannes March 29, 2011 at 6:01 am
Sehr was down for a while
Jonas March 31, 2011 at 4:18 pm
ZeeShaN i really really like your scripts but i also find them well.. unsuccessfull, example this one doesn’t find the images on my website.. so it’s like not done.. it extract title and description but not images.. i’m currently editing the code for to find images, and will upload a solution soon
Jonas March 31, 2011 at 4:20 pm
but they work like 70-80% all of them and just need a little of editing
ZeeShaN April 1, 2011 at 5:22 pm
Thanks Jonas.
I always tried to give some very best idea or work to the readers but I apologize that there are always some mistakes you should fix. My main focus is to provide a unique or some thing very useful so polishing is not big issue. And I think smart people like you can fix those mistakes
rifqi April 2, 2011 at 2:32 pm
hi, i have a problem with opening next button, prev button. Image, title, url, description, and total image is showing but next and prev button is no showing.
Is there any mistake with my code?
I am using your code.
Thanks.
Rael April 14, 2011 at 5:30 pm
Hi, what should I do if I want to post the extracted data on my “wall”?
rifqi April 15, 2011 at 3:16 am
how to make loader faster?
if i compare what i’ve made and facebook. Facebook is fast when load the page. is there any suggestion how to make it fast?
Jojo Mathews @Around Social April 29, 2011 at 4:33 pm
Great thing buddy… how can I attach it to WordPress theme P2 ?? Please reply soon..
Ethan August 25, 2011 at 8:41 am
Very Informative post. Thanks for posting such content
Thad September 15, 2011 at 9:00 pm
The demo grabs some data.. but when I upload the files.. the script seems to just churn (both IE and FF).
Mzolweb September 24, 2011 at 5:44 pm
Hi!
Images can not find me. Ideas?

Sorry, my bad english.
Andrew September 25, 2011 at 1:24 pm
How do I add this to your facebook wall posts script, also, how do I send/store the returned json data into my msql database from the wall posting script??.
ZeeShaN September 29, 2011 at 5:42 am
Hi Andrew,
you can add this to any page if you know working in jquery. You can just integrate it into there and storing the returned data into same table where you are storing posting of wall.
Joseph October 1, 2011 at 3:07 pm
Hi, Great work. Thanks for the code.. I would like to know how to get URL content like say a news displayed
Ilija October 2, 2011 at 12:52 am
The demo is not workning not in chrome or mozila
Andrew October 4, 2011 at 12:44 pm
Could you supply a script on how to integrate this into the ‘wall’ script and store data into Mysql through Php as I am new to this web-design scene and I have found All your tutorials Most Helpful so far, just stuck with the ‘integration into the ‘wall’ script’, yours most thankfully
bladeone_2k October 20, 2011 at 8:19 pm
get a better webhost and server? I assume the lag is caused by processing power required to curl the site and possible lag when downloading it. I too have this issue.
My script also failed when the total_count of images was above 9 I had to add:
if(firstimage < parseInt($('#total_images').val())){
to ensure the whole number was read correctly
you also dont need the .livequery extension anymore either the builtin .live works great for me.
other than that thanks for such a great post!
ZeeShaN October 23, 2011 at 7:21 am
Yes you are right.
Debugmode November 9, 2011 at 9:34 am
Its very helpful. But in Facebook, what is does is when user paste URL in text-area it will automatically extract url data and display it in div. How can we do like this in our project?
Another issue i got stuck is when user type url in text area and when user press space facebook will extract url details. how can we do this also? Is there any new updates guys for this?
Yuksel Daskin December 6, 2011 at 10:49 am
Thanks for the codes. If you want to see this in .Net, take a look at this open-source project:

http://nalgorithm.wordpress.com/2011/12/05/embedded-url-representation/

It is actually a class library, which is called by an MVC application client by using JQuery and its AJAX features.
Deb December 10, 2011 at 2:12 pm
Your code not work.
Facebook Like URL data Extract Using jQuery PHP and Ajax | 99Points – Bookmarked! | MeSaran January 10, 2012 at 8:15 pm
[...] Facebook Like URL data Extract Using jQuery PHP and Ajax | 99Points – Posted in Delicious Link [...]
Jonathan Domenici February 4, 2012 at 3:34 pm
The script demo don’t work with http://www.youtube.com/watch?v=wD0uSi3UHa0 … is it possible ?!
Jonathan Domenici February 4, 2012 at 3:35 pm
me too
Aman Tilak May 29, 2012 at 7:03 am
This tutorial is great buddy and working properly but not extracting images ….whats should be the reasons…..and thanx for this post
Shah Nawaz June 18, 2012 at 9:26 am
Plz suggest that How to integrate this in Elgg platform?
hadj June 19, 2012 at 8:23 pm
j aime
45 Ajax with jQuery Tutorials July 6, 2012 at 3:39 am
[...] View Tutorial [...]
juanma December 16, 2012 at 5:52 pm
Hi,
I’m having this problem
Warning: fopen() [function.fopen]: URL file-access is disabled in the server configuration in /homepages/32/d360985694/htdocs/fetching/fetch.php on line 21

Warning: fopen(http://www.youtube.com/watch?v=safDq9acVrk) [function.fopen]: failed to open stream: no suitable wrapper could be found in /homepages/32/d360985694/htdocs/fetching/fetch.php on line 21

How can I fix this error,

I’d be really please if you could tell me, thanks in advance!!!
Miguel April 20, 2013 at 5:17 pm
Thanks a lot, very useful, but some bugs should be fixed