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.

Premièrement, il va falloir créer une application Facebook

1/ Créer votre application Facebook , donnez lui un nom, acceptez les conditions générales et validez.

2/ Dans l’onglet « Web Site » , Remplissez l’url de votre site et le domaine

3/ Gardez de côté votre APP_ID ainsi que votre APP_SECRET , vous en aurez besoin après.

Deuxièmement, créer votre base de données.

CREATE TABLE demo_inscription_avec_info_facebook_users(
uid int( 11 ) PRIMARY KEY AUTO_INCREMENT ,
nom varchar( 50 ) ,
email varchar( 50 ) UNIQUE ,
PASSWORD varchar( 50 ) ,
genre varchar( 6 ) ,
date_de_naissance varchar( 16 ),
telephone varchar( 10 )
);

Troisièmement, créer votre formulaire.

1/ On va utilisez l’iframe que Facebook nous fournit.

2/ Remplacez juste par vos informations, client_id qui est votre APP_ID et redirect_uri qui est l’url de redirection (la page qui va inscrire notre membre dans la base de données, voir plus bas)

<iframe allowtransparency="true" frameborder="no" height="600" scrolling="auto" src="http://www.facebook.com/plugins/registration.php?
 client_id=VOTRE_APP_ID&
 redirect_uri=http://votresite.com/store_user_data.php?&
 fields=[
 {"name":"name"},
 {"name":"email"},
 {"name":"password"},
 {"name":"gender"},
 {"name":"birthday"},</div>
<div>{"name":"captcha"}
{"name":"phone", "description":"Numéro de téléphone", "type":"text"} ]"
 scrolling="auto"
 frameborder="no"
 style="border: none;"
 width="500"
 height="600">
 </iframe>

Le formulaire est assez simple, on demande le nom (que facebook nous fournit), l’e-mail (facebook nous le fournit aussi), la date de naissance et le sexe (idem).

J’ai rajouté le numéro de téléphone (que l’utilisateur entrera) pour vous montrez comment on ajoute un champ (rien de bien compliqué).

Vous vous retrouvez donc avec un formulaire qui ressemble a celui la :

Quatrièmement : Créer la page qui enregistrera les informations dans votre base de données.

store_user_data.php

<?php
 define('FACEBOOK_APP_ID', 'VOTRE_APP_ID');
 define('FACEBOOK_SECRET', 'VOTRE_CLE_SECRETE');

 // No need to change function body
 function parse_signed_request($signed_request, $secret) {
 list($encoded_sig, $payload) = explode('.', $signed_request, 2);

 // decode the data
 $sig = base64_url_decode($encoded_sig);
 $data = json_decode(base64_url_decode($payload), true);

 if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
 error_log('Unknown algorithm. Expected HMAC-SHA256');
 return null;
 }

 // check sig
 $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
 if ($sig !== $expected_sig) {
 error_log('Bad Signed JSON signature!');
 return null;
 }

 return $data;
 }

 function base64_url_decode($input) {
 return base64_decode(strtr($input, '-_', '+/'));
 }

 if ($_REQUEST) {
 $response = parse_signed_request($_REQUEST['signed_request'],
 FACEBOOK_SECRET);

 echo "<pre>";
 print_r($response);
 echo "</pre>"; // décommentez ces lignes pour voir les informations reçus.

 $name = $response["registration"]["name"];
 $email = $response["registration"]["email"];
 $password = $response["registration"]["password"];
 $gender = $response["registration"]["gender"];
 $dob = $response["registration"]["birthday"];
 $phone = $response["registration"]["phone"];

 // Connecting to Database
 mysql_connect('localhost', 'VOTRE_USER', 'VOTRE_MDP');
 mysql_select_db('VOTRE_BDD');

 $result = mysql_query("INSERT INTO demo_inscription_avec_info_facebook_users (nom, email, password, genre, date_de_naissance, telephone) VALUES ('$name', '$email', '$password', '$gender', '$dob', $phone)");
 if ($result) {
 // Utilisateur enregistré
 echo "Information enregistré dans la base de données.";
 // Redirection vers une autre page
 } else {
 // Erreur
 echo "Erreur.";
 // Redirection vers une page d'erreur
 }
 } else {
 echo '$_REQUEST est vide O_o';
 }
 ?>