Нужны ли кнопки «поделиться» социальных сетей

ADDTHIS.COM

Вот как выглядит главная страница. С нее и начнем.

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

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

Регистрация простая, вам нужно ввести свой адрес электронной почты и пароль, и все. Далее вам станут доступны все операции с копированием кода.

Вариантов вставить кнопки существует несколько, либо использовать плагин вордпресс, либо вставить в нужном месте фрагмент кода. Я остановился на варианте вставки кода. Вот что делаем дальше.

Мне понравился вертикальный вариант расположения кнопок, вы можете выбрать абсолютно любой. После этого копируем код в правом окне, либо обычным способом ctrl+с, или клацаем клавишу Grab It, что тоже самое.

Вставлять этот код будем в странице с комментариями. (Все картинки кликабельны)

В коде комментариев ищем вот это место

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

Когда мы спускаемся к низу записи, блок с кнопками также скользит вместе с нами. Я считаю, что очень даже удобно.

Установка Uptolike Share Buttons

Плагин можно скачать с официального сайта — Uptolike Share Buttons, либо установить из поисковой строки, как устанавливать плагины можно прочитать в мой стать здесь. Мне кажется второй вариант проще, его и рассмотрим. В админке WordPress переходим в раздел Плагины -> Добавить новый в поисковой строке набираем Uptolike Share Buttons, и устанавливаем найденный плагин.

Не забываем после установки активировать плагин (нажав соответствующий пункт), после чего переходим к настройке Uptolike Share Buttons выбрав появившейся пункт UpToLike в админке.

Основные настройки

Перед нами появляется панель настроек состоящая из горизонтальных вкладок и трех страниц, в которой разобраться совсем несложно. Начнем со вкладки Конструктор и настроим основные настройки.

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

1. Вертикально и горизонтально — блок с кнопками будет располагаться вертикально или горизонтально в виде полоски непосредственно перед началом статьи или/и после статьи либо одновременно сверху и снизу. Местоположение блока задается на вкладке Настройки

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

3. Показывать счетчик — показывает счетчик, метод показа может быть Раздельный — около каждой кнопочки появляется индивидуальный счетчик, либо Общий — суммарный счетчик для всех кнопок. Первый вариант мне кажется загромождает блок, особенно если кнопок много, а второй смотрится более прилично.

4. Цитирование — при выделении фрагмента текста появляется кнопка Поделиться и пользователю предоставляется возможность поделится данным фрагментом текста и ссылкой на данную страницу в любой социальной сети (этих сетей 25 шт.)

5. Following — дополнительная возможность для пользователя присоединиться к одной из вашей сети после расшаривания страницы в социальную сеть.

6. Кнопка «наверх» — перемещает пользователя наверх страницы, фактически дублирует кнопку вверх, которая есть практически на всех сайтах.

Настройка стилей

Можно радикально поменять вид кнопок социальных сетей (все изменения видны в реальном времени):

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

После всех изменений не забывайте сохранять изменения.

Статистика

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

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

Положительные отличия от скриптовой установки для WordPress:

Удобнее чем установка скрипта, не надо думать куда его вставлять, и где потом искать (если забыл);
Очень простое изменение в процессе работы — местоположение, внешний вид кнопок;
Удобство пользование статистикой;

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

Рекомендую посмотреть мой видео урок «Добавляем кнопки социальных сетей — плагин Uptolike Share»

А какой плагин для социальных сетей вы используете на своем сайте?

P.S. Список самых необходимых плагинов для WordPress, большинство из которых установлены на моем сайте можно найти в моем посте здесь.

Дмитрий Леонов | leonov-do.ru

Подпишитесь на рассылку с блога

Проверьте себя: готов ли ваш сайт к трафику из соцсетей

Оптимизация сайта под соцсети (SMO) – полезная штука: если сделать все правильно, пользователи будут проводить на сайте больше времени, а репосты приведут новый трафик.

Держите чек-лист для проверки готовности сайта к трафику из соцсетей.

1. Качественный виральный контент

интересный и понятный целевой аудитории;
подготовлен в стиле, который близок вашей аудитории;
разнообразный – используются вовлекающие форматы (видео, опросы, инфографика и т.д.);
ориентирован на пользу (продажи – ненавязчивы и органичны);
регулярно публикуется.

2. Сайт оптимизирован для шеринга в соцсетях

