Валидный код кнопки «Поделиться» (yandex.st/share/share.js) и Гугл плюс

By | 30.11.2012

Всем добрый день! На днях добавил на сайт блок «Поделиться» от Яндекса. Данный блок кнопок «Поделиться» вы можете видеть внизу каждой статьи, он позволяет быстро отправить ссылку на страницу Вашего сайта или блога в различные социальные сети. Зачем это мне нужно?

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

Все мы с Вами знаем, что вольнее языка, чем HTML найти трудно. Однако, и у него существуют определённые правила, которые регулируются различными стандартами (HTML4, XHTML1.1 и другие). Но НЕсоблюдение этих стандартов не означает, что сайт не отобразится. Браузеры ВЫНУЖДЕНЫ отображать даже самый гнилой код. Если они будут отображать только валидный HTML, то примерно 95% сайтов пользователи просто не увидят, и браузер растеряет всю свою долю рынка. Ведь именно столько процентов сайтов не являются валидными вообще. О смысле и значении валидации я решил поговорить в этой статье.

Прежде чем приступать к разговору валидности, давайте с Вами определимся, что это такое. Скажу своими словами, валидный HTML-код — это HTML-код, написание которого соответствует стандарту, указанному в DOCTYPE. Например, у меня на сайте в DOCTYPE стоит XHTML1.1. Проверить валидность HTML-кода можно здесь: http://validator.w3.org — это официальный валидатор.

Так в чём же преимущества валидного кода:

  • Немного выше скорость загрузки.
  • Лёгкий парсинг сайта.
  • Лучшая индексация поисковыми системами, что следует из предыдущего пункта.
  • Более высокая кроссбраузерность.

Как видите, преимущества имеются. Но их «плюсовость» не так уж и велика и вот почему:

  • Скорость повышается практически незаметно.
  • Благодаря хорошему коду, Ваш контент будет проще украсть с использованием автоматизированных средств.
  • Поисковые системы стали очень хорошими, поэтому разбираются даже в самом ужасном коде.
  • Современные браузеры даже самый ужасный код будут отображать примерно одинаково.

Но вернемся непосредственно к нашей теме.

Изначально на сайт был добавлен такой код, который предложил Яндекс:

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

В результате долгого поиска по интернету  были рассмотрены различные варианты решения этой проблемы, но так как предлагаемые скрипты были громоздкими, то приемлемого способа я так и не нашел.

Пришлось лезть в руководство разработчика (то, что в формате PDF) по кнопке «Поделиться».

В результате экспериментов получился вот такой код, который успешно проходит проверку на валидность:

Валидный код блока «Поделиться»

Валидный код кнопки Гугл плюс

С кнопкой Гугл плюс все проще.

В том месте, где необходимо разместить кнопку Гугл плюс добавляем тег <div></div> , а далее где-нибудь в конце странички добавляем:

Таким образом, Ваш сайт сможет легко пройти проверку на валидность.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

4 thoughts on “Валидный код кнопки «Поделиться» (yandex.st/share/share.js) и Гугл плюс

  1. Дмитрий

    Там ещё смысл в чем что бы было видно сколько челов поделилися — а вы предлагаете обычный, не некрасивый — 😉

    Reply
  2. Антон

    Спасибо за код. Как его можно скачать в zip? Скопировать неимею возможности.

    Reply
  3. Роман Викторович

    Спасибо за код очень помогли

    Reply

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.