Скрипт кнопок социальных кнопок – Добавление / Установка скрипта кнопок социальных сетей на сайте — Поделиться / Share — БЕЗ плагинов. Обзор сервисов

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

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

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

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

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

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

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

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

Первое это HTML код самих социальных кнопок которые вам потребуется добавить в нужное вам место сайта:

<div> <div>Понравилось? Поделитесь с друзьями!</div> <div data-url="<?php echo 'https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];?>" data-title="Стильные кнопки поделится в соц сетях без использования сторонних сервисов"> <a data-id="fb"><i></i> Facebook</a> <a data-id="vk"><i></i> Вконтакте</a> <a data-id="ok"><i></i> OK</a> <a data-id="tw"><i></i> Twitter</a> <a data-id="gp"><i></i> Google+</a> <a data-id="pin"><i></i> Pinterest </a> <a data-id="viber"><i></i> Viber </a> </div> </div>

<div>

<div>Понравилось? Поделитесь с друзьями!</div>

<div data-url="<?php echo 'https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];?>" data-title="Стильные кнопки поделится в соц сетях без использования сторонних сервисов">

<a data-id="fb"><i></i> Facebook</a>

<a data-id="vk"><i></i> Вконтакте</a>

         <a data-id="ok"><i></i> OK</a>

<a data-id="tw"><i></i> Twitter</a>

<a data-id="gp"><i></i> Google+</a>

<a data-id="pin"><i></i> Pinterest </a>

<a data-id="viber"><i></i> Viber </a>

</div>

</div>

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

<?php echo 'https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];?>

<?php echo 'https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];?>

Что это за строка? - это как раз ваша ссылка на страницу которой человек собирается поделится, и в зависимости от вашей смс на котором сделан сайт это значение можем менятся, к примеру вышеуказанная строка выведет ссылку на страницу на которой вы находитесь методом PHP , соответственно ваша страница должна или поддерживать PHP код или быть файлом php, если же у вас WordPress то можно ее заменить на:

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

data-title="Стильные кнопки поделится всоц сетях без испольбзования сторонних сервисов">

data-title="Стильные кнопки поделится всоц сетях без испольбзования сторонних сервисов">

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

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

Как добавить иконки Font Awesome на свой сайт вы можете ознакомится в следующей статье. В случае если вы не хотите использовать данный иконочный шрифт, вам нужно будет прописать картинки соц сетей на свое усмотрение, и внести некие изменения в код CSS.

Следующим шагом будет добавление кода CSS для кнопок поделится:

/* Стили для оформления кнопок поделиться */ #share { width:100%; margin: 0 auto; background:#fff; text-align:center; } .like { font-size: 16px; font-weight: 700; padding-top: 10px; margin-bottom: 10px; } .push { display: inline-block; min-width: 100px; margin: 5px 2px 10px 2px; font-size: 15px; text-align: center; color: #fff; cursor: pointer; padding: 5px; } .facebook {background-color:#3b5998;} .facebook:hover {background-color:#2d4373;color:#fff;text-decoration: none;} .google {background-color:#dd4b39;} .google:hover {background-color:#c23321;color:#fff;text-decoration: none;} .pinterest {background-color:#bd081c;} .pinterest:hover {background-color:#881f12;color:#fff;text-decoration: none;} .viber {background-color:#665cac;} .viber:hover {background-color:#881f12;color:#fff;text-decoration: none;} .twitter {background-color:#55acee;} .twitter:hover {background-color:#2795e9;color:#fff;text-decoration: none;} .vkontakte {background-color:#587ea3;} .vkontakte:hover {background-color:#466482;color:#fff;text-decoration: none;} .ok {background-color:#ee8208;} .ok:hover {background-color: #a05f20; color:#fff;text-decoration: none;} /* Стили для оформления кнопок поделиться */

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

/* Стили для оформления кнопок поделиться */

#share {

width:100%;

margin: 0 auto;

