J'en parlais dans un précédent article : "Ajoutez un bouton suivez-moi... pour google+". Hélas, le script http://widgetsplus.com/google_plus_widget.js ne fonctionne plus (une belle erreur 404...). Ce qui est compréhensible puisque tout le monde l'utilisait, et qu'il ne semble pas s'agir d'un outil proposé par google. Dans mon grand désarroi, je me suis donc dit que si quelqu'un avait pu le faire, je le pouvais aussi. Voici donc comment recréer ce widget, à la mano. Au programme ? Php/Jquery Vous avez la flemme de développer tout ça pour le mettre sur votre site ? Je vous propose d'utiliser mon script (que j'héberge gracieusement :) . Ce qui donne : [sourcecode language="javascript"] [/sourcecode] Voici le how-to du widget : Le visuel Je suis parti d'un fichier présent dans le cache de mon navigateur (et ce n'était pas IE ^^), pour récupérer le CSS qui va bien. Créons donc un fichier google-widget.php. Grosso-modo, cela vous donne, pour les balises head : [sourcecode language="html"] < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> [/sourcecode] Il vous faudra donc faire appel à la libraire jquery, via jquery.js. Pensez à adapter le chemin pour qu'il pointe bien vers le vôtre. En conservant les bases du script de "Ajoutez un bouton suivez-moi... pour google+", on va placer les variables pour personnaliser les bordures, la couleur de fond, et la taille du widget (le tout sera affiché en iframe). Pour cela, on va modifier (un peu) les 3 premiers blocs css : [sourcecode language="css"] body {background-color:#< ?php echo $_GET[' mbgc']; ?>; margin:0; padding:0; font-family:"Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif; } div#wgp_wrapper { border:1px solid #< ?php echo $_GET['mbc'];?>background-color:#< ?php echo $_GET[' mbgc']; ?>; width:308px; height:140px; overflow:hidden; font-family:"Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; text-align:left; position: relative; } div#wgp_wrapper h1 { width:< ?php echo $_GET['ww']; ?>; font-size:14px; border-bottom:1px solid #cecece;color:#6a6a6a; font-family:"Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif; height:18px; margin:0 12px 10px 12px; padding:10px 0 5px 0px; } [/sourcecode] En suite, pour les balises body : [sourcecode language="html"] [/sourcecode] Ici aussi, on place les variables $_GET. Un peu de php Vraiment très peu, en fait on va se contenter de récupérer le nom du compte google via une requête curl sur le flux rss de vos publications. Par la même occasion, toujours via curl, on va également charger toute la page de votre profil google+. Plaçons cette portion code juste après la balise "<h1>" citée ci-dessus. [sourcecode language="php"] < ?php function curl_get($url){ $options = array( CURLOPT_RETURNTRANSFER => true, // return web page CURLOPT_FOLLOWLOCATION => true, // follow redirects CURLOPT_AUTOREFERER => true, // set referer on redirect CURLOPT_CONNECTTIMEOUT => 200, // timeout on connect CURLOPT_TIMEOUT => 200, // timeout on response CURLOPT_MAXREDIRS => 5, // stop after 10 redirects ); $ch = curl_init( $url ); curl_setopt_array( $ch, $options ); $content = curl_exec( $ch ); curl_close( $ch ); return $content; } $uri = 'http://plusfeed.appspot.com/'.$_GET['pid']; $u=curl_get($uri); $xml=simplexml_load_string($u); $name = $xml->author->name; $f= preg_replace("/(\r\n|\n|\r)/", " ", curl_get('https://plus.google.com/'.$_GET['pid'])); ?> [/sourcecode] On a donc $name, qui contient le nom du compte, et $f qui contient tout votre profil google+ (en html) En fin de script (juste avant ""), on va rajouter ceci : [sourcecode language="php"] [/sourcecode] L'idée étant de placer le html de votre profil g+ dans une div, pour en extraire les éléments qui nous intéressent avec jquery. On notera le (ô combien propre...) remplacement des balises style et script (str_replace), qui évitera de mauvaises surprises. Un peu de jquery Avec jquery, nous allons donc extraire et placer les éléments qui nous intéressent, dans votre widget. [sourcecode language="javascript"] function queleschiffres(chaine) { var newchaine = ''; for(i=0;i [/sourcecode] On commence par parcourir toutes les images du contenu de la div #originalGP (qui contient, donc le code de la page g+ récupéré en php). On constatera que la seule image qui fasse 200px de large, est celle de votre profil. Donc... if($(this).css('width')=='200px')... Et on update la src de votre image #profile_image. Pour ce qui est du nombre de vos "encercleurs", il est contenu dans une balise h4, qui dispose de 2 classes : a-b-Ob-Bh a-b-Ob-Dg-Bh. On parcourt les h4, et si le h4 dispose des 2 classes, on extrait les chiffres contenus dans la chaîne, et on update notre span d'id #incircles, avec le nombre ainsi obtenu. Pour finir, on vide notre div #originalGp, puisque l'on en a plus besoin, et que rien ne sert de l'afficher. On pourrait dire qu'un $.get() (jquery) serait mieux qu'un curl, mais google+ ne tolère pas le cross-domain donc... Pour afficher votre widget, on conserve "l'ancien code" : [sourcecode language="javascript"] [/sourcecode] On modifie le src du script, et dans votre fichier js, il faut y mettre: [sourcecode language="javascript"] (function(){ var url = "http://chemin_vers_votre_fichier_php/google-widget.php"; var current_location = window.location.hostname; if(typeof pid != 'undefined') { url += "?pid="+pid; } if(typeof current_location != 'undefined') { url += "&amp;amp;amp;host=" + current_location; } if(typeof mbgc != 'undefined') { url += "&amp;amp;amp;mbgc="+mbgc; } if(typeof ww != 'undefined') { url += "&amp;amp;amp;ww="+ww; } else { url += "&amp;amp;amp;ww=314"; } if(typeof mbc != 'undefined') { url += "&amp;amp;amp;mbc="+mbc; } if(typeof bbc != 'undefined') { url += "&amp;amp;amp;bbc="+bbc; } if(typeof bmobc != 'undefined') { url += "&amp;amp;amp;bmobc="+bmobc; } if(typeof bbgc != 'undefined') { url += "&amp;amp;amp;bbgc="+bbgc; } if(typeof bmoc != 'undefined') { url += "&amp;amp;amp;bmoc="+bmoc; } if(typeof bfc != 'undefined') { url += "&amp;amp;amp;bfc="+bfc; } if(typeof bmofc != 'undefined') { url += "&amp;amp;amp;bmofc="+bmofc; } if(typeof tlc != 'undefined') { url += "&amp;amp;amp;tlc="+tlc; } if(typeof tc != 'undefined') { url += "&amp;amp;amp;tc="+tc; } if(typeof nc != 'undefined') { url += "&amp;amp;amp;nc="+nc; } if(typeof bc != 'undefined') { url += "&amp;amp;amp;bc="+bc; } if(typeof l != 'undefined') { url += "&amp;amp;amp;l="+l; } if(typeof t != 'undefined') { url += "&amp;amp;amp;t="+t; } else { url += "&amp;amp;amp;t=Add_me_on"; } if(typeof fs != 'undefined') { url += "&amp;amp;amp;fs="+fs; } if(typeof fsb != 'undefined') { url += "&amp;amp;amp;fsb="+fsb; } if(typeof bw != 'undefined') { url += "&amp;amp;amp;bw="+bw; } if(typeof b != 'undefined') { url += "&amp;amp;amp;b="+b; } if(typeof ff != 'undefined') { url += "&amp;amp;amp;ff="+ff; } if(typeof lu != 'undefined') { url += "&amp;amp;amp;lu="+lu; } if(typeof wh != 'undefined') { if(wh < 318) { url += "&amp;amp;amp;wh=320"; wh = 320; } else { url += "&amp;amp;amp;wh="+wh; } }else{ wh = '142'; } if(typeof pc != 'undefined') { url += "&amp;amp;amp;pc="+pc; } if(typeof lg != 'undefined') { url += "&amp;amp;amp;lg="+lg; } if(typeof pid != 'undefined') { document.write("