Facebook Like Extracting URL Data with Jquery and Ajax
Wall Script
Follow Me:
Thursday, June 03, 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;
}

Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


50 comments:

  1. Hi
    Live Demo Doesn't Work ..

    Said : the page you're looking for is empty

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

    ReplyDelete
  3. Demos hosted on free hosting so that demo little slow

    ReplyDelete
  4. 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.

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

    Those aren't working for me.

    ReplyDelete
  6. img not show why....

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

    regards

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

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

    ReplyDelete
  9. 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!

    ReplyDelete
  10. 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)

    ReplyDelete
  11. 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..

    ReplyDelete
  12. @Download Script

    Hi friends, Please replace the above code in Download Script

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

    ReplyDelete
  14. 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

    ReplyDelete
  15. I get nothing but javascript errors in the demo.

    ReplyDelete
  16. 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.

    ReplyDelete
  17. this is an awesome work..good job dude

    ReplyDelete
  18. 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

    ReplyDelete
  19. hi, you have to consider adding oembed support ;)

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

    Thanks,

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

    ReplyDelete
  22. /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.

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

    ReplyDelete
  24. 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

    ReplyDelete
  25. Hi, is it work with video?
    thank you

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

    ReplyDelete
  27. 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

    ReplyDelete
  28. images not appearing...plz help...

    ReplyDelete
  29. Hi, thanks for the code.

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

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

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

    ReplyDelete
  32. demo doesn't work

    ReplyDelete
  33. /* 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/
    */

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

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

    ReplyDelete
  36. 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)??

    ReplyDelete
  37. 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

    ReplyDelete
  38. 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

    ReplyDelete
  39. 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.

    ReplyDelete
  40. Can we put DNS instead of domain name?

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

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

    ReplyDelete
  43. 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

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

    ReplyDelete

Make in India