Научный консалтинг
Главная
Контакты
Номер телефона
Как мы работаем
Гарантии
Условия
Цены

Валидные кнопки социальных сетей на Вашем сайте (в том числе для стандарта XHTML)

Что такое кнопки социальных сетей, наверное, рассказывать не нужно. Они устанавливаются на страницы сайтов для того, чтобы у читателей была возможность сообщить о Вашей статье своим друзьям, знакомым и всем тем, с кем они общаются в социальных сетях. Благо, в последнее время в сетях, осмелимся сделать вывод - присутствует чуть ли не половина (если не больше) населения, способного работать на компьютере.

Можно пойти двумя путями. Самый сложный, но эффективный - это написать код самостоятельно. При этом скорость загрузки кода этих кнопок, конечно, быдет наивысшей. Однако, необходимо знание языка java, perl, РНР или еще что-нибудь в этом роде. Ну, С++ на худой конец. Кроме того, необходимо будет проявить не только знание, но и умение программирования, а также затратить определенное время.

Второй путь - это позаимствовать готовые коды кнопок на сторонних сервисах. Здесь надо сказать, что подобных сервисов существует множество. Но наибольшего внимания заслуживают два из них. Это - Share42 и Яндекс. Оба сервиса совершенно бесплатные.

Перейдя по ссылке на сайт share.com, можно ознакомиться с тем, как сформировать код для социальных кнопок. Автор сайта настолько подробно и качественно все описал, что, думается, нет необходимости повторяться. Все делается легко и быстро - попробуйте! Есть возможность добавления кнопок как на сайт без движка, так и с движками Wordpress, Drupal, а также прочими CMS. Кроме того, автор создал свои варианты графических изображений социальных кнопок и получилось, на наш взгляд, очень красиво. Вот как они выглядят:
Кнопки социальных сетей от share42
От себя добавим, что кнопки работают очень хорошо и быстро. Нам эти кнопки очень понравились. Автор указанного сайта принадлежит, по всей видимости, к породе программистов той самой старой закалки, привыкших оптимизировать буквально каждую мелочь, делая, тем самым, эффективный и полноценный программный код. Ах, если бы ВСЕ современные программисты работали вот так же... Ну, да ладно, впрочем.

Если кому больше по душе социальные кнопки от Яндекс, то технологию их изготовления можно посмотреть, например, на этой странице. Раньше Яндекс предлагал не вполне валидные кнопки, по крайней мере, для стандарта Doctype XHTML (ибо это - достаточно строгий стандарт). Вот как выглядел код для социальных кнопок от Яндекс:

class="interval_15"><script type="text/javascript" src="//yandex.st/share/share.js"
charset="utf-8"></script>
<div class="yashare-auto-init" data-yasharel10n="ru"
data-yasharequickservices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"
data-yasharetheme="counter"></div>


В стандарте Doctype HTML этот код проходил валидацию, однако в XHTML возникали небольшие проблемы. Как отвечала служба поддержки Яндекса, валидность не является обязательным свойством сайта (это же подтверждает и тот факт, что даже сайты тех фирм, которые осуществляют разработку и продвижение других сайтов, нередко содержат немеренное количество ошибок и не проходят валидацию). Однако, наше желание попробовать и сделать все "от и до", все-таки, одержало верх.

И вот в конце 2014 г. код социальных кнопок от Яндекс стал валидным и для Doctype XHTML. Посмотреть, как он формируется, можно, перейдя по указанной выше ссылке.

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

<script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"</script>
<div class="yashare-auto-init"></div>


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

Почему потребовались изменения? Дело в том, что Яндекс предлагает код социальных кнопок для Doctype html5. В отличие от него, XHTML, по всей видимости, не содержит в себе таких параметров, как data-yashareType (тип блока), data-yashareQuickServices (список сервисов), data-yashareTitle и других. Соответственно, валидатор "ругается", выдавая ошибку. Повторимся, ничего страшного в этом нет, кнопки социальных сетей, даже не будучи валидными, все равно корректно определяются всеми современными браузерами (впрочем, и не очень современными - тоже). Просто хотелось сделать идеальный код. И он получился.
При этом кнопки будут иметь вид, представленный на рисунке:
Кнопки социальных сетей

Можно нажать на маленькие кнопки, находящиеся справа и тогда откроется страница с соответствующей социальной сетью, на которой читателю можно будет добавить комментарий и таким образом опубликовать ссылку. А можно нажать на кнопку "Поделиться...". При этом сработает java-скрипт и откроется меню для выбора кнопок социальных сетей. Кнопки социальных сетей

Правда, меню будет вертикальным. Так что, как говорится, на вкус и цвет - кому из читателей какое меню понравится: вертикальное, вызываемое нажатием на кнопку "Поделиться..." или же горизонтальное.

Что же касается кнопок всех остальных известных нам производителей (того же PULSO), они, на наш взгляд, не стоят серьезного внимания, ибо существенно нагружают сайт, затрудняя его открытие. Не говоря уже о том, что дают исходящие ссылки на свои ресурсы. В принципе, одна лишняя ссылка на странице сайта - это абсолютно ничего страшного, но тем не менее. Тогда как социальные кнопки от Яндекс и share42.com показывают хорошую работоспособность и полную валидность, не нагружая сайт никаким дополнительным содержимым.

Вот что мы можем сделать для Вас:
Интересная и полезная
информация
Изменить размер шрифта:
?