Fetch url title, description, keywords and logo image with PHP and jQuery

FETCH URL TITLE, DESCRIPTION, KEYWORDS AND LOGO IMAGE WITH PHP AND JQUERY

Most of the Social networks getting the URL information while you typing the url. Here I will explaing you about getting url information (title, description and logo image) from cross domain with jQuery, ajax and php. Without server side script we can’t make the cross domain request.

HTML and Javascript Code :
Here i am creating one textfield for getting url and submit button for getting information form php-ajax request.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
$( "#searchForm" ).submit(function( event ) { 
                event.preventDefault(); 
                var $form = $( this ),
				
                term = $form.find( "input[name='url']" ).val(),
                postUrl = $form.attr( "action" );
 
                var posting = $.post( postUrl, { getInfoFor: term } );
 
                posting.done(function( data ) {
                                data = jQuery.parseJSON(JSON.stringify(data));
                                var res = "";
                                if(data.title){
                                                res += "<p class='title'>"+data.title+"</p>";
                                }
                                if(data.description){
                                                res += "<p class='sub-title'>"+data.description+"</p>";
                                }
                                if(data.logo){
                                                res += "<img src='"+decodeURIComponent(data.logo)+"' />";
                                }
                                $('#result').html(res);
                });
});
</script>
// Form
<form action="get_url_data.php" id="searchForm">
  <input type="text" name="url" placeholder="Enter the valid URL, Eg:http://techniqzone.com/">
  <input type="submit" value="Get URL Info">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result" class="urlInfo-container">

get_url_data.php
Here we using PHP for cross domain request. and here i am using JSON method for send and get response.

<?php
	header('Content-Type: application/json');
	function get_page_info($url){
		$urlInfo=array();
		$str = file_get_contents($url);
		$tags = get_meta_tags($url);
		if(strlen($str)>0){
						$str = trim(preg_replace('/\s+/', ' ', $str));
						preg_match("/\<title\>(.*)\<\/title\>/i",$str,$title);
						$urlInfo['title']=$title[1];
						$urlInfo['description']=$tags['description'];
						$urlInfo['keywords']=$tags['keywords'];
						preg_match('/< *img[^>]*src *= *["\']?([^"\']*)/i', $str, $image);
						if(count($image)>1)
						$urlInfo['logo']=$image[1];
						else
										$urlInfo['logo']=null;
						return $urlInfo;
		}
	}
	$_POST['getInfoFor'] = 'http://google.co.in/';
	if(isset($_POST['getInfoFor'])){
		$siteInfo = get_page_info($_POST['getInfoFor']);
		echo json_encode($siteInfo);
	}else{
		echo "Request Method Not Allowed!";
	}
?>

In the above PHP,
file_get_contents() is used to get the contents from given url.
get_meta_tags() is used to get the meta information from given url.

Leave a Reply

Your email address will not be published. Required fields are marked *