кнопки «Лайкнуть» и «Поделиться» размещены на видном месте;
на сайте есть виджеты соцсетей;
в html-коде контентных страниц реализована микроразметка OpenGraph.

3. С юзабилити все хорошо

пользователи могут лайкать статьи и оставлять комментарии;
реализована понятная и уместная перелинковка;
в статьях и других материалах используются тематические теги;
на сайте удобный и понятный дизайн;
в текстах используются читабельные шрифты.

Если все это у вас уже реализовано – активно привлекайте трафик и отслеживайте, как посетители взаимодействуют с контентом. Репосты и социальный трафик вам практически гарантированы.

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

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

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

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

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

К тому же, счетчики кнопок блока «Поделиться» показывают общее количество лайков, включая те, которые были перепощены, то есть даже тогда, если человек поделился статьей не только с вашего сайта, но и с самой социальной сети.

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

Главное — этот блок очень полезен. Яндексу нравится, когда используют его сервисы в работе и это факт. Данный факт уже доказан и неоднократно упоминался на последних seo-конференциях, что частично подтвердил и сам Яндекс (в одной из недавних статей я делал обзор одной такой конференции). Исходя из этого, становится понятно, что не нужно использовать различные сервисы, а лучше обратиться к самому Яндексу.

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

Для начала, нам нужно перейти на страницу блока «Поделиться». Там можно все изучить более подробно и прочитать документацию. Но основные моменты, я покажу в данной статье. После перехода на данную страницу, Вы сможете выбрать необходимые социальные сети и получить код для размещения на Вашем сайте.

Галочками нужно отметить нужные сети.

Здесь Вы найдете сам код для размещения на сайте и увидите, как все это будет выглядеть. Также можно настроить внешний вид и выбрать «только иконки» или другие варианты. Я выбрал «Счетчики».

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

Внимание! Чтобы разместить код, нужно понимать основные принципы и знать как работать с кодом вашего сайта. Кстати, я уже писал на блоге о социальных кнопках и даже разместил урок о том, как вставить нужный код на свой сайт

Принцип тот же самый и если Вы не знаете как работать с кодом и у Вас вордпресс, то можете посмотреть урок здесь.

На этом на сегодня у меня все. Надеюсь, что данная статья принесет Вам пользу. На самом деле это очень полезная информация и я вам настоятельно рекомендую поставить себе такие кнопочки. Как всегда жду Ваших вопросов к данной статье и постараюсь ответить всем. Ну и конечно, не забудьте поделиться статьей и пробежите по кнопкам ниже. Желаю Вам удачи!

Способ 2

Тема-Изменить ХТМЛ.
post-share-buttons goog-inline-block, нажимаем Enter на клавиатуре, нужный код появится в шаблоне, он будет выделен жёлтым цветом. Ниже найденной строчки вставляем код кнопок. (Где их взять расскажу позже).
Нажимаем — Предварительный просмотр темы . Смотрим всё ли нас устраивает и нажимаем Сохранить тему.
Дальше нужно сделать некоторые дополнения.
Что бы код не был виден на главной странице в анонсах статей, а только в самой статье, для кода нужно добавить условие <b:if cond=’data:blog.pageType == "item"’> код кнопок </b:if>. А так же если хотите добавить надпись или рамочку для блока кнопок, нужно проделать некоторые шаги.
В любом редакторе ХТМЛ пишем нужный текст и другие дополнения — шрифт, цвет, размер. Удобно всё делать в самом Блоггере или в любом визуальном редакторе. Оформляете код в режиме редактора, а код копируете в режиме html.Подытожим создание блока кнопок соцсетей, перед тем как установить его в шаблон:

Находим код кнопок соцсетей
Делаем в редакторе оформление надписи, дополнения и украшения + код кнопок, копируем весь код в режиме ХТМЛ
<b:if cond=’data:blog.pageType == "item"’> оформление+код кнопок</b:if>
Находим в шаблоне post-share-buttons goog-inline-block, вставляем готовый код.

Сервисы кнопок

http://share.pluso.ru/
http://share42.com/ru
Tech.Yandex.ru
http://social-likes.js.org/ru/
Odnaknopka.ru
Pip.Qip.ru
https://usocial.pro/
http://uptolike.ru/
http://www.addthis.com/
https://www.sharebuttons.com/
https://www.addtoany.com/
https://www.sharethis.com/
~~http://share.itraffic.su/~~ — не работает

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

