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 :
<script type="text/javascript"> mbgc='EDECEC'; ww='288'; mbc='EDECEC'; pid='votre ID GOOGLE'; </script> <script type="text/javascript" src="http://geekndev.com/widget-google-plus.js"></script>
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 :
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
body {>background-color:#;
margin:0;
padding:0;
font-family:"Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif;
}
div#wgp_wrapper {
border:1px solid #EDECECbackground-color:#;
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:283;
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;
}
div#wgp_wrapper h1 span {
display: block;
height:15px;
width:auto;
float:left;
margin-right: 5px;
}
div#wgp_wrapper a {
text-decoration: none;
}
img#profile_image {
float:left;
margin-left:10px;
}
a#wgp_name {
font-family:"Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif;
display: block;
width: auto;
height:20px;
color:#6a6a6a; font-size:16px; font-weight: bold;
position: absolute;
top:42px;
left:70px;
margin-left:10px;
}
div#wgp_add_button_wrapper {
display:block;
height:29px;
width:100px;background-color:#4889F0;border:1px solid #3F79D5;
margin:8px 10px;
font-size:13px; font-weight:bold;
margin:8px 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
position: absolute;
left:70px;
top:64px;
z-index: 1000;
}
a#wgp_add_button {
display: block;
position: absolute;
top:0px;
left:0px;
width:100px; text-align: center;
float: none;
margin:0;
color:#FFFFFF;
height:29px;
line-height:29px;
background-image:url(images/button_gra.png);
background-position: 0 0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
a#wgp_add_button:hover {
color:#ffffff; }
div#wgp_add_button_wrapper a:active {
background-position: 0 -31px;
}
div#wgp_add_button_wrapper:hover {
background-color:#3F79D5;border-color:#3b71c6; }
div#wgp_wrapper p, div#wgp_wrapper a.message {
padding-top:5px;
font-size:12px;
letter-spacing: 1px;
color:#6a6a6a;
padding-top:1px;
clear:both;
height:30px;
margin:0;
line-height: 30px;
}
div#wgp_wrapper p.error_not_found {
line-height: 15px;
margin-left:10px;
}
div#wgp_wrapper a.message {
display: block;
width:auto;
height:auto;
margin:0 10px;
padding:10px 25px 25px 0;
border-bottom:1px solid #cecece; line-height: 14px;
font-size:12px;
position: relative;
}
div#wgp_wrapper a.message:focus, div#wgp_wrapper a.message:active {
outline: 0 none;
-moz-outline: 0 none;
}
span.pl {
position: absolute;
bottom:5px;
right:10px;
font-size: 11px;
font-weight: bold;
font-style: italic;
color:#4889F0; }
em.dl {
position: absolute;
bottom:5px;
left:0;
font-size: 11px;
font-weight: bold;
font-style: italic;
color:#6a6a6a;
}
div#wgp_wrapper p.message a {
color:#6a6a6a; text-decoration:none;
}
div#wgp_wrapper p.in_circles {
margin-left:10px;
}
div#wgp_wrapper span.latest_updates {
font-weight: bold;
display: block;
width:auto;
height:30px;
font-size:14px;
line-height: 30px;
border-top:1px solid #cecece;border-bottom:1px solid #cecece;color:#6A6A6A; margin:0 10px;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">$(document).ready(function(){var time_interval_posts=setInterval("changePost()",7000);});function changePost(){$("#messages_box a:first-child").slideToggle(1000,function(){$("#messages_box a:first-child").appendTo("#messages_box");$("#messages_box a:last-child").css('display','block');});}</script>
</meta></head>
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 :
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;
}
En suite, pour les balises body :
<div id="wgp_wrapper"> <h1> <span>Ajoutez moi sur</span><img src="https://ssl.gstatic.com/s2/oz/images/google-logo-plus-0fbe8f0119f4a902429a5991af5db563.png" height="18" /> </h1> <img src="" width="60" height="60" id="profile_image"/> <a href="http://plus.google.com/<?php echo $_GET['pid']; ?>" id="wgp_name" target="_blank">< ?php echo $name; ?></a> <div id="wgp_add_button_wrapper"> <a href="https://plus.google.com/<?php echo $_GET['pid']; ?>" target="_blank" id="wgp_add_button" >Ajouter</a> </div> <p class="in_circles">Dans les cercles de <strong><span id="incircles"></span></strong> personnes</p> </div>
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.
< ?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']));
?>
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 :
<div style="display:none;" id="originalGp">
< ?php echo str_replace('style', 'stale', str_replace('script', 'scrapt', $f)); ?>
</div>
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.
function queleschiffres(chaine) {
var newchaine = '';
for(i=0;i<chaine .length;i++) {
newchaine += isNaN(chaine.substr(i, 1)) ? '' : chaine.substr(i, 1);
}
return newchaine; }
Bon, là, pas de jquery. Il s’agit d’un fonction (piochée sur le web) qui vous permettra de ne conserver que les chiffres, dans une chaîne. Cela nous servira pour afficher le nombre de personnes qui vous a « encerclé ».
Et du jquery….
$(document).ready(function(){
$('#originalGp img').each(function(){
if($(this).css('width')=='200px')$('#profile_image').attr('src', $(this).attr('src')) ;
});
$('#originalGp h4').each(function(){
if($(this).attr('class') == 'a-b-Ob-Bh a-b-Ob-Dg-Bh')$('#incircles').html(queleschiffres($(this).text()));
});
$('#originalGp').html('');
});</script>
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 » :
<script type="text/javascript">mbgc='EDECEC';ww='283';mbc='EDECEC';bbc='3F79D5';bmobc='3b71c6';bbgc='4889F0';bmoc='3F79D5';bfc='FFFFFF';bmofc='ffffff';tlc='D8DFEA';tc='6a6a6a';nc='6a6a6a';bc='6a6a6a';l='y';t='Ajoutez_moi_sur';fs='16';fsb='13';bw='100';ff='4';lg='fr';pc='4889F0';b='s'; pid='107993589388621811687';</script> <script type="text/javascript" src="chemin_vers_un_fichier/js/google_plus_widget.js"></script>
On modifie le src du script, et dans votre fichier js, il faut y mettre:
(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("<iframe src='" + url + "' frameborder='0' scrolling='no' height='"+wh+"' width='"+ww+"'>");
} else {
document.write('<p>No Google+ ID found</p>');
}
})()
Fastoche, hein (mais pas vraiment très propre…) ^^
Je vous joins les archives en zip, mais il vous faudra adapter le chemin dans le fichier google_plus_widget.
Télécharger : google-widget.zip
(notez qu’en hébergeant ces fichiers, vous ne dépendez plus d’aucun autre site pour que votre widget reste fonctionnel)
Jeu de briques
Snake
Pacman
Bubble