Exactly Facebook Like URL Parsing Using PHP & Jquery

When you post an URL in your Facebook stats area it will automatically collect data of that URL and make a snippet for you. Have you ever think what logic is it behind?  How can we do it? Today we will explain you step by step how to create it using PHP and JQUERY. Have a look at demo below.
Exactly Facebook Like URL Parsing Using PHP & Jquery


demo

download

If you observer carefully it will collect three major thing.
1)Page-Title
2)Page Meta Description
3)Images in that page.
Once you got this you can post on you status.

Inorder to do this we will do following steps.
Step1:Take the input URL form user. Step2:Sent the URL to PHP script getdata.php using AJAX. Step3:Extract the Page Title , Meta Description ,Images and sent it back in JSON format. Step4: Display the response information to user. index.html *HTML *

**<span>EX:-http://www.techumber.com</span> 
<span id="loading" style="float:right">  
<img src="loading.gif" />  
</span>  
<div class="fb-box-wrap">  
<textarea class="" name="urlinput" id="urlinput" placeholder="Write something...">  
</textarea>  
<div id="databox"></div>  
</div>  
** 

This is just simple html code.
*JQUERY *

**<script type="text/javascript"> 
$(document).ready(function(){ 
$("#urlinput").keyup(function(){ 
//showing loading icon on top 
$("#loading").show(); 
$("#databox").slideUp("hide"); 
//gather url 
var url=$("#urlinput").val();  
//ajax calling 
$.getJSON("getdata.php?",{"iurl":url},function(data){ 
$("#databox").slideDown("show").html("<div><img src='"+data.img+"' /></div><div class='content'><b>"+data.title+"</b><br/><i>"+url+"</i><br />"+data.meta); 
$("#loading").hide(); 
}); 
}); 
}); 
</script>  
** 

Here when keyup trigger will show loading gif image and made AJAX call. When AJAX success hide loading gif and show the data to us.
Read:Live Image Resize Script With PHP
*CSS *

**.container{ 
width: 480px;  
margin: 0 auto;  
} 
.logo{ 
text-align: center;  
} 
.fb-box-wrap{ 
padding: 5px;  
width: 504px;  
height: 60px;  
border: 1px solid #BDC7D8;  
border-radius: 6px;  
} 
.fb-box-wrap{ 
min-height: 48px;  
border:1px solid #b4bbcd;  
font-size: 13px;  
max-width: 100%;  
overflow: hidden;  
height: auto;  
} 
.fb-box-wrap textarea{ 
padding: 0;  
outline:none;  
border: 0px;  
width: 105%;  
overflow: hidden;  
color: #777;  
} 
#loading{ 
float: right;  
display: none;  
} 
#databox{ 
display: none;  
font-size: 13px;  
border-top: 1px dashed #ccc;  
} 
#databox div img{ 
width: 100px;  
height: auto;  
float: left;  
width: 100px;  
padding-top: 8px;  
} 
#databox i{ 
font-size: 11px;  
font-weight: normal;  
color: #666;  
line-height: 1.28;  
text-align: left;  
direction: ltr;  
font-style: normal;  
} 
#databox .content{ 
padding: 5px;  
display: inline;  
word-break: break-word;  
color: #000  
font-size: 11px;  
line-height: 1.28;  
text-align: left;  
direction: ltr;  
} 
** 

In this style sheet only thing need to observe is #databox. It is display:none It will make it shown in jquery code when ajax is success.
getdata.php

<?php  
if($_GET['iurl'])  
{ 
$url=htmlentities(stripslashes($_GET['iurl'])); 
$str = file_get_contents($url); 
//to get the title 
function getTitle($str){  
if(strlen($str)>0){  
preg_match("/<title>(.*)</title>/",$str,$title);  
return $title[1];  
} 
} 
//to get meta description 
function getMetaDesc($url) {  
$metas = get_meta_tags($url); 
return $metas["description"];  
} 
//to get the img. 
function getImg($str){  
if(strlen($str)>0){  
preg_match('/<img[^>]*'.'src=["|'](.*)["|']/Ui',$str,$img);  
return $img[1];  
} 
} 
//json formation 
echo '{"title":"'.getTitle($str).'","meta":"'.getMetaDesc($url).'","img":"'.getImg($str).'"}';  
} 
?> 

This code we use to get the info Page Title, Meta Description, Image. We will sent them back in JSON format.
That's it! hope you like it. Please share it with your friends.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.