Просмотрите внешний вид кнопок на каждом сайте и берите код понравившихся.

На примере сайта ~~http://share.itraffic.su/~~ я покажу как настраивать кнопки соцсетей и где находится код.

Переходим на сайт, регистрация не нужна.

Настраиваем кнопки
Смотрим их внешний вид в окне рядом
Установив нужные настройки кода, копируем

Рассмотрим изменения кнопок поближе:

Выбираем стиль кнопок, которых достаточное количество.
Позиционирование кнопок — где будут находиться кнопки: внизу, справа, слева, горизонтально и т.д.
Выберем размер
Счётчики — без него, общий счётчик, счётчик для каждой кнопки
Можно не выбирать какие нужны соцсети, а нажать — все кнопки
Кнопка наверх — в блоке кнопок будет кнопка, нажав на которую, читатель может с низа страницы вашего сайта, плавно переместится наверх.
Нужна ли вам анимация кнопок, если да — нажимаем включить
Эффект при наведении — кнопки подпрыгивают, качаются и т.п.
Цветовая гамма кнопок — можно сделать кнопки под цвет блога однотонными, цветными или двухцветными, а так же добавить фон.
Выбираем нужные соцсети, перетаскивая их из правой колонки в левую, меняем их очерёдность по вашему усмотрению, опять перетаскиванием.

По аналогии работают все конструкторы соц кнопок.

Выбирается стиль и другие дополнения, и копируется код.

А напоследок несколько генераторов рамочек, если вам понадобиться ими украсить блок кнопок.

http://4maf.ru/ramochnik.php

http://yablor.ru/blogs/generator-ramochek/4920958#red1

http://angrytools.com/css-generator/border/

http://www.toutimages.com/ — здесь можно найти коды рамочек и много другой информации.

Как создать кнопки социальных сетей

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

Share42.com

Благодаря Dimox, популярнейшего блогера, появился отличный сервис Share42.com. Он настолько прост в использовании, что с помощью него установить кнопки соц сетей на сайте сможет даже школьник.

Первое. Переходим на сайт Share42.com. Далее выбираем какого размера будут значки кнопок 32×32, 24×24 или 16×16.

Теперь кликаем по тем кнопкам, которые будут добавлены к вам на сайт. Можете накликать хоть штук 20. Я выбрал самые основные одноклассники, в контакте, твиттер, фейсбук.

Не забывайте и про кнопки из вкладки «Прочие». Они помогут оформить RSS подписку или сделать закладку страницы.

Второе. Теперь настраиваете необходимые под себя опции и выбираете горизонтальное или вертикальное размещение кнопок.

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

Ставим кодировку сайта UTF-8. Выбираем язык подсказки иконок «Русский». Если есть желание добавить иконку сайта Share42.com, тогда ставим напротив галочку.

Прописываем ссылку на RSS вашего фида (Например, у моего блога фид feeds.feedburner.com/seoslim).

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

Четвертое. Самая сложная часть установить работу скрипта на блоге. Распаковываем скаченный ранее скрипт на компьютере. С помощью FTP — менеджера закачиваем папку share42 к себе на хостинг.

Я для своего удобства в корне файлов блога создал отдельную папку file и залил папку share42 именно туда.

Вот такой получился адрес к папке:

http://seoslim.rufileshare42

Так как я делаю социальные кнопки для wordpress, поэтому выбирал из списка тип сайта: wordpress.

Генератор тем временем сформировал скрипт, который необходимо вставить в то место, где будут выводиться иконки голосования.

Я использую вертикальные кнопки, поэтому полученный код вставляю в файл footer.php перед закрывающим тегом </body>.

Те, кто будет делать горизонтальный блок кнопок рекомендую вставить полученный скрипт в файл single.php в любое место, где хотите их увидеть.

Последним шагом останется только оформить стиль социальных иконок сайта. Для этого можете закинуть мой код или использовать свой.

#share42 {
left 0px;
margin-top -180px;
opacity 1;
padding 6px 6px 0px;
position fixed;
top 50% !important;
}
 
#share42hover {
opacity 0.85;
}

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

Оптимизация под запросы

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

названии группы;
контенте;
комментариях.

