Невалидные Яндекс.Метрика и API «Поделиться»

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

Популярно расписывать все достоинства Метрики не стану, расскажу об одном минусе. Код яваскриптов Метрики и блока «Поделиться» не проходит проверку на валидность согласно Doctype XHTML 1.0 Transitional, а все из-за  data-атрибутов, поддерживаемых в HTML 5.  HTML 5 меня пока мало волнует, а вот валидность блога очень даже… У меня иногда бывают заходы, сделать все валидным…

Как я сделал код API Яндекса и Метрики валидным.

Все обращения к яваскриптам разместил внутри <head>, примерно так

<head><script src="//yandex.st/share/share.js" type="text/javascript"></script>
<script src="//mc.yandex.ru/metrika/watch.js" type="text/javascript" defer="defer"></script></head>

Код метрики выводится текстом через виджет

<div style="display:none;"><script type="text/javascript">(function(w, c) {    (w[c] = w[c] || []).push(function() {        try {            w.yaCounter5449075 = new Ya.Metrika(5449075);             yaCounter5449075.clickmap(true);             yaCounter5449075.trackLinks(true);                } catch(e) { }    });})(window, 'yandex_metrika_callbacks');</script></div>
<noscript><div><img src="//mc.yandex.ru/watch/5449075" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

а код блока «Поделиться» я вписал в нужном месте следующим образом

<script type="text/javascript">new Ya.share({
        element: 'ya_share1',
            elementStyle: {
                'type': 'button',
                'border': true,
                'quickServices': ['yaru', 'twitter', '|', 'vkontakte', 'moimir', 'odnoklassniki']
            },
            link: 'http://www.yandex.com/',
            title: 'Yandex — the best search engine in the universe!',
            popupStyle: {
                blocks: {
                    'Поделись-ка!': ['yaru', 'twitter', '', 'vkontakte', 'moimir', 'odnoklassniki'],
                    'Поделись-ка по-другому!': ['yaru', 'twitter', '', 'vkontakte', 'moimir', 'odnoklassniki']
                },
                copyPasteField: true
            },
            serviceSpecific: {
                twitter: {
                    title: '#Yandex — the best search engine in the universe!'
               }
        }
});</script>
<span id="ya_share1"></span>

Из наблюдений, сделанных методом тыка заметил, что яваскрипт Ya.share нельзя ставить далеко от

<span id="ya_share1"> </span>

, ибо при нажатии на кнопки блока страница начнет дергаться.

До вышенаписанного я дошел не своим умом, покопался в документации для разроботчиков по API Ядекса.

Предлагается два варианта установки кода — с автоматической инициализацией(для валидности требует HTML5) и со стандартной инициализацией (то, что я выше описал). Не понятно, нафига по умолчанию подсовывать версию кода для 5-го ХТМЛа.  Могли бы на странице api.yandex.ru/share сразу предлагать к установке оба варианта, с описанием особенностей.
Ну и кроме невалидного Яндекса пришлось победить несколько ошибок в плагинах и теме оформления.

Зато теперь, проверяя страницы блога валидатором видно

ResultPassed

This document was successfully checked as XHTML 1.0 Transitional!

 

С уважением, некий d_ma

Posted in WAP Life and tagged , , .

5 Comments

  1. Добрый молодец!
    Похожая проблема и с Яндекс Директом. Валидацию не проходит. В своё время забил на это, но сейчас хочу довести до ума.

  2. Доброго времени суток. Я решила остановиться на кнопках соц.сетей через Яндекс, но эта автоматическая и стандартная инициализация меня убивает. У меня wordpress и шаблон с учетом html5, какую мне лучше инициализацию выбрать? Я так и не поняла чем конкретно они отличаются.

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

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