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

В последнее время стало модно устанавливать кнопки социальных сетей на сайты и блоги, и в этом нет ничего удивительного. Во-первых, кнопки позволяют увеличивать «лайки» и «сердечки», что положительно сказывается на продвижении статей в социалках. Во-вторых, существуют отдельные разновидности кнопок, позволяющих делиться ссылками на отдельные страницы сайта в социальных сетях – это привлекает дополнительных посетителей из Вконтакте, Фейсбука, Одноклассников, Твиттера и т.д. В-третьих, статьи, набравшие большое количество «лайков» и «сердечек», пользуются большим доверием у читателей сайта.

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

  • Вконтакте
  • Фейсбук
  • Одноклассники
  • Гугл «+1»
  • Твиттер
  • Мой Мир
  • Я.ру

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

 1. Стандартные кнопки социальных сетей

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

1.1. Вконтакте

Социальная сеть «Вконтакте» предлагает несколько вариантов различных кнопок, хотя их принцип работы практически не отличается (различия лишь визуальные). Мы рассмотрим два вида кнопок.

1.1.1 Кнопка «сохранить»

Кнопка достаточно гибкая, надпись на ней можно менять на любую желаемую (по умолчанию «сохранить»).
Кнопка "сохранить" Вконтакте

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

Настройка кнопки "сохранить" Вконтакте

Здесь можно выбирать один из 5 стилей: кнопка, кнопка без счетчика, ссылка, ссылка без иконки, иконка.

Поле «текст» позволяет изменять стандартную надпись «сохранить» на свою.

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

Код для вставки состоит из двух частей: первая должна располагаться в любом месте между тегами <head> и </head>, вторая – в том месте, где должна отображаться кнопка. Об установке кнопки на сайт читайте в пункте [3. Как устанавливать кнопки на сайт].

1.1.2 Кнопка «мне нравится»

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

Кнопка "мне нравится" ВконтактеДля настройки кнопки перейдите по этой ссылке. Здесь также необходимо заполнить ряд параметров.

Настройка кнопки "мне нравится" ВконтактеНазвание сайта – здесь лучше указать краткое и настоящее название вашего сайта.

Адрес сайта – укажите адрес главной страницы вашего сайта.

Основной домен сайта – укажите главное зеркало сайта (его можно найти в файле robots.txt в качестве параметра оператора «Host»), если затрудняетесь это сделать – то оставьте предлагаемое ВКОНТАКТЕ.

Варианты кнопки – это различные стили кнопки, они влияют на ее внешний вид.

Высота кнопки – геометрические размеры «Мне нравится».

Название кнопки – доступно два варианта (мне нравится, это интересно).

Код для вставки – тот код, который нужен для отображения кнопки социальной сети Вконтакте.

1.2 Фейсбук

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

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

Настройка кнопки "нравится" ФейсбукURL to Like – url-адрес страницы для кнопки (если поле не заполнено, то будет браться адрес страницы, на которой расположена кнопка).

Send Button – наличие галочки включает новую возможность – отправлять ссылку в Фейсбук (отобразится дополнительная кнопка – «отправить»). При включении будет одновременно отображаться две кнопки.

Layout Style – стиль кнопки, влияет на ее внешний вид (стандартным считается button_count).

Width – ширина кнопки в пикселях.

Show Faces – при включении будут показываться аватары людей, уже нажавших на данную кнопку.

Font – тип шрифта кнопки.

Color Scheme – фон пространства рядом с кнопкой (белый и черный).

Verb to display – название кнопки (нравится, я рекомендую).

Get Code – кнопка, формирующая код скрипта.

1.3 Одноклассники и Мой мир

Данные социальные сеть приобрели широкую популярность в русскоязычном интернете, там обитает огромное число людей, поэтому не стоит пренебрегать установкой кнопки «Класс» от сервиса «Одноклассники» и «Нравится» от сайта «Мой мир».
Кнопки "класс" и "нравится"

Для настройки кнопок нужно перейти на эту страницу. Можно добавлять кнопки по отдельности, настраивая каждую по-своему, а можно редактировать обе кнопки одновременно.
Настройка кнопок "класс" и "нравится"

Размер по высоте – геометрический размер кнопок.

Вид – внешний вид рамки кнопок.

Кнопки – выбор кнопок (нравится, класс)

Счетчик – включение и выключения счетчика нажатий на кнопки (справа, сверху – расположение счетчика).

Текст на кнопках – выбор одного из трех названий, доступных для кнопок.

Код для вставки – код скрипта, который нужно будет устанавливать на сайт.

1.4 Гугл «+ 1»

Новая социальная сеть, которая за короткое время набрала огромную аудиторию. Трудно представить себе сайт без кнопки «+1», т.к. она не только позволяет добавлять ссылки в социальную сеть и увеличивать количество «плюсиков», но и может влиять на результаты сайта в ТОПе поисковой системы Google.

Кнопка гугл "+1"Все подробности об этом, а также установка и настройка кнопки находятся здесь.

1.5 Твиттер

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