background:#fff;

text-align:center;

}

 

.like {

font-size: 16px;

font-weight: 700;

padding-top: 10px;

margin-bottom: 10px;

}

 

.push {

    display: inline-block;

    min-width: 100px;

    margin: 5px 2px 10px 2px;

    font-size: 15px;

    text-align: center;

    color: #fff;

    cursor: pointer;

    padding: 5px;

}

 

.facebook {background-color:#3b5998;}

.facebook:hover {background-color:#2d4373;color:#fff;text-decoration: none;}

 

.google {background-color:#dd4b39;}

.google:hover {background-color:#c23321;color:#fff;text-decoration: none;}

 

.pinterest {background-color:#bd081c;}

.pinterest:hover {background-color:#881f12;color:#fff;text-decoration: none;}

 

.viber {background-color:#665cac;}

.viber:hover {background-color:#881f12;color:#fff;text-decoration: none;}

 

.twitter {background-color:#55acee;}

.twitter:hover {background-color:#2795e9;color:#fff;text-decoration: none;}

 

.vkontakte {background-color:#587ea3;}

.vkontakte:hover {background-color:#466482;color:#fff;text-decoration: none;}

 

.ok {background-color:#ee8208;}

.ok:hover {background-color: #a05f20; color:#fff;text-decoration: none;}

/* Стили для оформления кнопок поделиться */

Думаю описывать сам код не имеет смысла, а вот добавить на свой сайт вы можете двумя способами, первый это добавить вышеуказанный код CSS в свой основной файл стилей и второй это создать отдельный файл к примеру share-style.css и добавить код в него, после подключить скрипт добавим строку между <head></head> к примеру так:

<link href="../share-sicial-a/share-style.css" rel="stylesheet">

<link href="../share-sicial-a/share-style.css" rel="stylesheet">

При этом обязательно проверяйте пути к файлу css который подключаете.

Ну и последнее это сайт файл javascript, скачать его можно под данной статьей, ну и подключить его на свой сайт , так же как и мы поступали со стилями при подключении, между <head></head> добавляем:

<script src="../share-sicial-a/share.js"></script>

<script src="../share-sicial-a/share.js"></script>

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

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

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

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


Рассмотрим самые интересные веб-сервисы предоставляющие кнопки популярных социальных сетей, сервисов закладок в "одном флаконе". Не нужно будет ставить для каждой соц. сети их персональный код кнопки, сервисы выдадут вам один код сразу для всех.

Плюсы данных сервисов очевидны:

  • Время на размещение кнопок резко уменьшается
  • Возможность выбора внешнего вида кнопок из предоставленных готовых наборов
  • И малое количество кода на странице

Много писать не будем и перейдем непосредственно к самим сервисам.

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

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

Кнопка от поисковой системы Яндекс. Добротная, но ни чем не выделяющаяся, но ориентированная на русскоязычную аудиторию.

Одна кнопка - сервис чем то внешне напоминающий кнопку "поделиться" от Яндекса, но по скромнее.

Аналогичная ситуация и с кнопкой от сайта QIP. Просто кнопка в нескольких дизайнах.

Share42 - отличные кнопки с отличным внешним видом, нет разве что счетчика кликов.

И самое вкусное. Совсем молодой сервис предлагающий около 300 вариаций дизайна. Имеет общий счетчик кликов и в скором времени ожидается статистика нажатий и оценка эффективности.

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

Знаете ещё сервисы социальных кнопок? Пишите их в комментариях.

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

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

data-bare Признак того, что загрузка стилей отключена. Если добавить атрибут, соцсети будут отображаться в виде текстового вертикального списка. Наличие или отсутствие атрибута.
data-copy Позиция кнопки Скопировать ссылку. Кнопка Скопировать ссылку может отображаться, если используется параметр limit.
  • first — кнопка вверху списка;
  • last — кнопка внизу списка;
  • hidden — кнопка не отображается.

Значение по умолчанию: last.

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

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

data-direction Направление списка кнопок.
  • horizontal — горизонтальное;
  • vertical — вертикальное.

Значение по умолчанию: horizontal.

data-hashtags Хэштеги. Актуальны и работают только для Твиттера. Строка, указывается без знака #.

Несколько хэштегов указываются через запятую, без пробела.

data-image Изображение, которым нужно поделиться. URL изображения.

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

data-lang Язык блока. Локализуются подписи кнопок соцсетей и кнопка Скопировать ссылку.
  • az — азербайджанский;
  • be — белорусский;
  • en — английский;
  • hy — армянский;
  • ka — грузинский;
  • kk — казахский;
  • ro — румынский;
  • ru — русский;
  • tr — турецкий;
  • tt — татарский;
  • uk — украинский.

Значение по умолчанию: ru.

data-limit Количество соцсетей, отображаемых в виде кнопок. Используется если нужно встроить в блок много соцсетей, а также чтобы блок занимал мало места на странице. Не вошедшие в лимит соцсети будут отображаться в pop-up по нажатию кнопки . Натуральное число или отсутствие атрибута.
data-nonce Идентификатор директивы Content Security Policy. Используется для подтверждения безопасности скрипта блока «Поделиться». Строка, сгенерированная сервером.
data-popup-direction Направление открытия pop-up.
  • bottom — вниз;
  • top — вверх.

Значение по умолчанию: bottom.

data-popup-position Расположение pop-up относительно контейнера блока. Значение outer может понадобиться в том случае, если из-за специфики верстки вашего сайта pop-up обрезается соседними элементами страницы.
  • inner — внутри контейнера;
  • outer — снаружи контейнера.

Значение по умолчанию: inner.

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

Значение по умолчанию: vkontakte,facebook,twitter.

data-size Размер кнопок соцсетей.
  • m — большой ;
  • s — маленький .

Значение по умолчанию: m.

data-title Заголовок, которым нужно поделиться.

Строка.

По умолчанию указывается заголовок страницы, на которой размещен блок.

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

data-url Ссылка, которой нужно поделиться. Любой URL.

По умолчанию указывается URL страницы, на которой размещен блок.

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

Кнопки соцсетей для сайта — обзор виджетов кнопок социальных сетей

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

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

1. Блок «Поделиться» — Технологии Яндекс
Блок «Поделиться» помогает посетителям сайта быстро публиковать ссылки на понравившиеся страницы в соцсетях и блогах. Создайте блок «Поделиться» с помощью конструктора, а дополнительные параметры ищите в документации.

2. Лёгкий способ получить ссылки на сайт – QIP.RU
Разместите кнопку на сайте и дайте посетителям возможность добавлять понравившиеся материалы сайта в закладки, блоги и соцсети. Три шага: где разметите кнопку (сайт, Blogger или WordPress), стиль кнопок (готовые варианты) и получить кнопку.

3. Кнопки для добавления контента в соцсети — Pluso
Разместите кнопки и дайте посетителям возможность делиться понравившимися страницами в соцсетях, а также печатать, отправлять письмо и добавлять закладки.

4. Сервис социальной активности — UpToLike
Кастомизированные кнопки соцсетей с возможностью задать цвет, форму, размер и спецэффекты. Дополнительные фишки – виджет расшаривания картинок PicShare, функция «Цитирование» и кастомизированная функция Following.

5. Одна кнопка! — для всех сервисов закладок и соцсетей
Выберите вид кнопку. Где будет установлена кнопка: сайт, Blogger или WordPress. Добавьте кнопку.

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

1. Красивые социальные кнопки для сайта — goodshare.js
Отображение кнопок практически на любом устройстве. Чистый код. Краткая документация. SEO friendly.

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

3. Красивые кнопки «лайков» соцсетей с использованием jQuery — Social Likes
Скрипт кнопок «лайков» со счётчиками в едином стиле для соцсетей: Facebook, Twitter, ВКонтакте, Одноклассники, Мой мир, Google+ и Pinterest.

Зарубежные аналоги кнопок социальных сетей для сайта

1. Share Buttons — AddThis
Кнопки шаринга помогут вам увеличить аудитория сайта, путем привлечения посетителей с других ресурсов и соцсетей, через распространяемый контент.

2. Get the Share Button — ShareThis
Выберите платформу: WordPress, Drupal, Joompla!, Blogger, TypePad, tumblr, Newsletter, IOS & Android, другое. Выберите стиль снопок (кнопки или тулбар), Настройте кнопки: выберите сервисы (кнопки поделиться или социальные плагины), укажите размер кнопок, другое. Получите код.

3. Share buttons for WordPress, Tumblr, Drupal, Joomla and all website — Shareaholic
Сделайте так, чтобы посетители сайта могли поделиться вашим контентом с друзьями в один клик. Выберите: тему, размещение, размер, счётчик, выравнивание и другие настройки кнопок и получите код.

4. Social Sharing — Po.st
Получить больше пользы от шаринга в соцсетях. Сервис позволит облегчить процесс шаринга в соцсетях для посетителей, что позволит увеличить органический трафик сайта.

5. Share Buttons for Any Website — AddToAny
Получите код кнопок социальных сетей для любого сайта. Выберите тип и стиль кнопок, укажите e-mail и другие опции или выберите одну из платформ: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad или FeedFlare. Получите код кнопок.

Короткая ссылка: http://goo.gl/XjatQ7

Добавление / Установка скрипта кнопок социальных сетей на сайте — Поделиться / Share — БЕЗ плагинов. Обзор сервисов

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

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

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

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

Конечно же, существуют разного рода плагины добавления социальных кнопок (Поделиться / Share) на сайте, которых я Вам убедительно НЕ советую устанавливать. Потому что излишнее кол-во установленных плагинов на сайте – отрицательно сказываются на скорость загрузки сайта, о чем я не мало писал.

Цель написания этой статьи — ознакомить Вас с некоторыми хорошими сервисами социальных кнопок и убедить в том что выбирая между плагинами – установкой кнопок каждой соц сети по отдельности – и сервисами генерирующие скрипты – БЕЗ сомнений —

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

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

Огромное преимущество этого сервиса в том что, генерируемый им скрипт, имеет малый размер (2,49 кб) что позволяет Вашему сайту быстрее загружать все элементы.

К преимуществам GoodShare, можно отнести и то что Вы можете выбирать нужный размер кнопок, скрипт не содержит скрытые коды для слежения за действиями посетителей на сайте, нет ссылки на автора скрипта, что я думаю порадует многих а также скрипт кнопок социальных сетей GoodShare соблюдает кроссбраузерность (отлично работает во всех известных браузерах как: Chrome, Opera, Mozila даже и в Internet Explorer и т.д.) и кроссплатформенность (PC, Mac, Android и т.д.), что не может не радовать.

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

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

Давайте я Вам немного расскажу о том как быстро настроить и установить на своем сайте – кнопки социальных сетей, с помощью скрипта GoodShare:

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

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

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

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

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

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

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

Даже плавающие где-то слева или справа кнопки, не дают то что Вам нужно.

Фишка: Может знаете, может нет – кнопки можно менять местами.

К примеру Вы хотите поменять местами кнопку одноклассники и вконтакте – для этого меняйте их в самом коде, копируя название одной сети и вставляя после нужной или взамен другой сети. После вставки скрипта на сайт – кнопки одноклассники и вконтакте – поменяются местами.

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

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

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

Также, в преимуществах, можно отнести и разновидность дизайна. В прочем заходите и смотрите сами.

Единственное что мне НЕ понравилось – принудительная ссылка (которую не возможно убрать) на автора скрипта, а также частые проблемы в отображении кнопки Поделиться/Share от вконтакте, о чем я выше писал. Выбор за Вами, может у Вас этой проблемы не будет.

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

Более «развернутый» и сложный сервис чем вышеописанные.

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

А теперь по порядку:

  • Соц Кнопки – выбирая этот модуль, внизу страницы делаются все необходимые настройки от выбора дизайна кнопок, их расположение на странице заканчивая размерами кнопок и настройки «Follow».

Пройдитесь по этим параметрам, используя меню в правой части сайта. Результаты отображения видны в левой части.

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

  • Опросы – возвращаемся в меню «Модуль» и выбираем «Опросы».

Ниже найдете, также в левой часть  — настройка Опросов, в правой части – результаты отображения.

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

Копируем код скрипта и вставляем на сайт. Обычно, опросы устанавливаются в виджетах. Если опрос важен для Вас и Вы хотите получить как можно больше ответов, рекомендую воспользоваться плагином Q2W3 Fixed Widget. Поверьте, результаты не заставят себя ждать.

  • Рейтинг статей – если Вы хотите предоставить Вашим посетителям возможность голосования Понравилось/Не понравилось, относительно выложенной информации в статьях, переходите в «Модуль» — > «Рейтинг статей».

Все стандартно – настройка – слева, результат – справа. Копируем код скрипта и вставляем на сайт.

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

Если возникнут заметные проблемы с загрузкой сайта – почитайте статью про плагин кэширования — W3 Total Cache. Если и это не поможет – воспользуйтесь другими сервисами предоставляющие услуги по настройке и установке кнопок социальных сетей на сайт.

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

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

Также, настройка кнопок делается по левой стороне сайта, результаты отображаются по правой.

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

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

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

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

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

Последний сервис в моем обзоре.

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

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

На странице сервиса найдете всю нужную, пошаговую информацию о том, как настроить и установить кнопки на сайт.

Как вариант, другой способ, кроме использования сервисов и их скриптов, можете зайти на страницах нужных Вам социальных сетей (Вконтакте, Твиттер, Одноклассники, Facebook и т.д.), найти что то на подобие пункта в меню — «Разработчикам» «Кнопки Поделиться/Share», указать адрес сайта и выбрать кнопку (дизайн), скопировать код и вставить его на свой ресурс. И так – для каждой сети.

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

Хотя на вкус и цвет, карандаши разные! Лучше всего пользоваться первым пунктом данного обзора и забыть.

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

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

Пока, пока!

Социальные кнопки от сервиса Pluso

(Последнее обновление: 30.03.2019)

Привет дорогие друзья! Представляю вам, ещё один русскоязычный проект Share.pluso. Социальные кнопки от сервиса Pluso. Сервис довольно молодой, а уже стал очень популярным среди вебмастеров.

PlusoPluso

Социальные кнопки от сервиса Pluso Фото: share.pluso

Pluso - это сервис для удобного и простого добавления  кнопок крупнейших социальных сетей на сайт или блог, с возможностью визуальной настройкой. Share.pluso - красивые кнопки для добавления контента в социальные сети. Сервис предлагает более 300 вариаций кнопок! Разместите эти кнопки, чтобы дать возможность вашим посетителям быстро делиться интересными страницами в своих социальных сетях. А также печатать, отправлять письмом и добавлять в закладки. Вы легко сможете сами подобрать тот вариант, который больше всего подходит вашему блогу, сайту.

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

Для того, чтобы разместить кнопки на своем блоге, необходимо сделать следующее: Зайти на сайт http://share.pluso.ru/, выбрать понравившийся стиль кнопок. Довольно трудно сделать выбор. Все стили великолепны.

plusopluso

Выбрать стиль кнопок pluso

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

knopki_plusoknopki_pluso

Предпросмотр кнопок социальных сетей

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

pluso_knopkipluso_knopki

Вертикальные социальные кнопки

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

kod_knopokkod_knopok

Копируем скрипт кнопок Pluso

Заходим в панель инструментов blogger, шаблон и ищем эту строчку - <data:post.body/> (если у Вас в шаблоне попадётся несколько этих строк, пробуйте вставлять код после 2-й или 3-й) или вот такую строчку - <div> или <div class=’post-footer-line post-footer-line-2′>  скопированный код социальных кнопок вставляем после найденной строки, чуть ниже (кнопки будут после сообщения) или перед,чуть выше (кнопки будут отображаться перед статьёй). Готово. Да, к стати, я установил кнопки pluso во все мои блоги на blogger и даже здесь. Кнопочки можно лицезреть внизу статьи. Я буду не против если вы их нажмёте, для испытания.

Ещё один момент. Как добавить надпись к кнопкам и расположить их по центру:

<div>
<h6>
<span>
Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:
</span>
</h6>
<center>

Здесь ваш скрипт социальных кнопок

</center>
</div>

Теперь объясню некоторые значения кода. Первая строчка - это красивая рамка вокруг кнопок. Следующие две - размер надписи, надпись по центру и цвет текста.

И в заключении - советы вебмастеру от сервиса Pluso.

1. Размещайте кнопки в самом начале страницы.

2. Выбирайте большой размер.

3. Яркие заметные кнопки дают в 2-6 раз больше
эффективности, чем маленькие, размещенные
в конце материала.

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

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

P. S. Как скрыть кнопку pluso-more

Для этого надо в стили своего шаблона, чуть выше строчки ]]></b:skin> добавить код:

.pluso-more {display: none !important;}

С уважением, Сергей


Поделиться в социальных сетях

Социальные кнопки для сайта. Лучщие сервисы кнопок социальных сетей.

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

«Поделиться» от Яндекс

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

  • Вконтакте;
  • Facebook;
  • Twitter;
  • Одноклассники;
  • МойМир;
  • Livejournal;
  • Friendfeed;
  • Мой круг;
  • Google+.

Переходите на страницу сервиса «Поделиться» от Яндекс.

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

Google +1

Google +1 позволяет пользователям проголосовать за страницу вашего портала и рассказать о ней своим друзьям в социальной сети Google+. Чем больше голосов она соберет, тем лучше к ней будет относится Google, поэтому старайтесь выбирать размер для нее по-больше и располагать на видном месте.

Перейдите на страницу получения кода кнопки Google +1.

Настройте размер и внешний вид кнопки, выберете русский язык. Расширенные настройки вам вряд ли пригодятся. Как видите, получит социальные кнопки от Яндекс и Google очень легко и быстро. Буквально два клика мыши, и все готово!

AddThis

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

Переходите на данную страницу и выбирайте внешний вид панели:

Код генерируется автоматически в правом окне.

Кроме этого, AddThis для самых популярных платформ предлагает отдельные расширения.

Например, выбираем WordPress — самую популярную CMS для создания блогов. Для нее AddThis предоставляет бесплатный плагин и подробную инструкцию с картинками по его установке и настройке.

Share Pluso

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

Share Pluso поддерживает более 20 основных сервисов, закладок и социальных сетей рунета. Добавьте к этому несколько служебных функций: печать, в закладки, отправить на email и так далее.

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

Share42

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

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

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 data-yashareLink="" data-yashareTitle="" data-yashareDescription="" data-yashareImage="" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter" data-yashareType="small"></div>

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


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

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

Код кнопки состоит из двух частей:

1. Скрипта, заключенного между тегами имеющими примерно следующий вид:

<script type="text/javascript">...</script>

2. Блока, отвечающего за отображение иконок — весь остальной код.

Так вот, все используемые на странице скрипты лучше размещать в одном месте — в самом низу html кода страницы, перед следующими закрывающими тегами:

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

На этом все, спасибо за внимание. Берегите себя!

Лучший способ выразить благодарность автору - поделиться с друзьями!

Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:

Следите за обновлениями в Twitter и RSS.

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

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