web-dev-qa-db-fra.com

Le bouton Google +1 n'est pas conforme au W3C

J'ai donc joué avec le bouton +1 de Google pour essayer de l'obtenir sur mon site Web, mais ce n'est pas compatible avec le W3C.

Voici le code:

<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
  {lang: 'en-GB'}
</script>

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium" href="http://www.example.org"></g:plusone>

Est-ce que quelqu'un sait pourquoi cela se produit et comment le rendre conforme? Merci

EDIT: Pour que cela passe par la validation, j’ai écrit un article sur mon website .

javascriptw3cw3c-validationgoogle-plus-one
41
ingh.am

Est-ce que quelqu'un sait pourquoi cela se produit?

Parce que Google l'a conçu pour utiliser tag soupe au lieu de HTML

Comment rendre cela conforme?

La documentation a un balisage de remplacement valide dans le projet de spécification HTML 5:

<div class="g-plusone" data-size="standard" data-count="true"></div>

Si vous voulez que cela fonctionne avec HTML 4.x ou XHTML 1.x, vous risquez d’être malchanceux (vous pourrez peut-être ajouter le balisage non conforme à l’aide de JS, mais ce ne serait qu’un hack pour le cacher. validation et pas du tout dans l’esprit de balisage valide)

24
Quentin

Insérer ce code dans l'en-tête:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {lang:'en', parsetags:'explicit'}
</script>

Puis insérez ce code là où vous voulez le bouton:

<div id="plusone-div" class="plusone"></div>

<script type="text/javascript">
      gapi.plusone.render('plusone-div',{"size": "small", "count": "true"});
</script>

La réponse complète peut être trouvée ici (en français)

11
Gilbou

J'imagine que vous essayez de valider XHTML. La validation la plus proche est de définir l’espace de noms "g" sur votre élément en ajoutant ceci:

xmlns:g="http://base.google.com/ns/1.0"

c'est à dire.,

<html xmlns:g="http://base.google.com/ns/1.0"> ... </html>
9
dossy

Le moyen le plus simple de créer du code Google Plus One pour valider: Il suffit de mettre: 

<div class="g-plusone"></div>

Au lieu de:

<g:plusone size="medium" href="http://www.example.org"></g:plusone>

Inconvénients : vous ne pouvez pas ajouter de paramètres tels que "nombre" ou "taille", sinon le code ne sera plus valide. 

Il s'agit du code proposé par Google pour HTML5, mais qui fonctionne pour d'autres versions de code (X) HTML . En HTML5, vous POUVEZ ajouter des paramètres tels que "nombre de données", "taille de données", etc.

6
Ricardo de la Vega

Conservez le code avant de fermer la balise body et remplacez:

 <g:plusone size="medium"></g:plusone>

par :

<div class="g-plusone" id="gplusone"></div>
<script type="text/javascript">
var ValidMe=document.getElementById("gplusone");
ValidMe.setAttribute("data-size","medium");
ValidMe.setAttribute("data-count","true");
</script>

Comme d'habitude, ça fait l'affaire ... 

2
SuN

Essaye ça:

<div class="g-plusone" data-size="standard" data-count="true"></div>
2
Xavier

c'est juste simple

Utilisez les éléments suivants dans une balise div que vous pouvez configurer pour la placer où vous le souhaitez dans votre page. Elle est valide.

<div class="g-plusone"></div>

Je l'utilise dans notre site Web www.armaven.com . Vérifiez-le. Si tu veux. 

1
Magi

http://james-ingham.co.uk/posts?p=google-plusone-w3c-valid

<!-- Put inside the <head> tag. -->
<script type="text/javascript"
        src="http://apis.google.com/js/plusone.js">
    {lang: 'en-GB'}
</script>

<!-- Put where you wish to display button. -->
<script type="text/javascript">
    document.write('<g:plusone size="medium" href="http://www.example.org/post"></g:plusone>');
</script>
1
seo outsourcing

L'autre façon peut être de personnaliser la DTD comme je l'ai fait. J'ai téléchargé le xhtml1-strict.dtd 

Recherchez la définition d'entité suivante dans le fichier dtd.

<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc; )*">

Et éditez-le comme suit (cela aidera à résoudre la validation contextuelle, c'est-à-dire où cette balise devrait-elle apparaître)

<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc; | g:plusone)*">

Définir maintenant un nouvel élément

<!ELEMENT g:plusone EMPTY>

Et puis lister les attributs

<!ATTLIST g:plusone
  href %URI; #IMPLIED
  size CDATA #IMPLIED
>
0
Shoaib Nawaz

C'est la solution que j'ai trouvée ...

<span id="plusone"></span>
<script type="text/javascript">
    //< ![CDATA[    
       $("#plusone").html('<g:plusone></g:plusone>');
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    //]]>    
</script>

Assurez-vous d'avoir <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> ou un autre lien vers le script jQuery dans votre en-tête!

0
Brandon

Suite à answer de Quentin, vous pouvez ajouter un attribut href conforme au W3C en utilisant data-href:

<div class="g-plusone" data-size="standard" data-count="true"></div>
0
Jonathan

La solution que j’ai implémentée est déjà présente dans ce fil et elle a été postée par Gilbou mais je dois ajouter que <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>n’est pas obligatoire de la placer dans l’en-tête.

<div id="plusone-div" class="plusone"></div> <script type="text/javascript"> gapi.plusone.render('plusone-div',{"size": "medium", "count": "true", "href": "http://www.YOURSITE.com/"}); </script>

Placez le code ci-dessus à l'endroit où vous souhaitez placer le bouton +1, mais assurez-vous de remplacer http://www.YOURSITE.com/ par le lien de la page, afin qu'il soit +1 ..____. Si vous souhaitez ajouter d'autres paramètres à la fonction gabi.plusone.render, vérifiez https://developers.google.com/+/plugins/+1button/#plusonetag-parameters et pour savoir s'il est conforme au W3C, accédez à http://validator.w3.org/ . Bonne chance!

0
Andrei T