Кнопка Google +1 не совместима с W3C

Итак, я играл с кнопкой Google +1, пытаясь получить ее на своем веб-сайте, но это не соответствует W3C.

Здесь код:

<!-- 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="#" onclick="location.href='http://www.example.org'; return false;"></g:plusone>

Кто-нибудь знает, почему это происходит и как это сделать? Благодаря

EDIT: чтобы пройти эту проверку, я написал статью на веб-сайте.

Ответы

Ответ 1

Кто-нибудь знает, почему это происходит?

Поскольку Google разработал его, чтобы использовать суп с тегами вместо HTML

Как сделать это совместимым?

Документация имеет альтернативную разметку, которая действительна в соответствии с черновикой спецификации HTML 5:

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

Если вы хотите, чтобы он работал с HTML 4.x или XHTML 1.x, вам может быть не повезло (хотя вы могли бы добавить несовместимую разметку с помощью JS, но это было бы просто взломать скрыть его от проверки и вовсе не в духе действительной разметки)

Ответ 2

Вставьте этот код в заголовок:

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

Затем вставьте этот код, где вы хотите кнопку:

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

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

Полный ответ можно найти здесь (на французском языке)

Ответ 3

Я предполагаю, что вы пытаетесь проверить XHTML. Самое близкое, что вы собираетесь сделать, это успешно проверить, это определить пространство имен g для вашего элемента, добавив следующее:

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

то есть.,

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

Ответ 4

Самый простой способ сделать код Google Plus One для проверки: Просто поставьте:

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

Вместо:

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

Недостатки: вы не можете добавлять такие параметры, как "счет" или "размер", иначе код больше не будет действителен.

Он предложил Google код для HTML5, но будет работать и для других (X) HTML-вкусов. В HTML5 вы можете добавлять такие параметры, как "data-count", data-size 'и т.д.

Ответ 5

Попробуйте следующее:

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

Ответ 6

Сохраните код перед закрытием тега body и замените:

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

:

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

Как обычно, он делает трюк...

Ответ 7

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>

Ответ 8

простое

Используйте тег div, который вы можете настроить, чтобы разместить его там, где хотите на своей странице, и он действителен.

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

Я использую его на нашем веб-сайте www.armaven.com. Проверьте это. Если ты хочешь.

Ответ 9

Другим способом может быть настройка DTD, как и я. Я загрузил xhtml1-strict.dtd

Найдите следующее определение сущности в файле dtd

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

И измените его так, как следует (это поможет разрешить контекстуальную проверку, т.е. где должен появиться этот тег)

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

Теперь определяем новый элемент

<!ELEMENT g:plusone EMPTY>

И затем перечисляя атрибуты

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

Ответ 10

Это решение, которое я придумал...

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

Убедитесь, что у вас есть <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> или другая ссылка на jquery script в вашем заголовке!

Ответ 11

Реализованное решение уже присутствует в этом потоке, и оно было опубликовано Gilbou, но я должен добавить, что <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> не обязательно помещается в заголовок.

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

Поместите вышеуказанный код, где вы хотите, чтобы кнопка +1 была, но убедитесь, что вы заменили http://www.YOURSITE.com/ ссылкой на страницу, которая будет +1. Если вы хотите добавить другие параметры в функцию gabi.plusone.render, проверьте https://developers.google.com/+/plugins/+1button/#plusonetag-parameters и посмотрите, совместим ли это W3C с файлом http://validator.w3.org/. Удачи!

Ответ 12

После ответа Quentin вы можете добавить атрибут href, совместимый с W3C, с помощью data-href:

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