Кнопка 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>

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

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


javascript w3c w3c-validation google-plus-one
person ingh.am    schedule 02.06.2011    source источник
comment
Часть {lang: 'en-GB'} мне кажется странной. Во-первых, потому что тот же тег script загружается из src, поэтому я не думаю, что в нем должен быть еще какой-то код. Во-вторых, объектный литерал ничему не присваивается, так какой в ​​этом смысл?   -  person mkilmanas    schedule 02.06.2011
comment
@mkilmanas, хотя браузер будет игнорировать содержимое элемента SCRIPT, если предоставлен атрибут SRC, автор сценария все равно может написать код, который извлекает содержимое элемента SCRIPT (т. е. часть {lang: 'en-GB'} в приведенном выше примере) и воздействует на него. . Это удобный шаблон для связывания литерала объекта JS, который скрипт может использовать в качестве параметров или конфигурации и т. д. Просто к вашему сведению...   -  person dossy    schedule 02.06.2011
comment
Спасибо, это интересно, хотя, я не понял, что   -  person mkilmanas    schedule 02.06.2011

Ответы (12)


arrow_upward
24
arrow_downward

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

Потому что Google разработал его для использования супа тегов вместо HTML.

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

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

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

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

person Quentin    schedule 02.06.2011
comment
Я попробую ваше решение, но не уверен, что смогу изменить правильный ответ. - person ingh.am; 24.06.2011
comment
Теперь вы знаете, как я могу указать значение href без Javascript? - person Ivan Kuckir; 27.07.2012

arrow_upward
11
arrow_downward

Вставьте этот код в шапку:

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

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

person Gilbou    schedule 23.06.2011
comment
К вашему сведению, я использую это объявление на своей странице: ‹!DOCTYPE html PUBLIC --//W3C//DTD XHTML 1.0 Transitional//EN w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd› ‹html xmlns=w3.org/1999/xhtml› - person Gilbou; 23.06.2011
comment
Чтобы определить URL-адрес, вы бы добавили его в JSON в .render? - person ingh.am; 24.06.2011
comment
Я так думаю: ‹div id=plusone-div class=plusone›‹/div› ‹script type=text/javascript› gapi.plusone.render('plusone-div', { size: small, count: true, href: ваш_url_здесь}); ‹/скрипт› - person Gilbou; 27.06.2011

arrow_upward
9
arrow_downward

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

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

i.e.,

<html xmlns:g="http://base.google.com/ns/1.0"> ... </html>
person dossy    schedule 02.06.2011
comment
Если вы хотите, чтобы он прошел проверку W3C Markup Validator, вам также потребуется написать собственный DTD и указать на него Doctype. Конечно, хотя это будет действительным, оно не будет действительным (X)HTML. - person Quentin; 02.06.2011
comment
Если Google не предоставил этот совет, он НЕ является законным. Авторы страницы не вправе решать, что plusone должен жить в указанном выше пространстве имен Google; только у Google есть такие полномочия. - person Matthew Wilson; 06.06.2011
comment
@Matthew - это находится в пространстве имен g, ср. g:plusone - так в чем проблема? - person dossy; 10.06.2011
comment
@Quentin› нет, X означает расширяемость. Добавляя пользовательское пространство имен и DTD, вы обеспечиваете соответствие XHTML, поскольку сама спецификация определяет средства расширения разметки. - person Paul; 12.06.2011
comment
@Paul — он расширяемый в том смысле, что он построен на XML, и вы можете смешивать пространства имен. XHTML + MathML (например) — это XHTML + MathML, а не XHTML. В спецификации указано, что документы со смешанным пространством имен не строго соответствуют - person Quentin; 13.06.2011
comment
@Dossy: нет, у него просто есть префикс g: в разметке супа тегов. Пространство имен XML не используется, поэтому оно не объявлено частью пространства имен, определенного base.google.com. /ns/1.0 (если на этот счет нет заявления Google). - person Matthew Wilson; 13.06.2011

arrow_upward
6
arrow_downward

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

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

Вместо:

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

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

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

person Ricardo de la Vega    schedule 12.06.2011

arrow_upward
2
arrow_downward

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

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

by :

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

Как обычно, это делает свое дело...

person SuN    schedule 05.07.2011

arrow_upward
2
arrow_downward

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

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

arrow_upward
1
arrow_downward

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>
person seo outsourcing    schedule 20.07.2011
comment
Лол взято из моего собственного блога ;) - person ingh.am; 21.07.2011

arrow_upward
1
arrow_downward

это просто

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

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

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

person Magi    schedule 30.07.2011

arrow_upward
0
arrow_downward

Другим способом может быть настройка 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
>
person Shoaib Nawaz    schedule 04.01.2012

arrow_upward
0
arrow_downward

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

<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 в шапке!

person Brandon    schedule 16.02.2012

arrow_upward
0
arrow_downward

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

person Andrei T    schedule 20.07.2012

arrow_upward
0
arrow_downward

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

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