Как установить социальные кнопки себе на сайт. Примеры размещения кода
0

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

Социальные кнопки для сайта — важный инструмент для продвижения проектов в сети интернет. Благодаря соц кнопкам вы увеличите репутацию проекта и улучшите поведенческие факторы.

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

С чего нам нужно начинать? Для начала давайте разберемся с сервисами и какие из них могут предоставить максимум функционала. Я буду рассказывать о самых известных — это share42, pluso и uptolike. На сегодняшний день практически все оптимизаторы пользуются такими сервисами соц. кнопок из-за ряда своих удобств.

Социальные кнопки для сайта. Преимущества и выгоды.

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

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

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

Share42 — один из популярных сервисов соц кнопок.

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

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

Чтобы начать установку социальных кнопок на сайт перейдите на сайт Share42 , где вы сразу попадаете в настройки. Тут все до безумия просто. На первом шаге вам предложат установить размер социальных кнопок. Это могут быть иконки 32×32, 24×24 и 16×16 пикселей. В зависимости от дизайна прикиньте подходящий размер, который вы хотите использовать на своем сайте. Далее выберете из списка социальных сервисов те, которые бы вы хотели использовать на своем блоге. Например, для своего сайта я выбрал расшаривание в Facebook, Google+, Одноклассники, Twitter и Вконтакте. Это самые популярные соц сети и именно в их стоит рассматривать в первую очередь. Также по желанию можно добавить кнопку на RSS подписку и возврат наверх страницы.

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

На четвертом шаге распакуйте папку со скриптом и поместите все содержимое к себе на сайт по FTP серверу и укажите путь до каталога. В моем случае это http://blog.dlux-smm.ru/share42/ У вас, соответственно, будет другое имя сайта. Далее укажите ту CMS, с которой вы работаете. Поскольку у меня WordPress его я и выберу.

Осталась лишь самая малость — вставить код (его вы получите в сервисе) социальных кнопок в нужные места сайта. Для этого между тегами впишите вот эту часть кода:

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

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

 

Также можно пофантазировать и написать некоторую фразу, которая бы заставила пользователей нажимать на эти кнопки. Это может быть «Поделитесь статьей в соцсетях», «Расскажите друзьям», «Буду благодарен за репост в соцсети» и др.

Pluso — Социальные кнопки для сайта. Второй вариант размещения

Pluso

 

Итак, мы установили соц. кнопки от сервиса Share24. Если вас их дизайн и функциональность устраивает, то можете на этом остановиться и использовать такие кнопки. А пока я расскажу еще об одном сервисе социальных кнопок под названием Share.Pluso. Он также очень популярен и отличается чуть большими настройками в отличии от предыдущего. В частности можно менять дизайн иконок, их размер и форму, добавлять счетчик расшариваний и многое другое.

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

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

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

Вот так должно получиться:

<head>

<script type="text/javascript">(function() {

if (window.pluso)if (typeof window.pluso.start == "function") return;

if (window.ifpluso==undefined) { window.ifpluso = 1;

var d = document, s = d.createElement('script'), g = 'getElementsByTagName';

s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;

s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso/pluso-like.js';

var h=d[g]('body')[0];

h.appendChild(s);

}})();</script>

</head>

A div с классом «pluso» поместите в то место, где бы хотели видеть социальные кнопки (Блок должен находиться между тегами <body></body>).

<body><div class="pluso" data-background="transparent"

data-options="big,round,line,horizontal,nocounter,theme=04" data-

services="vkontakte,odnoklassniki,facebook,twitter,google"></div></body>

 

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

Uptolike — Сервис социальных кнопок для сайта. Третий вариант размещения

Uptolike

Uptolike

Нам осталось рассмотреть последний сервис — Uptolike. Здесь все делается по аналогии с предыдущими сервисами. Но существенное преимущество Uptolike в том, что в нем реализована возможность добавления лайков статей, реализации опросов и еще ряд дополнительных преимуществ, которые мы рассмотрим в других статьях. Что же касается социалок, то так же выбираем социальные сети, настраиваем дополнительные параметры, расположение блока и внешний вид. После чего вы генерируете код (если вы не зарегистрированы на сайте, то введите e-mail и получите его по электронной почте) и вставляете в шаблон сайта на те страницы, где будет отображаться блок с кнопками.

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

Никита

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *