By: Prem Tiwari | Last Updated: | In: Facebook, Javascript & Ajax, PHP Tutorial
If you looking for extracting URL data like facebook or link data preview while typing the content. I have used PHP function to fetch the webpage content as a string and used PHP Domdocument object to extract the meta title and description part.
.HTML Code
1 2 3 4 5 6 | <div class="extract_url"> <img id="loading_indicator" src="images/ajax-loader.gif"> <textarea id="get_url" placeholder="Enter Your URL here" class="get_url_input" spellcheck="false" ></textarea> <div id="results"> </div> </div> |
Java Script Code Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var getUrl = $('#get_url'); //url to extract from text field getUrl.keyup(function() { //user types url in text field //url to match in the text field var match_url = /\b(https?):\/\/([\-A-Z0-9.]+)(\/[\-A-Z0-9+&@#\/%=~_|!:,.;]*)?(\?[A-Z0-9+&@#\/%=~_|!:,.;]*)?/i; //returns true and continue if matched url is found in text field if (match_url.test(getUrl.val())) { $("#results").hide(); $("#loading_indicator").show(); //show loading indicator image var extracted_url = getUrl.val().match(match_url)[0]; //extracted first url from text filed //ajax request to be sent to extract-process.php $.post('extract-process.php',{'url': extracted_url}, function(data){ extracted_images = data.images; total_images = parseInt(data.images.length-1); img_arr_pos = total_images; if(total_images>0){ inc_image = '<div class="extracted_thumb" id="extracted_thumb"><img src="'+data.images[img_arr_pos]+'" width="100" height="100"></div>'; }else{ inc_image =''; } //content to be loaded in #results element var content = '<div class="extracted_url">'+ inc_image +'<div class="extracted_content"><h4><a href="'+extracted_url+'" target="_blank">'+data.title+'</a></h4><p>'+data.content+'</p><div class="thumb_sel"><span class="prev_thumb" id="thumb_prev"> </span><span class="next_thumb" id="thumb_next"> </span> </div><span class="small_text" id="total_imgs">'+img_arr_pos+' of '+total_images+'</span><span class="small_text"> Choose a Thumbnail</span></div></div>'; //load results in the element $("#results").html(content); //append received data into the element $("#results").slideDown(); //show results with slide down effect $("#loading_indicator").hide(); //hide loading indicator image },'json'); } }); //user clicks previous thumbail $("body").on("click","#thumb_prev", function(e){ if(img_arr_pos>0) { img_arr_pos--; //thmubnail array position decrement //replace with new thumbnail $("#extracted_thumb").html('<img src="'+extracted_images[img_arr_pos]+'" width="100" height="100">'); //show thmubnail position $("#total_imgs").html((img_arr_pos) +' of '+ total_images); } }); //user clicks next thumbail $("body").on("click","#thumb_next", function(e){ if(img_arr_pos<total_images) { img_arr_pos++; //thmubnail array position increment //replace with new thumbnail $("#extracted_thumb").html('<img src="'+extracted_images[img_arr_pos]+'" width="100" height="100">'); //replace thmubnail position text $("#total_imgs").html((img_arr_pos) +' of '+ total_images); } }); }); </script> |
PHP Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <?php if(isset($_POST["url"])) { $get_url = $_POST["url"]; //Include PHP HTML DOM parser (requires PHP 5 +) include_once("include/simple_html_dom.inc.php"); //get URL content $get_content = file_get_html($get_url); //Get Page Title foreach($get_content->find('title') as $element) { $page_title = $element->plaintext; } //Get Body Text foreach($get_content->find('body') as $element) { $page_body = trim($element->plaintext); $pos=strpos($page_body, ' ', 200); //Find the numeric position to substract $page_body = substr($page_body,0,$pos ); //shorten text to 200 chars } $image_urls = array(); //get all images URLs in the content foreach($get_content->find('img') as $element) { /* check image URL is valid and name isn't blank.gif/blank.png etc.. you can also use other methods to check if image really exist */ if(!preg_match('/blank.(.*)/i', $element->src) && filter_var($element->src, FILTER_VALIDATE_URL)) { $image_urls[] = $element->src; } } //prepare for JSON $output = array('title'=>$page_title, 'images'=>$image_urls, 'content'=> $page_body); echo json_encode($output); //output JSON data } ?> |
CSS Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <style type="text/css"> .extract_url { font-family: 'lucida grande',tahoma,verdana,arial,sans-serif; font-size: 11px; width: 500px; min-height:100px; } .get_url_input { width: 100%; border: 1px solid #8E9CA4; height: 25px; padding-left: 10px; font-family: Arial, Helvetica, sans-serif; padding-right: 30px; min-height: 50px; } .extracted_thumb { float: left; margin-right: 10px; } #loading_indicator{ position: absolute; margin-left: 480px; margin-top: 8px; display:none; } #results{ display:none; } a:link { color: #0066CC; } .thumb_sel { float: left; height: 22px; width: 55px; } .thumb_sel .prev_thumb { background: url(images/thumb_selection.gif) no-repeat -50px 0px; float: left; width: 26px; height: 22px; cursor: hand; cursor: pointer; } .thumb_sel .prev_thumb:hover { background: url(images/thumb_selection.gif) no-repeat 0px 0px; } .thumb_sel .next_thumb { background: url(images/thumb_selection.gif) no-repeat -76px 0px; float: left; width: 24px; height: 22px; cursor: hand; cursor: pointer; } .thumb_sel .next_thumb:hover { background: url(images/thumb_selection.gif) no-repeat -26px 0px; } .small_text{ font-size: 10px; } </style> |
.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
facebook like link url, facebook like page url, facebook like url, facebook url extractor, Jquery, PHP, url extractor php script, url extractor script, wordpress
