Prem Tiwari - - Facebook, JavaScript, 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
Tags: facebook like link url, facebook like page url, facebook like url, facebook url extractor, Jquery, PHP, url extractor php script, url extractor script, wordpress