Для выбора ключевых слов можно использовать сторонние инструменты, например, SE Ranking, который поможет составить правильную семантику

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

При использовании запросов не стоит спамить, лучше ориентироваться на естественные вхождения.

Под какие соцсети стоит оптимизировать сайт

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

Немного статистики

Под данным за январь 2020 года, первое место в мире среди соцсетей занимает Facebook (с более чем 2,4 млрд пользователей). На втором месте – YouTube.

В отчете Mediascope за апрель 2020 года о самых посещаемых ресурсах в России среди соцсетей лидируют YouTube и ВКонтакте:

Как определить приоритетную соцсеть, если вы только начинаете заниматься SMM и SMO? Вот несколько способов узнать, какую соцсеть предпочитают ваши потенциальные клиенты:

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

2. Проанализируйте конкурентов. Используйте сервисы Ahrefs, SimilarWeb и другие, которые позволяют посмотреть источники трафика любого сайта. Также полезно найти аккаунты/группы конкурентов в соцсетях (для этого достаточно перейти по кнопкам соцсетей, размещенных на их сайтах) и оценить, в какой из соцсетей у конкурентов больше подписчиков, где аудитория более активна

При анализе обращайте внимание на активность. Подписчиков можно накрутить много, но именно активность (репосты, лайки, комментарии) дает более адекватное понимание.

3. Поищите группы и аккаунты в соцсетях по вашей тематике (просто вбейте в поиске Facebook или ВКонтакте слова, связанные с вашими продуктами). Здесь то же самое – смотрите на объем и активность аудитории сообществ.

Для максимальной эффективности рекомендуем использовать все три способа. Так вы сможете определить, какие соцсети для вас приоритетны, а в каких нет смысла даже заводить аккаунты.

Работа с контентом для раскрутки сайта через социальные сети

Регулярное обновление. Если на сайте новые публикации появляются раз в месяц – рассказать в соцсетях особенно не о чем. Регулярные публикации с анонсами в соцсетях помогут привлечь заинтересованный трафик на сайт; новый контент почти всегда – повод для обсуждения.

Понимание интересов целевой аудитории. Сложно привлечь трафик из соцсетей для раскрутки сайта философскими рассуждениями на отвлеченные темы. Почти весь контент (кроме развлекательного) должен так или иначе соотноситься с тематикой ресурса. Статьи о переустройстве мира скорее оттолкнут тех, кто пришел за услугами коуча или за новыми кроссовками, чем привлекут.

Вовлечение

Важно использовать на сайте разные виды и форматы контента – не только статьи, но и опросы, голосования, видео. Это не даст посетителям сайта заскучать и сделает ресурс привлекательнее

Около 100 идей постов, которые подходят бизнесу из самых разных сфер, собраны в разделе нашего блога «Генератор идей».

Оформление и анонсирование контента сайта. С точки зрения SMO необходимо не только подготовить контент сайта, но и подумать о том, как он будет отображаться в соцсетях, если пользователь им поделится. Это значит, что у каждого материала должны быть заголовок, обложка, и первая анонсирующая фраза, которая покажет, о чем будет статья. Обычно эта фраза видна при репосте статьи, в том числе при автопостинге во ВКонтакте, Фейсбуке* или Инстаграме*.

Оформление и анонсы – важная часть оптимизации контента сайта для соцсетей

Вариант «Новая статья расскажет, как фасилитация поможет мотивировать коллектив во время митапа на новые трудовые свершения» будет работать хуже, чем «Рассказываем, как сделать рабочие совещания нескучными и результативными».

Как добавить блок на страницу

