Кнопка 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="http://www.example.org"></g:plusone>

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

РЕДАКТИРОВАТЬ: Чтобы пройти через проверку, я написал статью на моем сайте.

Источник

12 ответов

Решение

кто-нибудь знает, почему это произошло?

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

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

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

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

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

Источник

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

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

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

Источник

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

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

т.е.

<html xmlns:g="http://base.google.com/ns/1.0"> ... </html>
Источник

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

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

Вместо:

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

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

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

Источник

Сохраните код, прежде чем закрыть тег 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>

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

Источник

Попробуй это:

<div class="g-plusone" data-size="standard" data-count="true"></div>
Источник

Это просто

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

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

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

Источник

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>
Источник

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

<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 в вашем заголовке!

Источник

Исходя из ответа Квентина, вы можете добавить W3C-совместимый href атрибут с помощью data-href:

<div class="g-plusone" data-size="standard" data-count="true"></div>
Источник

Другим способом может быть настройка 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
>
Источник

Решение, которое я реализовал, уже присутствует в этой теме, и оно было опубликовано 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/ и посмотрите, совместим ли он с W3C, перейдите по http://validator.w3.org/. Удачи!

Источник
Другие вопросы по тегам