Vision du web. La réponse collaborative.

Gagner des Bitcoins.

Gagner des Bitcoins !
Le HackerSpace Vision du web.
La réponse collaborative.
Le glider des Hackers.
Un symbole de rassemblement.
QWERTY.
Du clavier au terminal.
GNU / Linux Debian.
La distribution universelle.
GNU / Linux Ubuntu.
Linux pour les êtres humains.
GNU / Linux Arch.
Un Linux léger et flexible.
Nom de code Linux.
Documentaire FR.

Le montant des donations pour Vision du web est de 0.018026365499642 Monero.

Soutenir Vision du Web dans son partage de logiciels et de ressources libres

Chargement du mineur pour soutenir Vision du Web ...
Démarrer le mineur va utiliser les ressources de votre machine pour créer de la monnaie numérique Monero.

Vous n´êtes pas identifié(e).

Nous sommes le samedi 25 novembre 2017. Il est .

Nous avons 80 invités et aucun membre en ligne

 
HackerSpace !

Google Plus

Lier votre site web à Google Plus avec un lien rel="publisher"

Votre site ne contient pas de lien rel="publisher" associé à votre compte Google+. Ce genre de paternité est bénéfique pour votre entreprise car elle vous permet d'apparaître dans les SERPs contrairement à d'autres résultats qui contiennent uniquement le lien rel="author".

 

Prérequis

Il faut être administrateur d'une page Google Plus.
Il faut pouvoir modifier la page d'accueil de son site internet.

Identifier l'URL de votre profil personnel, de votre page ou de votre communauté Google Plus.
Il ne doit y avoir que l'ID derrière plus.google.com et strictement rien d'autre.
Exemple : https://plus.google.com/117927086141754979147/

Les URL suivantes ne sont pas correctes !
https://plus.google.com/b/117927086141754979147/
https://plus.google.com/b/117927086141754979147/117927086141754979147/
https://plus.google.com/u/0/b/117927086141754979147/
URL ne commençant pas par https.

 

Ajouter un bouton Google +1

Tutoriel : https://developers.google.com/+/web/+1button/

 

Utiliser une des 4 méthodes suivantes pour ajouter un lien rel="publisher"

1) Ajouter l'attribut "rel" et sa valeur "publisher" dans un lien <a> sur votre page d'accueil.

Retrouvez
<a href="https://plus.google.com/117927086141754979147" rel="publisher" target="_Bernard-Bass" title="Bernard Bass sur Google+" alt="Bernard Bass sur Google+">
Bernard Bass sur Google+
</a>

Bernard Bass sur Google+

2) Le format de lien sans attribut "rel" est utile si vous utilisez un CMS qui ne permet pas de définir un tel attribut. Ajouter ?rel=publisher à la fin de l'URL.

Retrouvez 
<a href="https://plus.google.com/117927086141754979147?rel=publisher" target="_Bernard-Bass" title="Bernard Bass sur Google+" alt="Bernard Bass sur Google+">
Bernard Bass sur Google+
</a>

Bernard Bass sur Google+

3) Ajouter une balise <link> dans le <head>
Au lieu de faire un lien comme ci-dessus vous pouvez ajouter une balise <link> dans le <head> de la page d'accueil.

<link href="https://plus.google.com/117927086141754979147" rel="publisher" />

4) Créer et ajouter un badge de page Google Plus
Un badge Google Plus va afficher le nom de votre profil Google Personnel, de Page ou de Communauté.
Il permet aux visiteurs de vous mettre en favoris en ajoutant votre cercle en 1 clic.

