Как установить социальные кнопки на сайт

 
Здравствуй, дорогой читатель!

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

 

Для чего нужны социальные кнопки

Я думаю, очевидным фактом является то, что посещаемость  каждого сайта зависит от многих факторов. Например таких, как оригинальность текстов, авторитет авторов, seo, многое другое. И, естественно, взаимодействие с посетителями, пришедшими из социальных сетей.

Чем больше посетителей из социальных сетей (Вконтакте, Facebook, Ttwitter, Одноклассники, Я.ру, Мой Мир, Google+ и др.), тем интереснее и выгоднее как самим посетителям, которые читают, в частности, блог, так и автору блога, который получает мотивацию для написания ещё лучших и полезных статей для своих читателей.

 

Социальные кнопки для блога на WordPress. Существующие решения

 

Плагины для WordPress

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

Но как бы странно это не звучало/читалось, таких плагинов нет.
Шучу, конечно... :)

Есть такие плагины для wordpress. Но все они либо имеют предназначение «поделиться» в социальных сетях буржунета, либо ограничены всего несколькими популярными русскоязычными социальными сетями: Вконтакте, Facebook, Twitter, Google+. Заметьте, я не указал ни Одноклассники, ни Я.ру, ни Мой Мир. Потому что нет таких плагинов.

Что ж. Если я не прав, то поправьте меня. Буду благодарен Вам и очень признателен!
 

Виджеты социальных сетей

Социальные виджеты — это тоже вариант. Достаточно самому зарегистрироваться, как разработчик, в каждой социальной сети, и сделать для своего сайта виджеты. Здесь и разнообразие есть: кнопка «поделиться», кнопка «мне нравиться», кнопка Google+1.

Довольно муторное, но вполне осуществимое, занятие. Иногда я прибегаю к этому варианту.
 

Сервисы социальных кнопок

 

Кнопки социальных сетей, сервисов и закладок от AddThis.com

Есть все кнопки, в том числе и русскоязычных сервисов. Также сервис предлагает статистику по кнопкам.

Честно говоря, очень много  говно  лишнего кода. Это — моё личное мнение. Но, в то же время, много возможностей.

 

Стильные социальные кнопки для сайта от Share Pluso

Очень стильные кнопки. Можно подобрать несколько вариантов внешнего вида, настроив под дизайн своего сайта. Доступен большой выбор различных социальных сетей. Загрузка кнопок происходит с удалённого сервера посредством скриптов, которые нужно разместить у себя на сайте.

 

Социальные кнопки от Share42

Этот вариант интересен тем, что имеет простой конструктор социальных кнопок и варианты оформления для нескольких CMS. Можно выбрать кодировку и указать, используется ли jQuery на сайте. Эти кнопки установлены на проекте Puzoterok.NET. Весь код (кстати, совсем скромный) и изображения кнопок скачиваются и устанавливаются на свой сайт.

 

Кнопки «Поделиться» от Яндекса

Хорошее решение кнопок социальных сетей предоставляет Яндекс. Можете посмотреть здесь. Интересное решение. Есть несколько вариантов кнопок и различных социальных сетей на выбор.

А теперь «гвоздь программы». По ссылке выше Вы не найдёт то решение, которое использует сам Яндекс. Вот так выглядят кнопки со счётчиками:

Нажмите, чтобы проверить, как работают кнопки:

 


 

Как установить социальные кнопки

Код установки совсем не большой. Вот он:

<script type="text/javascript" src="//yandex.st/share/cnt.share.js" charset="utf-8"></script> <!--Подключение скрипта-->
<div class="yashare-auto-init"
    data-yashareL10n="ru"                            <!--Установка языка: по умолчанию, русский-->
    data-yashareLink="http://site.com"               <!--Ссылка на страницу-->
    data-yashareTitle="Заголовок"                    <!--Заголовок страницы-->
    data-yashareDescription="Описание"               <!--Описание страницы-->
    data-yashareImage="http://site.com/image.png"    <!--URL картинки-->
    data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" <!--Кнопки социальных сетей-->
    data-yashareTheme="counter"                      <!--Установка счётчика-->
    data-yashareType="small">                        <!--Размер кнопок: small или big; можно не писать, тогда, по умолчанию, big-->
</div>

Это — все атрибуты. Но, на самом деле, можно использовать только некоторые из них. Остальные — не обязательны. И вот код, который использую я на этом сайте:

<script type="text/javascript" src="//yandex.st/share/cnt.share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter"></div>

Не забудьте поменять кодировку, если у Вас другая, например win-1251, а не utf-8.

Если в Вашей теме WordPress есть возможность добавлять код в каждый пост, то очень хорошо, — Вам не нужно править файлы. Вы просто можете вставить код javascript и сам блок вывода кнопок и сохранить.

Если же тема не имеет такую возможность, то нужно открыть файл single.php Вашей темы и вставить код в нужном месте. Т.е. там, где заканчивается вывод содержимого статьи.

Если хотите вставить кнопки социальных сетей на страницы, то нужно править файлы, отвечающие за показ страниц. Обычно — это файлы page.php, page-blog.php и т.д. Количество таких файлов зависит от того, что у Вас за тема WordPress.

Очень классный совсем небольшой код! К тому же очень симпатичный. Подойдёт  почти к любому дизайну.

Вот так вставляются кнопки социальных сетей на сайт.

На этом всё. Спасибо за внимание. До скорых встреч. «Доброго Вам здоровьица» ©   :)

Оцените материал:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звёзд   (голосов: 4, средняя оценка: 5,00 из 5, сумма: 20)

Loading...

Понравилось? Поделитесь с друзьями:





Другие материалы по теме:

Борисов - Качество
HTML и CSS - бесплатные видеокурсы
«HTML» и «CSS»
Изучите Видеокурсы
Бесплатно!
Станьте хозяином своих сайтов прямо сейчас! Введите Ваше Имя и Ваш E-Mail:

Ваш E-Mail в безопасности