Соц кнопки для сайта: Лучшие сервисы социальных кнопок для сайта – ТОП-5

Содержание

Правильные социальные share-кнопки / Хабр

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

Внешний вид


Это самая очевидная проблема: социальных сетей много, у каждой свой дизайн share-блока. По отдельности они выглядят вполне прилично, но при установке всех вместе получается полная каша. Что с этим делать? Во-первых, можно просто оставить одну-две соцсети, выглядеть это будет не так ужасно. Во-вторых, можно использовать обычные иконки с share-ссылкой. К сожалению, в первом случае идут лесом пользователи «второстепенных» соцсетей, а во втором не видно пузомерок — количества лайков и твитов.

Быстродействие


В пору быстрого интернета все меньше приходится задумываться об оптимизации скорости загрузки сайта. Однако с каждым годом растет количество пользователей мобильного интернета, который пока не может похвастаться высокими скоростями. А социальные кнопки способны заметно замедлить загрузку сайта. Интересный факт: еще в 2007 году Amazon сообщил, что каждые лишние 100мс при загрузке сайта снижают продажи на 1%. А Google с 2010 года учитывает скорость загрузки при ранжировании сайтов в поисковой выдаче. И хочется ли после этого ставить нативные кнопки?

 Что же делать?


К счастью, есть много сервисов, с помощью которых можно установить к себе на сайт одну кнопку «Поделиться», объединяющую сразу все нужные социальные сети. Самым популярным в Рунете подобным инструментом является блок «Поделиться» от Яндекса. И он действительно хорош: аккуратные иконки, лаконичный код и даже наличие API для разработчиков. Но как всегда, хочется чего-то большего. Для себя я определил вот какие критерии идеального сервиса социальных кнопочек:
  • Наличие российских социальных сетей
  • Быстрая и гибкая кастомизация блока
  • Счетчик, суммирующий нажатия по иконкам всех сервисов
  • Возможность отправлять страницу в Evernote, по почте, добавлять в закладки, а также печатать.
  • Надежность

PLUSO — молодой сервис, который удовлетворяет всем вышеуказанным требованиям, вот какие кнопочки он позволяет делать, всего более 300 вариаций:

А какими сервисами социальных кнопок пользуетесь вы?

Самые «чистые» социальные кнопки для сайта — Staurus.net

Если вы боитесь, что за вами наблюдают в интернете — выключите компьютер.

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

Ни для кого не секрет, что почти все сервисы соц.кнопок сливают инфу о ваших пользователях куда понадобится. О Боже! Не может быть! Я только что про это узнал! — Поздравляю! Им же нужно как-то пользоваться вами, за их труд и за старания. Они сделали хорошие сервисы, с большим функционалом, удобством и «качеством». Вам стоит только выбрать что нужно, и поставить код куда надо. И все. А какая им выгода задаром делать такие маневрирования в интернете? Правильно. Никакой. Вот и время от времени каждая такая контора и палится на сливе данных в какую-нибудь DMP.

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

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

  • share.pluso.ru
  • uptolike.ru
  • tech.yandex.ru/share
  • share42.com
  • sharethis.com
  • pip.qip.ru
  • www.addtoany.com
  • www.po.st
  • www.addthis.com
  • sharebuttons.com

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

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

Пример установки этого кода не для тех, кто не знает азы HTML или CSS, но если у вас есть руки и немного времени, у вас все получится, если будете идти строго по инструкции. И так поехали:

Выглядят они так:

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