Вы можете создать блок для своего сайта с помощью конструктора (https://tech.yandex.ru/share/). Описание дополнительных параметров ищите в документации.

Или настроить все вручную.

Подключите скрипт блока. Чтобы загружать скрипт асинхронно и не блокировать загрузку страницы, укажите атрибут async=»async».
Поместите блок в контейнер. В качестве контейнера можно использовать любой блочный элемент, добавив атрибут class=»ya-share2″.
Настроить блок вы можете с помощью атрибутов контейнера (см. в таблице ниже).

Поддерживаемые атрибуты

Атрибут
Описание
Возможные значения
data-bare
Признак того, что загрузка стилей отключена

Если добавить атрибут, соцсети будут отображаться в виде текстового вертикального списка.
Наличие или отсутствие атрибута.
data-counter
Признак того, что на кнопке соцсети отображается счетчик публикаций.
Внимание! На кнопке Твиттера счетчик публикаций отображаться не будет — Твиттер больше не поддерживает API с количеством публикаций.

Наличие или отсутствие атрибута.
data-copy
Позиция кнопки Скопировать ссылку. Кнопка Скопировать ссылку может отображаться, если используется параметрlimit.

first — кнопка внизу списка;

last — кнопка вверху списка;

hidden — кнопка не отображается.
Значение по умолчанию: last.

data-description
Текст, которым нужно поделиться.
Строка.Некоторые соцсети могут обрабатывать большие строки некорректно

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

data-image

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

data-lang

Язык блока. Локализуются подписи кнопок соцсетей и кнопка Скопировать ссылку.

az — азербайджанский;

be — белорусский;

en — английский;

hy — армянский;

ka — грузинский;

kk — казахский;

ro — румынский;

ru — русский;

tr — турецкий;

tt — татарский;

uk — украинский.
Значение по умолчанию: ru.

data-limit
Количество соцсетей, отображаемых в виде кнопок. Используется если нужно встроить в блок много соцсетей, а также чтобы блок занимал мало места на странице. Не вошедшие в лимит соцсети будут доступны по нажатию кнопки
.
Натуральное число или отсутствие атрибута.
data-services
Список идентификаторов социальных сетей, отображаемых в блоке.
Несколько соцсетей указываются через запятую без пробела. Значение по умолчанию:

data-size
Размер кнопок соцсетей.

m — большой ;

s — маленький .
Значение по умолчанию: m.

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

data-url
Ссылка, которой нужно поделиться.
Любой URL.По умолчанию указывается URL страницы, на которой размещен блок.Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.

Sharing is caring

Отдельно упомяну о Блоги Мам. Замечательный проект, которому хочется пожелать процветания и развития! И мы можем ему помочь – делая ретвит, кликая “Мне нравится”, размещая баннер у себя на сайте или публикуя ссылку на статью где-то в мамских сообществах или форумах, на которых мы общаемся.

Поддерживая проект “Блоги Мам”, мы поддерживаем самих себя! Ведь именно тут мы рекламируем свои блоги и обмениваемся ссылками, информацией. На каком форуме или в каком сообществе мы еще можем «безнаказанно» публиковать ссылки на свои блоги хоть каждый день?

Давайте сделаем небольшой подарок авторам такого дружелюбного сообщества. Все, кому нравится проект и кто хочет поддержать его, кликните внизу статьи “Мне нравится” или сделайте ретвит (а лучше и то, и другое :)). И не забывайте пользоваться этими кнопками в дальнейшем! Это самое лучшее, что мы можем сделать для любимого проекта!

Share42

По количеству доступных социалок Share42, конечно уступает рассмотренному выше AddThis, но он подкупает красотой.

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

1. Выбираете социальные сервисы, размер иконок и порядок их следования (просто перетаскивая иконки мышью).

2. Далее идут параметры социальных иконок:

Тип панели с иконками — горизонтальный блок легче разместить, но плавающий вертикальный смотрится гораздо красивее и всегда находится на экране, поэтому читатель его обязательно заметит.
Кодировка вашего сайта — если не знаете кодировку, оставьте как есть: UTF-8.
Язык подсказок у иконок — русский сайт, следовательно и подсказки должны быть на русском.
Добавить иконку сайта Share42.com — добавить к выбранным социальным кнопкам иконку, ведущую на страницу автора скрипта — Share42.com.
Ссылка на RSS вашего сайта — данная опция будет активна, если вы выберете иконку RSS ленты. Напомню, RSS ленту новостей своего сайта обязательно следует добавить в сервис FeedBurner от Google.
К вашему сайту подключен jQuery? jQuery — это библиотека языка JavaScript предназначенная для создания всевозможных визуальных эффектов. Если не уверены, подключена она или нет — галочку не ставьте.

3. Когда настройки пройдены, остается посмотреть на получившиеся социальные кнопки и скачать скрипт, если вас все в них устраивает.

4. Установка скрипта на сайт.

Распакуйте полученный архив и загрузите полученную папку share42 на сервер в корневой каталог. Для работы с ftp могу посоветовать использовать бесплатную программу — FileZilla.

