All of you know about Facebook’s post preview process. Just paste any URL in text box and its fetch meta content and image data. In this tutorial we will show you how to extract URL data with PHP and jQuery.
In this example we are using PHP Simple HTML DOM Parser to extract the HTML elements from any URL. This is free library code file, which easily available at https://sourceforge.net/projects/simplehtmldom.
This PHP Simple HTML DOM Parser support for PHP 5+ version. So make sure that you have compatible version to execute this code.
Extract URL Data Like Facebook Using PHP
Lets start with the Index page. In this we created an textarea field, in which you can paste any URL and results will be show in DIV element via ID.
When user type any URL, an jQuery code is called. Which will use regular expression to extract URL and make POST Ajax request to process.php file. An JSON format data will be return, which contain page content and image urls.
In this index page clean thumbnail navigation script also defined. User can select image thumbnail using with Next or Previous icon. So if URL contain more than one image, you can easily select from it.
Note* : Must include ‘jquery-1.9.0.min.js’ in index.html file.
Check it out below Index.html 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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<html> <head> <title>Extract URL Content</title> <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 textarea getUrl.keyup(function() { //user types url in text field //use regular expression to get URL 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 process.php $.post('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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head> <body> <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> </body> </html> |
PHP Request to Extract Title and Meta From URL
Now create process.php file to handle Ajax Post request. This file include PHP HTML DOM parser (requires PHP 5 +), which parse the HTML element and return JSON response.
You can manipulate the returned json data to show required result in preview section.
|
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) { 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 } ?> |
This tutorial explained the process to extract the content from URL and show it in Preview form as Facebook, Twitter and LinkedIn sites doing.
Hope this will help you to achieve similar kind of requirement. Good Luck.
[sociallocker]Download[/sociallocker]