Кнопка "твитнуть"Сначала нужно выбрать нужную кнопку (нас интересует первый вариант – кнопка «отправить ссылку»).

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

Настройка кнопки "твитнуть"Отправить ссылку – выбор страницы, на которой расположена кнопка, или любой другой.

Текст – выбор текста, который будет появляться рядом с кнопкой (НЕ НА САМОЙ КНОПКЕ).

Показывать счетчик – включить или выключить отсчет количества нажатий на кнопку.

С помощью – выбор способа добавления сообщения ссылки в Твиттер (практически ни на что не влияет).

Рекомендовать – пользователю, нажавшему на кнопку, будет рекомендовано подписаться на твиттер-аккаунт, указанный в данном поле.

Отметить – выбор метки, которая будет публиковаться в Твиттере  (практически ни на что не влияет).

Большая кнопка – увеличение геометрического размера кнопки.

Отказаться от адаптации Твиттера – отказ от стилей Твиттера (лучше оставить поле без галочки).

Язык – выбор языка кнопки.

Справа будет сформирован код, который нужно добавить на сайт.

1.6 Я.ру

Социальная сеть Я.ру не такая популярная, как Вконтакте или Одноклассники, но и ее кнопка не помешает. Настройка проводится здесь.

Кнопка "поделиться" Я.руДля этого нужно заполнить несколько полей, которые сформируют нужный код скрипта.

Настройка кнопки "поделиться" Я.руРазмер – маленький или большой размер кнопки.

Стиль – выбор между кнопкой или иконкой.

Наличие счетчика – включение или выключение счетчика нажатий на кнопку.

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

Текст кнопки – выбор произвольного текста кнопки (по умолчанию – «поделиться»).

Ссылка для публикации – выбор ссылки (произвольная или Url текущей страницы).

Заголовок – выбор заголовка для страницы (произвольный или заголовок текущей страницы).

Код для вставки – нужный код, который добавляется на сайт.

2. Готовые кнопки для сайта

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

 2.1 Блок «поделиться» от Яндекс

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

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

Настройка блока "поделиться" ЯндексНабор сервисов – выбор кнопок социальных сетей для сайта (те, что с галочкой – будут отображаться на сайте).

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

Код – нужный скрипт, который необходимо добавить на сайт.

2.2 Кнопки «PLUSO»

В последнее время широкую популярность приобрел конструктор кнопок социальных сетей – PLUSO. Перейти на сайт можно по этой ссылке.

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

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

Настройка кнопок PLUSOЗатем необходимо настроить ряд параметров, выбрав

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

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

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

2.3 Кнопки Share42

Еще один сервис, позволяющий сконструировать кнопки для своего сайта – Share42.com/ru.

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

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

Тип панели с иконками – отображение блока кнопок (очень интересен вариант «вертикальная плавающая»).

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

Кодировка сайта – выбор кодировки вашего сайта.

Добавить иконку сайта Share42.com – возможно, следует убрать галочку.

Показывать счетчики – включение счетчика нажатий по кнопкам (только при работающем jQuery).

Установка данного скрипта довольно сложная, но она пошагово описывается на самом сайте Share42.

3. Как устанавливать кнопки на сайт

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

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

Первую часть кода нужно добавить между тегами <head> и </head>. Для этого зайдите в админ-панель WordPress и перейдите к редактору шаблона.

Переход к редактору WordPressВ редакторе шаблона нужно найти файл «Заголовок» (header.php), если такого нет, тогда – «Основной шаблон» (index.php). Теперь необходимо найти тег <head> или </head>. Если в указанных файлах таких тегов нет (все темы разные, такое вполне может быть), тогда вам придется открывать для редактирования все файлы и искать в каждом из них тег <head>. Для поиска можно использовать сочетание клавиш «Ctrl+F».

Как только вы найдете нужные теги, можете размещать первую часть кода сразу перед закрывающимся тегом </head>, чтобы случайно не задеть коды других скриптов.

Поиск тега </head>

 

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

Чаще всего кнопки добавляются перед статьей или в ее конце. Проще, конечно, второй вариант. Его мы и рассмотрим.

Вам нужно найти то место, где заканчивается статья (основная текстовая часть страницы). Для этого нужно редактировать файл «Одна запись» (single.php).

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

Аналогично можно размещать код вначале статьи, нужно только найти место между заголовком и текстом статьи.

 

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

