Социальные кнопки для сайта - внедряемся в крутые социальные сети | Авторский проект Михед Александра
Life-crazy.ru | блог о SEO
и заработке в Интернет


Внедряемся в социальные сети, устанавливаем социальные кнопки для сайта

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

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

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

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

Преимущества сервиса share42

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

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

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

-  очень легко ставятся на любой сайт, в этом вы сами убедитесь;

— выдается отдельный скрип, который хранится у вас на хостинге, и каждый раз, когда загружается страница, не идут запросы к посторонним сервисам;

— нет различных исходящих ссылок;

— как уже писал, очень легко ставиться и настраивается. Всего 3 строчки кода и пару файлов.

Дефектов в работе еще не замечал как в некоторых других, то не работают кнопки отправки, то грузятся по 2-3 минуты.

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

горизонт

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

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

Установка и настройка социальных кнопок для сайта

Чтобы заполучить данные кнопки и код, идем на сервис «share42», достаточно воспользоваться данной ссылкой.

Попадаете на главную страницу. Здесь Вам необходимо:

1)    Определиться с размером кнопок, для выбора представлены три варианта (32×32, 24×24 или 16×16). Для своего блога я выбрал размер кнопок — 32×32.

размер иконок

2)    Далее необходимо выбрать социальные сети и сервисы, которые вы хотите видеть у себя на блоге, чтобы пользователи делились в них полезной информацией. Для этого достаточно выделить нужную иконку, можно изменить порядок расположения (схватите лкм и просто перетягивайте в нужное место), у меня они имеют такую последовательность:

расположение кнопок

3)    Следующий шаг, это небольшие настройки:

настройки кнопок

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

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

— задать кодировку для сайта, если вы используете движок WordPress, то выбирайте UTF-8. Если какой-то другой, то смотрите по своей кодировке сайта. Много выбирать не придется, всего два варианта :Ъ ;

— Добавить иконку сайта Share42.com – я убрал птичку;

— Добавить ссылку на ленту RSS, только в том случае, если будите использовать кнопку RSS. Я ее использую, поэтому указал адрес фида.

— к вашему сайту подключен jQuery – галочку я убрал.

4)    После всех настроек, можно взглянуть на то, что получилось, если устраивает, скачать скрипт.

5)    После того, как скрипт загружен, его нужно распаковать, так как он находится в архиве. После распаковки вы получаете папку «share42», в ней содержаться 2 файла. Картинка с социальными кнопками для сайта и сам скрипт.

— Эту всю папку «share42» необходимо загрузить на хостинг, подключайтесь к ftp и закидывайте в корневую директорию.  В итоге у меня папка с содержимым лежит по адресу:

http://life-crazy.ru/share42/

По желанию, папку можно переименовать, я не стал этого делать.

установка скрипта

— далее нужно указать путь к этой папке и проверить доступность скрипта;

— работает? Отлично! Идем дальше. Дальше необходимо выбрать тип сайта, я указал — WordPress. Под определенный сайт формируется определенный код;

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

мои социальные кнопки

Поэтому код вставлю в файл single.php.

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

вставка кода

— затем в файл style.css я добавил следующие стили для этого блока:

.soc {
margin-left: 100px;
margin-top: 35px;
}

Также добавил стили, которые предлагает автор.

стили для кнопок

В итоге, в файле стилей (Style.css) у меня получилась такая картина.

готовые стили

Вот и все, вы установили себе социальные кнопки на сайт. Если хотите, чтобы они отображались вертикально, то код нужно помещать не в single.php, а в footer.php (коды будут отличаться) и придать такие стили оформления:

#share42 {
 position: fixed;
 z-index: 1000;
 margin-left: -70px; /* смещение панели влево от края контента */
 }

Этот код не обязателен.

#share42 {
 padding: 6px 6px 0;
 background: #FFF;
 border: 1px solid #E9E9E9;
 border-radius: 4px;
 }
 #share42:hover {
 background: #F6F6F6;
 border: 1px solid #D4D4D4;
 box-shadow: 0 0 5px #DDD;
 }
 #share42 a {opacity: 0.5}
 #share42:hover a {opacity: 0.7}
 #share42 a:hover {opacity: 1}

Вот и все. Чтобы было понятнее, смотрите видео урок. Вы можете подписаться на обновления блога и получать свежие статьи к себе на e-mail.

С уважением, Михед Александр.

Метки: , ,


Комментарии
  1. Елена  |  17.06.2013 в 13:23  |  Цитировать

    Спасибо за информацию! Обязательно применю на своем сайте!

    Ответить
    • Михед Александр  |  17.06.2013 в 18:51  |  Цитировать

      Рад помочь Елена 🙂

      Ответить
  2. Николай  |  17.06.2013 в 15:40  |  Цитировать

    Я немного не по теме, Александр, у меня в Opera не отображается твой сайт, могу только через Google Ghrom заходить, обрати внимания.  Кнопки вещь полезная, но мне бы узнать как сделать блок подписки Rss с кнопками ссылающимися на твои группы в соцсетях вверху в сайдбаре. Для Smartrespondera можно и сгенерировать, а вот тут пока не знаю как это делать. 8)

    Ответить
    • Михед Александр  |  17.06.2013 в 18:52  |  Цитировать

      Спасибо за информацию Николай, исправил. Окей, намек понят, пишу пост 😉

      Ответить
      • Николай  |  20.06.2013 в 10:48  |  Цитировать

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

        Кстати, проблемка с Opera еще актуальна, с Google Ghrome захожу без проблем. Просто не все будут менять браузер для входа на твой блог, я так думаю. Я не надоедаю, просто сообщаю о проблеме.

        Удачи! 8)

        Ответить
        • Михед Александр  |  20.06.2013 в 14:43  |  Цитировать

          К сожалению это глюк самой оперы, такое происходит только на версии 12.15, на 12.00 все работает. Ничего с этим не могу сделать 🙁 Спасибо за инфу.

          Ответить
  3. Илья  |  18.06.2013 в 07:08  |  Цитировать

    А у меня на блоге установлены кнопки от pluso. Пока устраивают. 

    Ответить
    • Михед Александр  |  19.06.2013 в 17:54  |  Цитировать

      Слышал за эти кнопки, но больше нравятся эти)

      Ответить
    • Евгения Куварина  |  10.07.2013 в 18:01  |  Цитировать

      У меня были кнопки с помощью кода установлены, но поменяв шаблон, установила кнопки от pluso, они больше подходят к новой теме

      Ответить
      • Михед Александр  |  10.07.2013 в 19:24  |  Цитировать

        Хорошо смотрятся у Вас на блоге, мне понравилось. Вот только внизу поста ссылки «предыдущий и след. пост» думаю лишние, а там решать Вам)))

        Ответить
  4. Александр Дубровченко  |  21.06.2013 в 12:29  |  Цитировать

    Мне тоже больше эти кнопки нравятся. Первый раз воспользовался ими на движке Joomla, а потом и на drupal с WP.

    Ответить
    • Михед Александр  |  21.06.2013 в 15:21  |  Цитировать

      Ого, так вы многие CMS знаете) Я вот друпал еще не пробовал.

      Ответить
  5. Сергей  |  29.10.2013 в 05:09  |  Цитировать

    В предыдущей теме блога стояли кнопки от Яндекса. Сейчас тему поменял и поставил от pluso =)

    Ответить
    • Михед Александр  |  29.10.2013 в 17:59  |  Цитировать

      А мне в плюсо их дизайн не нравится, поэтому, пользуюсь этим сервисом.

      Ответить
  6. Елена  |  26.11.2015 в 12:07  |  Цитировать

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

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

up