it-swarm.com.de

Google + 1-Schaltfläche nicht W3C-kompatibel

Ich habe also mit dem +1-Button von Google gespielt, um ihn auf meiner Website zu finden, aber er ist nicht W3C-kompatibel.

Hier ist der 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>

Weiß jemand, warum dies passiert und wie man dies anpasst? Vielen Dank

BEARBEITEN: Damit dies die Validierung durchläuft, habe ich einen Artikel auf meiner Website geschrieben.

41
ingh.am

Weiß jemand, warum das passiert?

Weil Google es entworfen hat, Tag-Suppe anstelle von HTML zu verwenden

Wie mache ich das konform?

Die Dokumentation hat ein alternatives Markup, das unter dem Entwurf der HTML 5-Spezifikation gültig ist:

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

Wenn Sie möchten, dass es mit HTML 4.x oder XHTML 1.x funktioniert, haben Sie möglicherweise kein Glück (obwohl Sie möglicherweise das nicht kompatible Markup mithilfe von JS hinzufügen können, aber das wäre nur ein Hacker, um es vor dem Verbergen zu bewahren.) Validierung und überhaupt nicht im Sinne eines gültigen Aufschlags)

24
Quentin

Fügen Sie diesen Code in die Kopfzeile ein:

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

Dann geben Sie diesen Code dort ein, wo Sie die Schaltfläche möchten:

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

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

Die vollständige Antwort finden Sie hier (auf Französisch)

11
Gilbou

Ich vermute, Sie versuchen, XHTML zu validieren. Am nächsten kommen Sie mit der erfolgreichen Validierung, indem Sie den "g" -Namensraum für Ihr Element definieren, indem Sie Folgendes hinzufügen:

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

d.h.

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

Der einfachste Weg, Google Plus One-Code zu validieren: Geben Sie einfach Folgendes ein: 

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

Anstatt:

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

Nachteile : Sie können keine Parameter wie 'count' oder 'size' hinzufügen, da sonst der Code nicht mehr gültig ist. 

Es ist ein von Google vorgeschlagener Code für HTML5, kann aber auch für andere (X) HTML-Varianten verwendet werden ..__ In HTML5 KÖNNEN Sie Parameter hinzufügen, wie 'Datenanzahl', Datengröße 'usw.

6

Behalten Sie den Code, bevor Sie das Body-Tag schließen, und ersetzen Sie Folgendes:

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

durch :

<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>

Wie üblich macht es den Trick ... 

2
SuN

Versuche dies:

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

es ist einfach einfach

Verwenden Sie das folgende in einem div-Tag, das Sie konfigurieren können, um es an einer beliebigen Stelle auf Ihrer Seite zu platzieren und es ist gültig.

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

Ich verwende es in unserer Website www.armaven.com . Hör zu. Falls Sie es wollen. 

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

Die andere Möglichkeit kann sein, DTD wie ich anpassen. Ich habe die xhtml1-strict.dtd heruntergeladen 

Suchen Sie die folgende Entitätsdefinition in der dtd-Datei

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

Und bearbeiten Sie es wie folgt (Dies hilft, die kontextabhängige Überprüfung aufzulösen.

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

Definiere jetzt ein neues Element

<!ELEMENT g:plusone EMPTY>

Und dann Attribute auflisten

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

Dies ist die Lösung, die ich mir ausgedacht habe ...

<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>

Stellen Sie sicher, dass Sie <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> oder einen anderen Link zum Jquery-Skript in Ihrem Header haben!

0
Brandon

Nach Quentins answer können Sie ein W3C-konformes href-Attribut hinzufügen, indem Sie data-href verwenden:

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

Die von mir implementierte Lösung ist bereits in diesem Thread vorhanden und wurde von Gilbou gepostet, aber ich muss hinzufügen, dass <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>is nicht zwingend in den Header eingefügt werden muss.

<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>

Platzieren Sie den obigen Code an der Stelle, an der sich die + 1-Schaltfläche befinden soll. Stellen Sie jedoch sicher, dass Sie http://www.YOURSITE.com/ durch den Link der Seite "+1 .." ersetzen. Wenn Sie weitere Parameter zur Funktion gabi.plusone.render hinzufügen möchten, überprüfen Sie . https://developers.google.com/+/plugins/+1button/#plusonetag-parameters und um zu sehen, ob es W3C-kompatibel ist, gehen Sie zu http://validator.w3.org/ . Viel Glück!

0
Andrei T