Ваш комментарий

  1. Очень доступно написано. Это многим поможет!

  2. Привет. Не скажешь как статью так быстро в гугл вывел?

    • Привет. Даже не знаю, ничего особого не делал, ссылки еще не покупал. Думаю, тут действуют другие факторы: траст сайта, объем статьи, внутренняя оптимизация статьи и поведенческие факторы.

  3. Итакс начнем ставить :)))) Автор респект!!!

    • С гугла не по этим запросам получаешь трафик?

      увеличение посещаемости сайта
      какой сайт создать
      какой сайт лучше создать
      textsale
      слепая печать

      Если они то дальше продолжать не буду)

  4. чёт неполучилось у меня на друпал нормально поставить Кнопки «PLUSO», и Кнопки Share42… Мож то я чёт непойму.. Ну да ладно :) поставил себе Блок «поделиться» от Яндекс :) всё чики пуки теперь :)!

  5. Спасибо в закладки отравил ваш блог ,полезную статью прочитал как кнопки ставить ,а то каждый раз перед статьей код ставлю надоело ,а тут раз и все ,спасибо :-D

  6. Отлично написано. Все понятно и доступно. Использую для своих проектов.

  7. Спасибо за подробную инструкцию, установила, только почему-то в одноклассники нет доступа по этим кнопкам, остальные нормально работают

  8. Мне кажется, для этой цели очень хорошо подходит плагин для WordPress — Social Share Buttons
    можете глянуть у меня как они выглядят, прикольнинько и стильно! 8)

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

  10. Отличная статья! Все понятно, по пунктам:) Спасибо!

  11. Тема раскрыта полностью. Остается только раскрутить свой блог. Для начинающего проблематично.

  12. Согласен полностью.
    Соц.сети играют большую роль везде.
    Приятно поделиться хорошим материалом с кем то еще.
    Я тоже писал о них у себя.
    Ставьте их обязательно! *THUMBS UP*

  13. Спасибо за полезную статью, использовал для своих проектов.

  14. Выбор кнопочек большой, что радует.

  15. Спасибо за статью! Очень подробно все описано!!!

  16. Спасибо за статью. А можно как то отслеживать количество переходов по кнопкам Твиттера и Вконтакта???

  17. Классная статья… и доходчивым языком написано…спасибо.. Хотел спросить ещё а, а как кнопку «Сохранить» сделать так чтобы справа, а не слева в колонке отображалась? что нужно к коду самой кнопки добавить? заранее спасибо =)

  18. Спасибо большое, очень пригодилось! Изначально бумал, что дело сложное, разобрался за пару часов! =)

  19. А как на группу вконтате сделать ссылку?

  20. кнопка с одноклассников работать не хочет, пишет что не досту, остальные работают, спасибо за статью

  21. Работают все кроме одноклассников Пишет что нет доступа к ресурсу, как это исправить заранее спасибо

  22. многие попробовал.
    понравилась система UPTOLIKE. поставил к себе в блог школы программистов http://pro-club.org/index.php/site/blog/107 можете потестить

  23. Купить люстру на кухню или в комнату. Для комнаты — лучшие торговые марки, Каталог:
    Торговые марки: Alfa, Bogate’s, Eurosvet, Luminex, Namat, Nowodvorski, Sigma, TK Lighting, Zaklad Stolarski, Галоген, Классика, Модерн, Настольные лампы, Оптима, Подвесные светильники, Споты, Хрусталь, Элегант.
    Популярные люстры от ведущих мировых производителей Вы можете купить в интернет-магазине ЭнергоИмпульс.
    Электроустановочные изделия Lezard: Розетки, Удлинители, Выключатели, Диммеры, Рамки.
    Люстры с доставкой по Москве и всей России

  24. Услуги Мерчендайзинга по всей России
    — Стационарный Мерчендайзинг (совмещенный, категорийный);
    — Визитный Мерчендайзинг;
    — Эксклюзивный мерчендайзинг;
    — Визуальный мерчендайзинг
    — Категорийный мерчендайзинг
    Аутстаффинг:
    Предоставление персонала для выполнения определенных операций;
    Проведение инвентаризации товара;
    Осуществление ручной фасовки и комплектации товара, копакинг.
    Опытный персонал

  25. А почему нет обзора на самые лучшие share-кнопки goodshare.js?! Как про них узнала — больше никакими не пользуюсь. Главное, что нет трекеров слежения за юзерами и сбора статистики — этого и в Яндекс Метрике и Гугл Аналитикс хватает! Короче, советую добавить в статью, ссылку оставлю http://goodshare.ru/

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

  27. А почему нет в списке goodshare.js? Станислав, посмотри про них на сайте или гитхаб репозитории инфу (http://goodshare.ru/). ИМХО, конечно, но уделывают и pluso и всякие addthis… Главное, что сразу цепляет — нет «ссылки на автора кнопок» и можно выбрать любое оформление. 8)

  28. Срочное официальное оформление загранпаспорта, Услуги по оформлению документов, загранпаспорта:
    Адрес: ст.м Планерная, ул. Свободы д. 89 к.5
    Тел.: 8(495)773-40-43, 8(985)773-40-43 ZagranOk.ru

  29. Светодиодные лампы панели армстронг, Купить ультратонкие светодиодные панели потолочные под армстронг. светодиодные панели цены каталоги прайсы, панель светодиодная lp,
    купить светодиодные панели, Lezard светодиодные панели под армстронг 60*60; светодиодные led панели. светодиодные потолочные панели led

  30. Рассмотрены все этапы, на каждом из них — нужные советы, помощь, литература и программы по созданию html. Что важно знать при выборе хостинга, чем хорош и плох бесплатный хостинг, сравнение тарифов и услуг платного хостинга.