Avez-vous remarqué quand on poste un lien sur Facebook, ce dernier va automatiquement générer un extrait du lien, avec une vignette et un bref descriptif.
Nous allons voir comment faire pareil avec un peu d’Ajax et jQuery.

Code Javascript et HTML :













































<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var content=$(this).val();
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;] *[-A-Z0-9+&@#\/%=~_|] 












)/ig;
// Filtering URL from the content using regular expressions
// Filtrer l'URL du contenu en utulisant les expressions regulières
var url= content.match(urlRegex);

if(url.length>0)
{
$("#linkbox").slideDown('show');
$("#linkbox").html("<img src='link_loader.gif'>");
// Récupération des données du domaine
$.get("urlget.php?url="+url,function(response)
{
// On récupère le nom du site entre les balises <title></title>
var title=(/<title>(.*?)<\/title>/m).exec(response)[1] 

;
// On récupère la premiere image en .png avec la balise image src=''
var logo=(/src='(.*?).png'/m).exec(response)[1] 










;
$("#linkbox").html("<img src='"+logo+".png' class='img'/><div><b>"+title+"</b><br/>"+url)
});

}
return false;
});
});
//HTML Code
<textarea id="contentbox"></textarea>
<div id="linkbox"></div>
</script>

On utilise les expressions régulières pour récupérer la description entre les balises <title></title> ainsi que la première image .png que l’on trouve.

Après vous pouvez peaufiner, remplacer le .png par un .jpg ou bien utilisez l’api d’un générateur de screenshot de site web (http://www.robothumb.com , leur API est vraiment simple) pour générer la vignette, etc etc..

urlget.php

il contient juste la fonction file_get_contents qui lira le contenu d’un fichier dans une chaîne de caractères.










<?php
if($_GET['url'] 

)
{
$url=$_GET['url'] 


;
echo file_get_contents($url);
}
?>

Code CSS :



























body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#contentbox
{
width:458px; height:50px;
border:solid 2px #dedede;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom:6px;
}
.img
{
float:left; width:150px; margin-right:10px;
text-align:center;
}
#linkbox
{
border:solid 2px #dedede; min-height:50px; padding:15px;
display:none;
}

Voila, vous avez une base de départ pour vos projets.