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

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

Установка кнопок социальных сетей для сайта без плагинов

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

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

  • Вконтакте — Устанавливаем кнопку «Мне нравится»
  • Twitter – установка кнопки Tweet
  • Google – установка значка Google «+1»
  • Facebook – установим значок Like
  • Mail.ru – кнопка «нравится» на сайт
  • Одноклассники – кнопка «ОК» для вашего сайта
  • Выравнивание кнопок в одной строке

В самом конце статьи:

  1. Социальные кнопки от Яндекс.Кнопки
  2. Картинки от сервиса share42.com
  3. Значки от сервиса Pluso

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

Заходим на страницу виджета «Мне нравится» на сайте и вводим необходимые данные, например, так:

Единственное, что вам нужно сделать заранее, так это зайти на сервис «вконтакте» через свой аккаунт (персональную страничку) в социальной сети (с главной страницы), потому как в противном случае сервис попросит вас авторизоваться и не даст добавить сайт. Что удобно, сайтов на одном аккаунте может быть несколько. Идем далее:

Код, что до фиолетовой черты – вставляем перед тегом </head> в коде шаблона вашего сайта (например, в wordpress это обычно файл header.php). Код, что под чертой, соответственно вносим на то место, где будет установлена кнопка или в несколько мест, например, в конце постов, в конце страниц и т.п. (в wordpress, к примеру, за это отвечают файлы single.php и page.php текущей темы блога).

Кнопка «Твитнуть» от Twitter

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

  • Отправить ссылку – использует для публикации в Твиттере либо текущую страницу, на которой будет располагаться кнопка, либо прописанный вами в окошке ниже URL
  • Текст – либо копируется название страницы, либо собственный текст на ваше усмотрение
  • Счетчик – показывает сколько человек уже поделилось данной записью у себя в Твиттере
  • С помощью – ваш логин в Твиттере
  • Рекомендовать – соответственно аналогично
  • Отметить – добавляем хэштег – это либо название вашего сайта либо какой-то ключевой поисковый запрос, по которому пользователи Твиттера могут находить ваш блог

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

Кнопка «+1» от Google

Переходим на страницу создания кнопок для Google +1 и совершаем несложные действия:

настройка кнопки гугл +1 первая часть

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

Из продвинутых настроек:

  • Cинхронный код
  • Валидный код по HTML5

настройка кнопки +1 от Гугл часть 2

При таких настройках получаем, что как и код кнопки от сервиса «Вконтакте» первую часть, та что, между фиолетовой и желтой чертами вставляет перед тегом </head>, а нижнюю – на место расположения ее на сайте.

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

Установка кнопки «Like» от Facebook

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

кнопка like от facebook - настройка и детали

Поясню немного, что к чему:

  1. «URL to like» – можно вписать единственный URL, который будет привязан к данной кнопке на всех страницах сайта, а можно оставить поле пустым. В последнем случае сервис будет транслировать в Фейсбук адрес той страницы, с которой нажал на нее пользователь.
  2. Send Button – привязка сообщения к кнопке «Like»

Остальные функции вроде размера значка, фона и текста интуитивно понятны.

Как только определились с настройками, жмем «get code» и видим исходный код в формате html5

кнопка нравится от фейсбук - продолжаем настраивать

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

Устанавливаем кнопки «Поделиться» и «ОК»

А эти значки установить еще проще, вернее, быстрее, потому как они настраиваются с одного сервиса. Переход на этот сервис здесь.

Настройки настолько просты, что не вижу смысла в каких-то дополнениях. Настраивайте по своему желанию и вставляйте код в желаемое вами место на сайте.

Выравнивание кнопок в одной строке

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

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

Обернул в теги <div> и задал им свойство float (то есть элемент стал плавающим) и свойство left (то есть выравнивание по левому краю). В итоге получилась такая картина:

код кнопки, обернутый в теги и выравненный

Другие кнопки аналогично, некоторые естественно ставил float:right – то есть позиционировал справа. Расстояние задавал через свойство width таким вот образом:

<div style=»float:left; width : 20%»>. Получилось весьма красиво.

Сервис Яндекса для вставки кнопок на сайт

Значки можно вставлять по одной, а можно сразу – через скрипты кнопок социальных сетей, разработанных различными другими сервисами. Из них наиболее часто встречается скрипт сервиса Яндекс.Кнопки – для перехода жмем по ссылке. Что интересно, социальных сетей, в которых можно поделиться интересной записью там больше и мы можем добавлять или убирать кнопки по своему усмотрению:

яндекс.кнопки - выбор нужных

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

Код вставляем в нужное нам на сайте место, например, под статью.

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

Заменой сервису Яндекс.Кнопки является более функциональный сервис share42.com. Чтобы добавить значки социальных сетей на свой сайт, перейдите на данный сервис и  выполните ряд нехитрых действий:

  1. Отметьте нужные вам значки и их размер
  2. Выберите, каким образом вы хотите разместить их на сайте: горизонтально – например, под постом, или вертикально, в виде плавающей панели сбоку от основного текста статьи.
  3. Скачайте архив со скрипт, загрузите на хостинг и распакуйте
  4. Вставьте соответствующие детали кода в код вашего сайта

Вот, в принципе и все.

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

Нашел еще один интересный сервис для добавления социальных кнопок на сайт. Что больше всего понравилось – оперативность в установке и простота в использовании. Сам сервис находится по адресу share.pluso.ru – заходите и делайте эмблемы как вы хотите.

От автора

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

Установить кнопки социальных сетей для сайта – обязательно. И не важно Интернет-магазин у вас (как эффективно продвигать интернет-магазин смотри здесь) или блог (кстати, если не знаете для чего вам блог, советую прочитать ту статью). Ну а на этом сегодня все. Буду думать, о чем написать в блог в следующий раз.

Свитов.

поделитесь с друзьями пожалуйста:

0

Это интересно:

Если Вам интересна эта запись, Вы можете следить за ее обсуждением, подписавшись на RSS 2.0 .
Один комментарий к “Как установить кнопки социальных сетей на сайт”
  • 22 Ноябрь, 2012, 7:48

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

    Правда мне порекомендовали скрипт от Яндекса «Блок «Поделиться»». И установил я его в «Одиночную запись» singl.php. Я доволен.

Оставить комментарий или два