9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Thursday, June 3, 2010

Facebook Like Extracting URL Data with Jquery and Ajax

Are you looking for facebook like live extracting URL or link data preview while typing the content. In this post I want to explain how to get the cross domain data with jquery and ajax. This is very interesting post I had developed a script just take a look at this
live demo

facebook box

Download Script     Live Demo



Javascript and HTML Code
$('#content').keyup(function(){} - content is the ID of the textbox. Using $(this).val() getting the textbox value.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var content=$(this).val();
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
// Filtering URL from the content using regular expressions
var url= content.match(urlRegex);

if(url.length>0)
{
$("#linkbox").slideDown('show');
$("#linkbox").html("<img src='link_loader.gif'>");
// Getting cross domain data
$.get("urlget.php?url="+url,function(response)
{
// Loading <title></title>data
var title=(/<title>(.*?)<\/title>/m).exec(response)[1];
// Loading first .png image src='' data
var logo=(/src='(.*?).png'/m).exec(response)[1];
$("#linkbox").html("<img src='"+logo+".png' class='img'/><div><b>"+title+"</b><br/>"+url)
});

}
return false;
});
});
//HTML Code
<textarea id="contentbox"></textarea>
<div id="linkbox"></div>
</script>

Why used urlget.php
Ajax origin policy we could not access the cross domain data with ajax request $.get("http://www.yahoo.com",function(response){ });. So that using local file(urlget.php) accessing the cross domain data.

urlget.php
Contains PHP code using file_get_contents function loading the URL data. Eg:urlget.php?url=http://yahoo.com
<?php
if($_GET['url'])
{
$url=$_GET['url'];
echo file_get_contents($url);
}
?>

CSS
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#contentbox
{
width:458px; height:50px;
border:solid 2px #dedede;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom:6px;
}
.img
{
float:left; width:150px; margin-right:10px;
text-align:center;
}
#linkbox
{
border:solid 2px #dedede; min-height:50px; padding:15px;
display:none;
}

Comments
{ 50 comments }
Anonymous said...

Hi
Live Demo Doesn't Work ..

Said : the page you're looking for is empty

Muyiwa Saka said...

Either Its not working at the moment or its too slow but I have been waiting for it for quite a while.

Srinivas Tamada said...

Demos hosted on free hosting so that demo little slow

Muyiwa Saka said...

THanks, its great work. I noticed the regex only picks up addresses starting with http://. I tried out addresses starting with www but they did not work.

Anonymous said...

Is it working with Youtube/Vimeo clips shown underneath (and playable there)?

Those aren't working for me.

Anonymous said...

img not show why....

Buzzknow said...

Nice script,
but its only took title, not description, or any single image :(

regards

Srinivas Tamada said...

var logo=(/src='(.*?)'/m).exec(response)[1];

This demo calling first image src="" from the site script.

Nikhil Jain said...

Hello Srinivas,

Tried the live demo but it doesnt work, may be its because of the host you are using, will use this script in my project and am sure it will work.

As always good job!

Srinivas Tamada said...

Old Code:

var logo=(/src='(.*?)'/m).exec(response)[1];
$("#linkbox").html("<img src='"+logo+"' class='img'/><div><b>"+title+"</b><br/>"+url)

New Code:
var logo=(/src='(.*?).png'/m).exec(response)[1];
$("#linkbox").html("<img src='"+logo+".png' class='img'/><div><b>"+title+"</b><br/>"+url)

Juanma Guerrero said...

Hi! This is some seriously awesome work!

The only thing I wish is that the script waited a moment to trigger the function instead of in every keyup... Sure this is not an issue when someone paste a link, but if changing some part of the url or writing it part by part, then..

Srinivas Tamada said...

@Download Script

Hi friends, Please replace the above code in Download Script

Sasi said...

Thanks Srinivas again for ur brilliant post. Its one of the best practices i have ever used. Keep up the good work. :)

Anonymous said...

syntax error
anonymous()facebookbox.php (Zeile 23)
anonymous()jquery.min.js (Zeile 55)
anonymous()jquery.min.js (Zeile 49)
[Break on this error] _uacct = "UA-4783102-2";\n

Anonymous said...

I get nothing but javascript errors in the demo.

nidzonni said...

Works great, thanks Srinivas !
To get response from script you have to paste (ctrl+V) whole URL. If you type it directly in box you got to wait for a while.
In which part of text in html page of enetered URL script references ? Because, for some pages when I enter URL, field left blank.

