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
live demo
Download Script 
Live DemoJavascript 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 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;
});
});
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);
}
?>
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;
}
{
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;
}
Hi
ReplyDeleteLive Demo Doesn't Work ..
Said : the page you're looking for is empty
Either Its not working at the moment or its too slow but I have been waiting for it for quite a while.
ReplyDeleteDemos hosted on free hosting so that demo little slow
ReplyDeleteTHanks, 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.
ReplyDeleteIs it working with Youtube/Vimeo clips shown underneath (and playable there)?
ReplyDeleteThose aren't working for me.
img not show why....
ReplyDeleteNice script,
ReplyDeletebut its only took title, not description, or any single image :(
regards
var logo=(/src='(.*?)'/m).exec(response)[1];
ReplyDeleteThis demo calling first image src="" from the site script.
Hello Srinivas,
ReplyDeleteTried 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!
Old Code:
ReplyDeletevar 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)
Hi! This is some seriously awesome work!
ReplyDeleteThe 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..
@Download Script
ReplyDeleteHi friends, Please replace the above code in Download Script
Thanks Srinivas again for ur brilliant post. Its one of the best practices i have ever used. Keep up the good work. :)
ReplyDeletesyntax error
ReplyDeleteanonymous()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
I get nothing but javascript errors in the demo.
ReplyDeleteWorks great, thanks Srinivas !
ReplyDeleteTo 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.
this is an awesome work..good job dude
ReplyDeleteThis 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
ReplyDeletehi, you have to consider adding oembed support ;)
ReplyDeleteA security problem : urlget.php?url=urlget.php
ReplyDeleteyou may understand this!
Thanks,
Demo will not work properly - it is in forever wait mode with a valid url in the box
ReplyDeleteThanks!
ReplyDelete/src='(.*?).png'/m.exec(response) is null
ReplyDeletethis 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.
Congratulations. It´s great script. But don´t work image. Thanks
ReplyDeleteI 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
ReplyDeleteHi, is it work with video?
ReplyDeletethank you
the algorithm should be built etc not only for image type png but png or gif or jpeg.
ReplyDeletewhat ? i dont known
its becoz, we need to mention which src is that, whether it is img src or script src...
ReplyDeletenow it is crawling the first src text from the url....
Riyan
images not appearing...plz help...
ReplyDeletenice
ReplyDeleteHi, thanks for the code.
ReplyDeleteActually, i have a problem with "jpeg".
Can that code generate web with "jpeg"?
AUSSSM>>>>>>>>>>>>.
ReplyDeletehow to store it file_get_contents($url); in database or .dat file ..?
ReplyDeletecan get image and how can I get the description of the url too.
ReplyDeletedemo doesn't work
ReplyDelete/* urlget.jsp */
ReplyDelete<%@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/
*/
Hello,
ReplyDeletei need to use the same example in JSF application.. can you please suggest me on the same?
Good Article...
ReplyDeleteThis code is not prefect, please use data mining technique code :(
ReplyDeleteHi, 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)??
ReplyDeletehi dear, it was a good work.
ReplyDeleteBut it works well with your website link only. Also u need to add result part here this search item will appear after posting.
Thanks
Hi Karthikeyan,
ReplyDeleteIf 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
Now a days every website is having og (open graph) meta tag, or simple meta tag which can represents title, image,description of webpage.
ReplyDeleteYou 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.
Can we put DNS instead of domain name?
ReplyDeleteI am unable to fetch images when i put a url there, any idea why they are not showing up?
ReplyDelete@john script sometime fetches images and sometime not. i have no idea if it is me making something wrong or script.
ReplyDeleteThis looks good but it will give an error if the title or image is missing.. Try getting whats in between <img src...
ReplyDeletevar 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 [email protected]
how do we limit the amount of text fetched and show a "show more " link over there?
ReplyDeleteExcellent work....
ReplyDeletethank you
Thanks
ReplyDeleteHey I have been trying to develop a Facebook or Twitter like real-time updates wall but I just can't get my head around it that when a user does an update another user of the system gets it as new item on their wall.
ReplyDeleteYour help on the same will be highly appreciated.
Works great, thanks Srinivas !
ReplyDeleteTo 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 entered URL script references ? Because, for some pages when I enter URL, field left blank