Если вы все правильно сделали и папка со скриптом действительно загружена в корневой каталог, то ее адрес будет http://vash_site.ru/share42/. Укажите его в пункте 3 раздела «Установка скрипта на сайт».

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

Теперь необходимо код из шага №5 вставить к себе на сайт. Для горизонтального блока социальных кнопок все просто — куда вставите, там он и отобразиться. С плавающим вертикальным несколько сложнее.

В последней строчке кода следует указать расстояние в пикселях от начала страницы (в примере 150) и от верха видимой области (в примере 20) до плавающей панели.

<script type="text/javascript">share42('http://site.ru/share42/',150,20)</script>

Далее его следует вставить «прямо перед или сразу после основного текста страницы». Для того же WordPress это сделать не составит труда: открываем поочередно шаблоны single.php, page.php и index.php и вставляем код сразу после строчки, отвечающей за вывод контента страницы. В моей теме WordPress она имеет вид:

?php the_content('Читать полностью'); ?>

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

Последнее, что следует сделать, это скопировать стили из шага №6 в файл стилей вашего сайта — с расширением .css. Чаше всего этот файл носит название style.css.

А теперь гвоздь программы — социальные кнопки с счетчиками, которые я использую в настоящий момент на своем блоге! Смотрятся просто шикарно! Доступны два размера — маленький и крупный. Между прочим, на икони с счетчиками люди нажимают гораздо охотнее. Это я даже по себе заметил.

О том, как их установить на свой блог, читайте в разделе «Важная информация» :

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

Первый код отвечает за функционал кнопок, его вставляем перед закрывающим тегом head, который в темах для WordPress располагается в шаблоне header.php.

<script src="//yandex.st/share/cnt.share.js"></script>

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

<div class="yashare-auto-init" data-yashareLink="" data-yashareTitle="" data-yashareDescription="" data-yashareImage="" data-yashareQuickServices= data-yashareTheme="counter" data-yashareType="small"></div>

Обратите внимание на атрибут data-yashareType=»small». Здесь задается размер иконок: small — маленький, big — большой

Все гениальное просто.

Добавление соц. панели с помощью Share42

Настройка панели выполняется всего за несколько шагов:

1.Для установки панели нам необходимо перейти на сайт Share42.
2.Выбираем нужные нам социальные сети, а так же указываем размер иконок:
3.Далее, настраиваем свою панель:
1. 1)Выбираем тип нашей панели (вертикальная или горизонтальная).
2. 2)Выбираем кодировку UTF-8.
3. 3)Соглашаемся или нет на размещение иконки Share42
4. 4)В случае если у вас сайт сделан на WordPress, ставим галочку в пункте «К вашему сайту подключен JQuery»

Так же, можно посмотреть, что у нас получается нажав на «Посмотрите, как это будет выглядеть».

4.Нажимаем кнопку «Скачать готовый скрипт», после чего, следуя инструкциям, устанавливаем скрипт себе на страницу:

1)Разархивируем архив.
2)При помощи FTP-клиента загружаем папку Share42 в корневой каталог вашего сайта на хостинге.
3)Указываем путь к папке.
4)Ставим галочку напротив CMS на базе которой сделан сайт. В нашем случае WordPress.
5)Вставляем в шаблон страницы сгенерированный код.

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

Кнопки uLike

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

Как и другие кнопки, uLike имеет ряд настроек, которые позволяют вписать их в дизайн любого сайта. Так, можно выбрать форму, цвет и иконку для кнопки:

Кнопка uLike не была бы среди инструментов uSocial, если бы не было возможности связать ее с публикацией в социальную сеть. Так, после нажатия на кнопку, пользователь может поделиться материалом с помощью всплывающего уведомления:

Стоимость uSocial

Весь функционал uSocial доступен бесплатно и это не может не радовать, за исключением кнопки uLike. Данная кнопка доступна только в тарифе Premium. В целом же платные тарифы расширяют и без того широкие возможности инструментов:

Подробнее о тарифах можно почитать по ссылке.

Несмотря на то, что это рекламный обзор, я рекомендую сервис uSocial для использования, т.к. на сегодняшний день uSocial.pro обладает самым широким бесплатным функционалом и удобен в использовании и для новичков, которые вообще не разбираются в сайтостроении, и для профессионалов.

Удачи в развитии ваших ресурсов!