infopediaonlinehere said...

this is an awesome work..good job dude

JasonDavis said...

This is a great idea, it does not seem to work on most sites I post though, it also goes on forever/timesout on many URL that I tried. The only page I got to work was tyour demo url of http://www.9lessons.info

cdnpic said...

hi, you have to consider adding oembed support ;)

ZINO said...

A security problem : urlget.php?url=urlget.php
you may understand this!

Thanks,

Anonymous said...

Demo will not work properly - it is in forever wait mode with a valid url in the box

Anonymous said...

Thanks!

Asad kamran said...

/src='(.*?).png'/m.exec(response) is null

this cause your page to never finish the job, track this error.

This Problem is cause by script, when trying to find a png file in response text, but if no png file present in text then logo=null returned that make browser not to update target div.

Federico Navas said...

Congratulations. It´s great script. But don´t work image. Thanks

Federico Navas said...

I think we can´t see image because var logo don´t have correct url. But i don´t know how to do it. Please, if some one know write it. Thanks

Anonymous said...

Hi, is it work with video?
thank you

Tullio said...

the algorithm should be built etc not only for image type png but png or gif or jpeg.
what ? i dont known

Anonymous said...

its becoz, we need to mention which src is that, whether it is img src or script src...

now it is crawling the first src text from the url....

Riyan

Neha said...

images not appearing...plz help...

Anonymous said...

nice

Anonymous said...

Hi, thanks for the code.

Actually, i have a problem with "jpeg".
Can that code generate web with "jpeg"?

Aditya Rajan said...

AUSSSM>>>>>>>>>>>>.

Anonymous said...

how to store it file_get_contents($url); in database or .dat file ..?

Anonymous said...

can get image and how can I get the description of the url too.

Anonymous said...

demo doesn't work

Suman Halder said...

/* urlget.jsp */

<%@page import="java.net.*,java.io.*"%>
<%

try
{
URL hp=new URL(request.getParameter("url"));
URLConnection hpCon=hp.openConnection();
int c;
if(hpCon.getContentLength()>0)
{
InputStream input=hpCon.getInputStream();
while(((c=input.read())!=-1))
out.print((char)c);
input.close();
}
}catch(Exception e)
{
out.println(e);
}
%>

/* my blog:http://darkartsofprogramming.blogspot.com/
*/

Anonymous said...

Hello,
i need to use the same example in JSF application.. can you please suggest me on the same?

Anonymous said...

Good Article...

Anonymous said...

This code is not prefect, please use data mining technique code :(

Gatis Ziediņš said...

Hi, nice job. How can make link extracting in post ho come from mysql database.. There is text`s and links.. Like in facebook news feed (wall)??

Anonymous said...

hi dear, it was a good work.
But it works well with your website link only. Also u need to add result part here this search item will appear after posting.
Thanks

Sachin Padha said...

Hi Karthikeyan,

If you post this URL on FB wall -- http://www.justjammu.com/info then the information it is fetching incorrect title and description, whereas the above URL has Title and description and same URL is fetching correct information on website

Zainul Abedin Shaikh said...

Now a days every website is having og (open graph) meta tag, or simple meta tag which can represents title, image,description of webpage.

You can use PHP functions like 'get_meta_tags' or 'domxpath' to fetch only meta data information.

It could help you to load information faster.

by the way thanks for this nice post.

dalip said...

Can we put DNS instead of domain name?

John said...

I am unable to fetch images when i put a url there, any idea why they are not showing up?

Linda said...

@john script sometime fetches images and sometime not. i have no idea if it is me making something wrong or script.

Hakan Goker said...

This looks good but it will give an error if the title or image is missing.. Try getting whats in between <img src...
var logo=(/<img src="(.*?)"/m).exec(response)[1];

I am looking for a way to extend this script; like getting all images or first ten images to an array and then displaying them in a carousal so that user can pick any image.. I might add the description and the title concatenated but letting user to change the text with their own text. same as pinteres style. and if text is not there then a generic text to remind the text is not there etc.. any volunteers who can help me or try to do this? shoot me an email hakan_goker@hotmail.com

mohan said...

how do we limit the amount of text fetched and show a "show more " link over there?

Budy said...

Excellent work....

thank you

acidmind said...

Thanks

Post a Comment