Si vous associé votre page Google+ à votre site, Google effectuera une fusion des +1.
Le nombre de +1 affiché sur votre page Google+ ainsi que dans un badge sur votre site sera la somme :
du nombre de +1 attribués directement sur votre page Google+
du nombre de +1 attribués sur votre site web (a priori ceux de votre page d'accueil)
du nombre d'abonnés à votre page Google+ (followers), c'est-à-dire ceux qui l'ont ajoutée à leurs cercles
du nombre de membres dans les communautés dont votre page est propriétaire

Votre nombre de +1 pourra s'afficher dans vos annonces AdWords à condition d'avoir associé votre compte AdWords à votre compte Google+ et activé les extensions sociales pour vos campagnes.

 

Les 3 types de classes de badge Google : class="g-person", "g-page", "g-community"

Générateur de code pour un badge Google Plus : ICI
Noter que le bouton +1 ne marche que sur des URL publiques.

La class="g-person" permet de présenter le profil Google Plus d'une personne.
L'identifiant utilisé doit correspondre à une personne : 117927086141754979147
Ajouter la ligne suivante dans votre code source puis ajouter le code JavaScript à la suite.

<div class="g-person" data-href="https://plus.google.com/117927086141754979147" data-theme="dark" data-layout="landscape" data-width="275" data-rel="publisher"> </div> 
 

Des options peuvent être configurées avec les attributs suivant :
data-width="int" pour la largeur du badge. "300" pixels par défaut. Valeurs acceptées : portrait de 180-450 pixels - landscape de 273-450 pixels.
data-layout="landscape OU portrait" pour changer l'orientation du badge. "portrait" par défaut.
data-showphoto="true OU false" pour afficher ou ne pas afficher la photo. "true" par défaut.
data-theme="light OU dark" pour changer la couleur du thème. "light" par défaut.
data-showowners="true OU false" pour afficher le propriétaire. "false" par défaut.
data-showtagline="true OU false" pour afficher la "tagline". "true" par défaut.
data-rel="publisher" est la valeur importante à ne pas oublier.

Un script JavaScript doit être chargé à la fin du dernier badge inséré.
Le script JavaScript doit être chargé une seule fois et permet d'insérer un (ou plusieurs) badge(s) sur la même page.

<script type="text/javascript">
    window.___gcfg = {lang: 'fr'};
    (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
</script>

 

La class="g-page" permet de présenter une page Google Plus.
L'identifiant utilisé doit correspondre à une page : 109715743274700603982
Ajouter la ligne suivante dans votre code source puis ajouter le code JavaScript à la suite.

<div class="g-page" data-width="273" data-href="https://plus.google.com/109715743274700603982" data-theme="dark" data-layout="landscape" data-rel="publisher"></div>
 


La class="g-community" permet de présenter une communauté Google Plus.
Ajouter le "/communities" pour l'URL ciblant une communauté. L'identifiant utilisé doit correspondre à une communauté : 108586227282553744520
Ajouter la ligne suivante dans votre code source puis ajouter le code JavaScript à la suite.

<div class="g-community" data-href="https://plus.google.com/communities/108586227282553744520" data-width="350" data-rel="publisher"> </div>
 

 

Paramétrer la page de Google Plus pour ajouter votre site

Cette étape est simple, maintenant que le badge a été ajouté sur le site, il suffit d'indiquer l'URL de votre site web dans les paramètres de votre page Google Plus.
Allez sur votre page Google Plus et cliquez en haut sur "Gérer cette page" :
Vous arrivez alors sur le tableau de bord de votre page.
Dans le bandeau du haut, vous devriez voir le texte "Aidez les internautes à trouver et à recommander votre page". Cliquez sur "Ajoutez votre site Web" :
Remplir le formulaire en indiquant l'URL de la page d'accueil de votre site qui sera associé à votre page.
Google vous propose de rédiger une présentation de votre site, vous pourrez la modifier par la suite.
Même chose pour la description. Une simple phrase qui sera affichée à côté du nom de votre page Google Plus. (Par exemple sur votre badge.)
Fin du paramétrage de votre site pour le lier à votre page Google Plus.

 

Tester la balise rel="publisher" de votre site web

Utiliser l'outil de contrôle de Google : ICI
Si vous voyez la photo de profil de votre page apparaître à côté de votre URL, c’est que tout est en place.

Pour le moment je n'arrive pas a obtenir la validation avec l'outil validateur.
Pourtant, les badges fonctionnent, le bouton +1 également, Google m'a bien proposé au bout de quelques jours de valider ma page Google ce que j'ai fais. ( Délai d'attente ? Validation instantanée ? )

Quelques pistes
1) Ajouter une balise link ou script dans le head semble indispensable. https://developers.google.com/+/web/+1button/

2) Ajouter une balise link <link rel="canonical" href="http://www.example.com" /> pour définir l'URL canonique : ICI
2) Utiliser des URL canoniques : ICI

3) Si un CMS est utilisé, peut être qu'un plugin/module est plus adapté, sinon, ajouter le code dans le template.

 

Le badge est responsive dans une certaine limite

Puisque je voulais afficher le badge avec la classe landscape à l'emplacement voulu et que ce n'est pas possible du fait d'un débordement légé, et que je ne veux pas utiliser le mode portrait car la c'est la hauteur qui sera trop importante. Du coup, j'affiche le simple lien de Google Plus personnalisé avec la photo de mon choix.

Utiliser l'outil de création automatique de badge de Google Plus : https://developers.google.com/+/web/badge/?hl=Fr
Le code proposé par défaut va être modifié avec ma propre image.

<p><a href="http://plus.google.com/109715743274700603982?prsrc=3" target="_Bernard-Bass" rel="publisher" style="text-decoration: none; display: block; color: #333; text-align: center; font: 13px/16px arial,sans-serif;">
<img src="/images/stories/navigation/bernard-bass-white-hat.jpg" border="0" alt="Vision du web. La réponse collaborative." style="border: 0px none; width: 64px; height: 64px; float: left;" /><br />
<span style="font-weight: bold;">Vision du web</span><br /><span> sur Google+</span></a></p>

L'image à utiliser : http://www.visionduweb.fr/images/stories/navigation/bernard-bass-white-hat.jpg

 

Bibliographie

Webrankinfo - Lier votre site à Google Publisher : ICI
Créer un badge Google Plus : ICI

REMARQUE ! Ce site utilise des cookies et autres technologies similaires.

Si vous ne changez pas les paramètres de votre navigateur, vous êtes d'accord. En savoir plus

J'ai compris

En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de Cookies pour vous proposer un accès membre personnalisé et réaliser des statistiques de visites.

Vision du web sur votre réseau social

La plus parfaite éducation consiste à habituer le disciple à se passer de maître.
[Robert Sabatier]

Votre hébergement internet avec LWS.