По стандарту настроены шесть социальных сетей: Facebook, ВКонтакте, Одноклассники, Мой Мир, Google Plus, Twitter. В настройках скрипта их больше 30, но это все устанавливается отдельно по желанию. Плюсы этих кнопок, как заявляют авторы, с чем я полностью согласен:

  1. Отличное отображение на любом устройстве (Да, они адаптивные под любой размер экрана)
  2. Чистый код — быстрый и безопасный сайт (загружается только скрипт, CSS и Шрифт, которые лежат только у вас на сервере)
  3. Все share-технологии мобильных мессанджеров в одном скрипте (Telegram`ы всякие,)
  4. SEO friendly — без ссылок
  5. Не содержит картинок

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

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

По поводу картинок: их тут нет. Иконки которые вы видите взяты из шрифта, это просто символ и не более.

Скачать архив кнопок вы можете по этой ссылке.

Установка этих кнопок очень проста. В архиве есть всего четыре файла: Шрифт, CSS, JS, и TXT.

1). Шрифт вам нужно загрузить в любую папку на вашем сервере, можете закинуть ее туда-же, где лежат ваши JS или CSS.

2). Затем загрузите JS на ваш сервер, и выведите его на вашем сайте с помощью кода в любом месте, но я рекомендую в самом низу страницы:

<script type="text/javascript" src="ПУТЬ К ФАЙЛУ/share.js"></script>
или загрузка напрямую:

<script src="https://cdn.jsdelivr.net/jquery.goodshare.js/4/goodshare.min.js"></script>

Этот скрипт состоит из двух частей, первая — это Jquery, вторая — сам код кнопок. Если у вас уже подключается Jquery на сайте, то вы можете удалить первую часть кода и сократить тем самым размер файла.

ВАЖНО: (для тех, кто убрал часть код Jquery) скрипт кнопок должен загружаться после скрипта Jquery.

3). После установки JS и шрифта, вам следует добавить CSS себе на сайт. Просто скопируйте все содержимое файла soc.css в один из ваших подключаемых CSS на сайте.

ВАЖНО: В 82 строке файла soc.css поменяйте URL на свое местоположение Шрифта!

4). После всего этого, скопируйте HTML код из файла HTML.TXT к себе на сайт, где вы хотите видеть эти замечательные кнопки.

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

А саму работу скрипта вы можете проверить чуть-ниже этих строк, ведь именно он установлен у меня на блоге.

Спасибо за внимание, если будут вопросы по установке, пиши комментарии.

С вами был, ленивый Staurus.

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

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

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

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

Способ 1. Установка с помощью  сервиса share.pluso.ru.

С помощь этого сервиса можно установить любые кнопки социальных сетей очень быстро, а главное, кнопочки выглядят красивыми :smile:. Для установки, сначала перейдите на share.pluso.ru. Потом вам нужно выбрать кнопки, которые вы хотите видеть на своем ресурсе. Для этого просто левой кнопкой мыши перетащите их с раздела «Доступны к выбору» в раздел «Выбранные сети». После этого, выберите понравившейся вам стиль кнопок ;-).

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

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

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

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

Способ 2. Установка с помощью  сервиса uptolike.

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

Что значит, что это наиболее универсальны способ? Просто чтобы установить кнопки uptolike, вы можете использовать просто код кнопок, или выбрать плагин. Вы можете выбрать:

  • WordPress плагин
  • Joomla плагин
  • Drupal модуль
  • Bitrix модуль
  • Ну и конечно, просто установив код на сайте.

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

Ну а далее вы можете настроить все это прямо из панели управления сайтом.

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

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

Возможности uptolike

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

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

Способ 3. Устанавливаем социальные кнопки для сайта с помощью сервиса api.yandex.ru/share.

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

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

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

После настройки просто скопируйте код и вставьте его в то место, где вы хотите видеть кнопки социальных сетей на сайте. Для wordpress, это файл single.php или index.php.

Способ 4. Устанавливаем кнопки социальных сетей для сайта с помощью плагина Social Share Buttons.

Когда я только начинал вести первый блог, то у меня стоял этот плагин и он мне понравился. Установил его за одну минуту, настроил и вот тебе красивые кнопочки, не нужно копаться в различных кодах и изучать правила сss :smile:. Но каждый плагин имеет существенный недостаток – это дополнительная нагрузка на сервер. Если ваш сайт медленно грузиться, то после установки плагина, он будет загружаться еще дольше.

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

Социальные кнопкиСоциальные кнопки

Не знаю как вам, но мне такой вариант не очень понравился :smile:. Для начала, я бы советовал нижнюю часть кнопок вообще убрать, чтобы они не повторялись. Для этого зайдите в «Панель управления» — «Share Buttons» – «Like настройки» и в самом верху справа есть надпись «Включение/Отключение социальных кнопок», ниже этой надписи уберите три галочки и нажмите на кнопку в самом низу «Сохранить изменения».

Потом зайдите в «Share настройки» и оставьте только основные кнопки, которые вам необходимы. Для этого, ниже надписи «Включение/Отключение социальных кнопок» уберите галочки с кнопок, которые вам не нужны. Я, например, оставил только такие кнопки соц сетей для сайта:

плагин Social Share Buttonsплагин Social Share Buttons

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

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

кнопки соц сетей кнопки соц сетей

Мне кажется, очень неплохо, и самое главное аккуратно :smile:.

Способ 5. Устанавливаем кнопки соц сетей для сайта с помощью кода.

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

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

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

Кнопка «Мне нравится» от Вконтакте и Facebook;
Кнопка twitter.
После выполненной работы, вы получите примерно такой код всех кнопочек вместе:

код социальных кнопоккод социальных кнопок

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

.knop {
margin: 20px 0 50px 0; }
.twitter {
float:right; }
.vk {
float:left; margin-left: 10px; }
.google {
float:left; margin-left: 1px; }
.fb-like {
margin-left: 40px; }

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

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

На этом у меня все. А какие вы установили кнопки социальных сетей для сайта.

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

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

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

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

  • Вконтакте;
  • 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.

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

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 — вверх;
  • auto — по умолчанию вниз; если не вмещается вниз, то вверх; если не вмещается ни вниз, ни вверх, то вниз.

Значение по умолчанию: 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 страницы, на которой размещен блок.

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

Генератор кнопок соцсетей

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

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

  Данный генератор кнопок соцсетей очень прост в использовании. Минимум настроек и вы получаете готовые HTML и CSS.

Установите флажки для соцсетей которые нужно для вас добавить:

Вывод SVG-иконок

 

Код HTML:

  Скопируйте и вставьте данный html-код в нужном месте. Всё что вам остаётся сделать, это заменить значения в атрибуте href="#". Просто замените символ # на ссылку на вашу соцсеть.

 

Код CSS

минифицировать код CSS

 

Записи по теме

3D кнопки для сайта кнопки Анимированные кнопки для сайта с 3D эффектом нажатия, работающие на чистом CSS. Готовое решение: html и css код для добавления на сайт кнопок с 3D эффектом. Кнопки бутстрап кнопки Кнопки в css-фреймворке Bootstrap. Цвета и размеры кнопок с примерами и готовыми HTML-кодами.

 

 

Примеры использования Кнопок Соцсетей на сайте (в 2020)

  • Виджеты
  • Блог
  • Tutorials
  • Войти
  • Зарегистрироваться
Социальные Кнопки Создать виджет
  • Обзор
  • Возможности
  • Примеры
  • Цены
  • Виджеты Social
    • Facebook Виджет
    • Facebook Кнопка
    • Instagram Feed
    • Instagram Profile
    • Pinterest Виджет
    • Twitter Виджет
    • Иконки Соцсетей
    • Социальные Кнопки
    Video
    • Vimeo Виджет
    • YouTube Виджет
    Audio
    • Аудио Плеер
    • Подкаст Плеер
    • Радио Плеер
    • Фоновая Музыка
    Reviews
    • Airbnb Отзывы
    • AliExpress Отзывы
    • Amazon Отзывы New
    • Apple App Store Отзывы
    • BBB Отзывы
    • Booking Отзывы
    • DealerRater Отзывы
    • Edmunds Отзывы
    • Etsy Отзывы
    • Facebook Отзывы Trending
    • G2 Crowd Отзывы
    • Google Play Отзывы
    • Google Отзывы
    • Hotels Отзывы
    • Houzz Отзывы
    • Instagram Отзывы
    • OpenTable Отзывы
    • TripAdvisor Отзывы
    • Trustpilot Отзывы
    • Yelp Отзывы
    • Виджет Отзывов
    • Слайдер Отзывов
    Chats
    • Facebook Чат
    • Telegram Чат New
    • Viber Чат
    • WhatsApp Чат
    • Онлайн Чат
    Forms
    • Конструктор Форм
    • Форма Обратной Связи
    E-commerce
    • PayPal Кнопка
    • Кнопка Звонка
    • Попап Конструктор
    • Таблица Цен и Тарифов

Лучшие кнопки публикации в социальных сетях для веб-сайта (бесплатно)

  • Виджеты
  • Блог
  • Учебники
  • Авторизоваться
  • Зарегистрироваться
Кнопки социальных сетей Создать виджет
  • Обзор
  • Возможности
  • Примеры
  • Цена
  • Виджеты Социальное
    • Лента Facebook
    • Лента Instagram Бестселлер
    • Виджет Instagram
    • Лента Pinterest
    • Иконки социальных сетей
    • Кнопки социальных сетей
    • Лента Твиттера
    видео
    • Галерея Vimeo
    • Галерея YouTube Бестселлер
    Аудио
    • Аудиоплеер Новый
    • Фоновая музыка Новый
    • Подкаст плеер Новый
    • Радио плеер
    Отзывы
    • Обзоры Airbnb
    • Обзоры AliExpress
    • Все-в-одном Обзоры НОВАЯ
    • Обзоры Amazon
    • Обзоры в Apple App Store
    • BBB Отзывы
    • Отзывы о бронировании
    • Отзывы DealerRater
    • Эдмундс отзывы
    • Обзоры Etsy
    • Facebook обзоры В тренде
    • G2 Crowd Отзывы
    • Обзоры Google Play
    • Google обзоры
    • Отзывы об отелях
    • Обзоры Houzz
    • Отзывы в Instagram
    • Обзоры OpenTable
    • Отзывы от TripAdvisor
    • Отзывы от Trustpilot
    • Слайдер отзывов
    • Yelp Отзывы
    • eBay обзоры
    Чаты
    • Все-в-одном чат
    • Facebook чат
    • Telegram чат
    • Viber чат
    • WhatsApp чат В тренде
    Формы
    • Форма обратной связи
    • Конструктор форм
    Электронная коммерция
    • Нажмите, чтобы позвонить
    • Таймер обратного отсчета В тренде
    • Кнопка PayPal
    • Неожиданно возникнуть
    • Таблица цен В тренде
    инструменты
    • Подтверждение возраста
    • Вернуться к началу
    • До и после слайдера
.

TOP 8 примеров кнопок социальных сетей для веб-сайтов (витрина)

  • Виджеты
  • Блог
  • Руководства
  • Вход в систему
  • Регистрация
Кнопки социальных сетей Создать виджет
  • Обзор
  • Возможности
  • Примеры
  • Примеры
  • Виджеты Социальные сети
    • Facebook Feed
    • Instagram Feed Бестселлер
    • Instagram Widget
    • Pinterest Feed
    • Иконки социальных сетей
    • Кнопки социальных сетей
    • Twitter Feed
    Видео
    • Vimeo Gallery34
    • Аудио
      • Аудиоплеер Новый
      • Фоновая музыка Новинка
      • Плеер подкастов Новый
      • Радиоплеер
      Обзоры
      • Обзоры Airbnb
      • Обзоры AliExpress
      • Обзоры универсальных НОВИНКА
      • Обзоры Amazon
      • Обзоры в Apple App Store
      • Обзоры BBB
      • Отзывы о бронировании
      • Отзывы DealerRater
      • Отзывы Edmunds
      • Отзывы Etsy
      • Отзывы Facebook Trending
      • G2 Crowd Отзывы
      • 9000 отзывов Google Play
      • 9000 отзывов Google Play Отели Отзывы
      • Отзывы Houzz
      • Отзывы в Instagram
      • Отзывы об OpenTable
      • Отзывы от TripAdvisor
      • Отзывы от Trustpilot
      • Отзывы Slider
      • Yelp Reviews
      • Обзоры на eBay
          9000-One Chats 9000-One Chats Chat
        • Telegram Chat
        • Viber Chat
        • WhatsApp Chat Trending
        Forms
        • Contact Form
        • Form Builder
        E-commerce
        • Click to Call
        • 9000 3 Таймер обратного отсчета Тенденции
        • Кнопка PayPal
        • Всплывающее окно
        • Тенденции в таблице цен
        Инструменты
        • Проверка возраста
        • Вернуться к началу
        • Ползунок «До и после» Новый
        • Согласие с cookie
        • Календарь
        • Календарь
        • NEW FAQ
        • Файл Embed
      .

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

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

      Бесплатное использование • Простота установки • Быстрая настройка

      Бесплатные инструменты, которым доверяют миллионы мировых создателей контента

      Всегда бесплатен для использования и готов помочь вам сразу же расширить аудиторию

      Вы сами решаете, что нужно вашей аудитории, ваши инструменты позволяют это осуществить

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

      Выберите из 9 разные языки, чтобы наши инструменты подходили именно для

      Полная интеграция с платформой вашего любимого веб-сайта

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

      Добавьте на свой сайт за 3 простых шага

      Выберите тип кнопок

      Настройте дизайн

      Добавьте код на свой сайт

      Популярные кнопки публикации в социальных сетях

      Выберите для установки общий доступ кнопки из 40 самых популярных социальных каналов

      Часто задаваемые вопросы

      Как установить кнопки общего доступа на мой сайт WIX?

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

      Затем выберите желаемые кнопки общего доступа. Вы можете настроить свой дизайн, выбрав выравнивание, размер кнопки, призыв к действию и количество репостов. Когда ваша кнопка будет готова к дизайну, нажмите «Зарегистрироваться и получить код», чтобы получить код кнопки. После того, как вы создадите кнопки общего доступа, вы можете нажать кнопку «Зарегистрироваться и получить код», чтобы получить код кнопки общего доступа. Скопируйте код из раздела «Установить sharethis.js на вашем сайте ». Затем войдите в свою учетную запись Wix и введите HTML-код в текстовое поле.

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

      Как установить кнопки общего доступа на мой сайт Weebly?

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

      Затем выберите желаемые кнопки общего доступа. После того, как вы создадите кнопки общего доступа, вы можете нажать кнопку «Зарегистрироваться и получить код», чтобы получить код кнопки общего доступа.Когда ваша кнопка будет готова к дизайну, нажмите «Зарегистрироваться и получить код», чтобы получить код кнопки. После того, как вы создадите кнопки общего доступа, вы можете нажать кнопку «Зарегистрироваться и получить код», чтобы получить код кнопки общего доступа. Скопируйте код из раздела «Установите sharethis.js на свой веб-сайт». Затем войдите в свою учетную запись Weebly и введите HTML-код в текстовое поле.

      Средний рейтинг пользователей (7):


      Добавить отзыв / рейтинг

      पटीर

      जगदीश

      2018-11-09

      Awesome Tool

      Это помогло мне делать вещи очень быстро

      2018-11-15

      Отличный виджет!

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

      2019-07-01

      Great Tool

      Лучшее обслуживание, отличный инструмент, это облегчило мою работу.

      2019-09-03

      Партнер по маркетингу

      Для меня Sharethis — один из моих новых любимых онлайн-инструментов. Создавать кнопки публикации для ваших блогов, целевых страниц и веб-сайтов еще никогда не было так просто! Я 100% рекомендую всем, кто хочет, чтобы их соединение было совместным онлайн. И что еще лучше, это совершенно бесплатно прямо сейчас. 😍

      2019-11-29

      Awesome tool

      https: // sharethis.com / platform / share-buttons /

      2020-07-17

      Полезное приложение

      Действительно, я имел ввиду

      2020-07-27

      .

      кнопок социальных сетей — добавление кнопок социальных сетей на сайты Google (2020)

      • Виджеты
      • Блог
      • Учебники
      • Вход в систему
      • Регистрация
      Кнопки социальных сетей
      • Описание
      • Функции
      • Как установить
      • Демо
      • Цены
      • Виджеты Социальные сети
        • Лента Facebook
        • Лента Instagram Бестселлер
        • Виджет Instagram
        • Лента Pinterest
        • Иконки социальных сетей
        • Кнопки социальных сетей
        • Лента Twitter
          • Видео
            • Видео Галерея
                4 Галерея YouTube Бестселлер
              Аудио
              • Аудиоплеер Новый
              • Фоновая музыка Новый
              • Плеер подкастов Новый
              • Радиоплеер
              Обзоры
              • Обзоры Airbnb
              • Обзоры AliExpress
              • Все-в-одном R eviews NEW
              • Обзоры Amazon
              • Обзоры Apple App Store
              • Обзоры BBB
              • Отзывы Booking
              • Отзывы DealerRater
              • Отзывы Edmunds
              • Отзывы Etsy
              • Отзывы Facebook Trending
              • Отзывы Google Crowd
              • Google Play
              • Отзывы
              • Отзывы
              • Отели Отзывы
              • Houzz Отзывы
              • Instagram Отзывы
              • OpenTable Reviews
              • Отзывы от TripAdvisor
              • Отзывы от Trustpilot
              • Отзывы Slider
              • Yelp Reviews
              • One

                0 Обзоры
              • на eBay
              • Facebook Chat
              • Telegram Chat
              • Viber Chat
              • WhatsApp Chat Trending
              Forms
              • Contact Form
              • Form Builder
              E-commerce
              • Click t o Позвоните по номеру
              • Таймер обратного отсчета Тенденции
              • Кнопка PayPal
              • Всплывающее окно
              • Тенденции в таблице цен
              Инструменты
              • Проверка возраста
              • Вернуться к началу
              • Слайдер до и после
            .

    Leave a Reply