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

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

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

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

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

Share42

Перейдя по ссылке на сайт share42.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 показывают хорошую работоспособность и полную валидность, не нагружая сайт никаким дополнительным содержимым.

Полностью валидная современная версия социальных кнопок от Яндекс (осень 2017 г.)

Отметим, что для стандарта XHTML целесообразнее использовать эту версию социальных кнопок от Яндекс. На этой же странице приведен перечень параметров, которые позволяют управлять социальными кнопками. Например, задать их размер, определить перечень социальных сетей, которые будут показываться по умолчанию и дополнительно, ну, и ряд других параметров. Конкретный пример реализации приведен здесь (в частности, в комментарии от 12 ноября, 13:43). Примерно такой же код используется и на нашем сайте.

Отметим, что эта версия, в отличие от предыдущей, даже загружается как-то быстрее. Видимо, в Яндексе оптимизировали ее.
Какой из сервисов лучше?

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

Тогда как Яндекс дает возможность использовать свое API, не скачивая его, а лишь установив на каждую страницу пару скриптов и соответствующий блок div. Дальше браузер (пользователя) сам все сделает автоматически. Преимущества в том, что не надо следить за обновлениями: ведь функционал социальных сетей изредка меняется, появляются или исчезают новые сети.


Комментарии:
Всего комментариев:0
Пожалуйста, не забудьте ознакомиться с правилами оставления комментариев.



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