Кнопка Google +1 не совместима с W3C - PullRequest
Новая
       20

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

41 голосов
/ 02 июня 2011

Итак, я играл с кнопкой 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 ]

24 голосов
/ 02 июня 2011

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

Поскольку Google разработал для него теговый суп вместо HTML

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

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

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

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

11 голосов
/ 23 июня 2011

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

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

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

9 голосов
/ 02 июня 2011

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

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

т.е., 

<html xmlns:g="http://base.google.com/ns/1.0"> ... </html>
6 голосов
/ 12 июня 2011

Самый простой способ сделать код 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 »и т. Д.

2 голосов
/ 05 июля 2011

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

Как обычно, это помогает ...

2 голосов
/ 19 июня 2011

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

<div class="g-plusone" data-size="standard" data-count="true"></div>
1 голос
/ 30 июля 2011

это просто

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

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

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

1 голос
/ 20 июля 2011

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>
0 голосов
/ 26 января 2015

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

<div class="g-plusone" data-size="standard" data-count="true"></div>
0 голосов
/ 20 июля 2012

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

Страница:
...