Css-код социальных кнопок на сайт


Содержание материала:

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

При создании новостного портала или просто блога с интересными заметками, для увеличения количества реальных посетителей, я рекомендую разместить кнопки добавления в популярные социальные сети: Однокласники, Вконтакте, Twitter, Facebook, LiveJournal и другие.

Для добавления каждой кнопочки приходится перечитать гору документации. Здесь в одной статье я собрал все свои поиски.

Twitter

Адрес перехода на Twitter:
http://twitter.com/timeline/home?status=__ЗАГОЛОВОК_СТРАНИЦЫ__%20__АДРЕС__

Обратите внимание, что длина сообщения не должна превышать 140 символов.

“Твит” с ссылкой на страницу и дополнительным текстом.

Facebook

Адрес перехода на Facebook:
http://www.facebook.com/share.php?u=__АДРЕС__

Если Вы хотите не поделиться, а только Like-нуть то ссылка:

Документация Specifying_Meta_Tags, Facebook_Share. Использование meta тегов на странице для задания параметров шаринга описано в Open Graph Protocol.

VK- Вконтакте

Адрес перехода на vk.ru:
https://vk.com/share.php?url=__АДРЕС__&title=__ЗАГОЛОВОК_СТРАНИЦЫ__&image=URL на картинку

Если на странице присутствуют соответствующие теги, то информация берется из них:

  • Заголовок: , если его нет то из тега .
  • Описание: .
  • Картинка:
  • , если его нет, то первые 8 тегов на странице не превышающие 100×100.

LiveJournal

Адрес перехода на LiveJournal:
http://www.livejournal.com/update.bml?mode=full&subject=test&event=__АДРЕС__

LinkedIn

Адрес перехода на LinkedIn:
http://www.linkedin.com/shareArticle?mini=true&url=__АДРЕС__&title=__ЗАГОЛОВОК_СТРАНИЦЫ__&source=htmlweb.ru

Адрес перехода на Buzz:
http://www.google.com/buzz/post?message=__ЗАГОЛОВОК_СТРАНИЦЫ__&url=__АДРЕС__&hl=ru

Pinterest Pin

Поделиться медиа-файлом и URL на Pinterest.

Surfingbird Surf!

Поделиться (“расшарить”) URL. Имейте ввиду, что Surfingbird не парсит предоставленный URL-страницы, все параметры ниже обязательны к заполнению.

Яндекс

Адрес перехода на Яндекс:
http://wow.ya.ru/posts_share_link.xml?url=__АДРЕС__&title=__ЗАГОЛОВОК_СТРАНИЦЫ__&body=__ЧАСТЬ_СТРАНИЦЫ__

Мой мир

Адрес перехода на Мой мир:
http://connect.mail.ru/share?url=__АДРЕС__&title=__ЗАГОЛОВОК_СТРАНИЦЫ__&description=&imageurl=

Google Plus

https://apis.google.com/_/+1/fastbutton?url=url &usegapi — Принимает значения true/false. Используется для включения/выключения показа дополнительного окна “расшарить” &size — Принимает значения: small, medium, standard (по умолчанию), tall &hl — Язык, список доступных языков С полным списком принимаемых параметров можно ознакомится — тут https://developers.google.com/+/web/+1button/#tag_parameters

Поделиться (“расшарить”) URL.

Счетчик поделившихся

Если Вы хотите добавить счетчик поделившихся, используйте следующее решение:

Готовый блок кода:

Более сложное, но красивое решение.

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

Представлено два варианта с иконками:

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

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

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

Не клюет? И средств на прикормку посетителей уже много потратили. А кнопки социальных сетей для сайта установили? Понятно! Все симптомы заболевания на лицо – асоциальность сайта. Будем лечить.

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

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

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

Что представляет собой обычная социальная кнопка?

Для примера возьмем скрипт социальной кнопки ВКонтакте. Ее код:

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

Второй кусок кода нужно поместить в той части страницы, где будет отображаться кнопка:

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

Варианты легкого размещения

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

  • Блок «Поделиться» от Яндекс – позволяет сгенерировать код сразу для нескольких социальных кнопок. Данный сервис отличается ясным и понятным интерфейсом. Выбор социальных сетей осуществляется с помощью флажков в левой стороне страницы. Справа можно задать внешний вид кнопок:
  • AddThis – данный сервис обладает англоязычным интерфейсом. Но в тоже время позволяет добавить кнопку любой социальной сети мира:

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

  • Share42 – понятный и простой интерфейс с возможностью «тонкой» настройки внешнего вида панели социальных кнопок. При этом процесс настройки сопровождается пошаговыми инструкциями с описанием действий, которые необходимо осуществить. Поэтому сервис подходит даже для не опытных вебмастеров:

Еще одним плюсом данного сервиса является генерация скрипта панели социальных кнопок с поддержкой нескольких популярных CMS .


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

Для популярных CMS создано множество плагинов групповой установки социальных кнопок. Рассмотрим пример установки плагина Social Share Buttons for WordPress .

Положительными сторонами этого расширения является полностью русскоязычный интерфейс, простота настройки и « заточенность » под популярные социальные сети Рунета:

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

1) Заходим в административную панель сайта. Слева выбираем вкладку « Плагины », « Добавить новый ».
2) На странице « Установить плагины » в поисковое поле вводим название расширения и нажимаем на кнопку « Поиск плагинов »:

3) В результатах поиска находим имя нужного расширения. После чего нажимаем на ссылку «Установить»:

4) После загрузки архива и установки активируем плагин нажатием соответствующей ссылки:

5) После его активации в левой консоли инструментов появится новый раздел « Share Buttons »:

Настройки плагина состоят из нескольких пунктов:

  • « Главные настройки » — здесь можно загрузить логотип, задать текст, который будет отображаться перед социальными кнопками, а также их расположение;
  • « Share настройки » — задаются параметры отображения кнопок share (« Поделиться »);
  • « Like настройки »:

Еще несколько проверенных плагинов для WordPress :

  • Fixed Social buttons – этот плагин позволяет добавить на сайт плавающую социальную панель, которую можно «прилепить» сверху, снизу или сбоку;
  • Html Social share buttons – данный плагин включает в себя социальные кнопки, созданные исключительно с помощью css и html.

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

Под этот движок также создано много плагинов для работы с социальными кнопками. Рассмотрим процесс установки расширения на примере SocButtons . Особенности этого плагина:

  • Поддержка всех наиболее популярных версий движка;
  • Простота настройки;
  • Характеристики внешнего вида задаются для каждой кнопки отдельно;
  • Малый вес инсталляционного пакета.

1) Заходим в административную часть сайта на Joomla и выбираем значок « Менеджер расширений ».
2) Здесь определяемся с источником для загрузки расширения:

3) После инсталляции расширения переходим в « Менеджер плагинов » и активируем только что установленное расширение. Для этого нужно нажать на зеленый значок вверху страницы:

4) Для настройки нажимаем на имя расширения в списке. В данном плагине настройки отображения задаются для каждой социальной кнопки отдельно:

Еще несколько проверенных расширений для Joomla:

  • Social Bookmarking – данный плагин существует сразу в нескольких версиях. Каждая позволяет расположить социальную панель в определенном положении ( горизонтально, вертикально, или вообще сделать ее плавающей );
  • JL Like – этот плагин не производит дополнительную загрузку внешних скриптов, позволяет вести статистику голосов из социальных сетей.

Скрипт или плагин?

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

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

Код социальных кнопок можно получить на одном из специализированных сервисов. Их обзор представлен выше. Для примера возьмем сервис Share42 . Он поддерживает создание социальных кнопок для популярных движков. Порядок действий:

1) Заходим на сайт сервиса и настраиваем « под себя » панель социальных кнопок.
2) Скачиваем готовый скрипт:

3) Размещаем его в папке, находящейся по адресу wp-content/plugins/share42/share42.js .
4) Добавляем кусок сгенерированного кода из пункта 5, руководства опубликованного на сайте сервиса:

5) Добавляем его в начало файла single.php редактируемой темы:

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

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

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

На сегодняшний день не встретить ни одного сайта без связки с социальными сетями. Это социальные кнопки «Поделиться», быстрая регистрация через социальные сети, виджеты комментариев и групп. В сегодняшнем посте мы рассмотрим варианты реализации социальных кнопок, их плюсы и минусы, а также посмотрим, какие есть конструкторы социальных кнопок для сайта, а именно кнопок «Поделиться», ведь они являются отличным источником трафика.
Не так давно мы обновляли дизайн данного сайта и решили заменить социальные кнопки. В старом дизайне были использованы стандартные лайки от социальных сетей. Они были невзрачны, совсем не привлекали внимания и не работали так, как нам хотелось бы. Было принято решение заменить Like-кнопки на Share, так как вторые более броские для глаза, все в одном стиле, да и проще. Было несколько требований: яркие, плоский стиль, кнопки со счетчиком для каждой социальной сети. Для реализации этой задачи существует несколько путей: взять готовый jQuery скрипт социальных кнопок, сделать свое решение с собственным видением реализации или использовать онлайн конструкторы социальных кнопок, которые предлагают самим сконструировать и получить красивые кнопки на любой вкус. Скажу сразу, споров было много, ведь в каждом варианте реализации есть свои плюсы и минусы. Первый вариант быстро отпал, так как скрипты, в основном, написаны забугорными веб-мастерами, а буржуйнет о наших социальных сетях и не слыхал. Все, что написано нашими веб-мастерами — убогое и страшное, зато есть Вконтакте, Одноклассники, Мой мир и т.д. Портить внешний вид социальными кнопками не хотелось. Лучший вариант — написать скрипт самим. Тут и раздолье для творчества и есть возможность стилизировать все под сайт, но чтобы написать свой вариант решения, требуется время. Отложили эту идею на лучшие времена. Кстати, если все же реализуем свои социальные кнопки, обязательно их выложим на этом сайте для свободного пользования. Подписывайтесь на нас в социальных сетях или на RSS, чтобы не пропустить. Итак. Решили пока использовать сторонний сервис, хоть в данном решении есть много существенных минусов.
Давайте обсудим все плюсы и минусы использования социальных кнопок, предоставленных сторонним сервисом.

Плюсы:

  • Можно стилизировать социальные кнопки под ваш сайт с помощью визуального конструктора.
  • Много концепций социальных кнопок (вертикальные, горизонтальные, фиксированные, со счетчиком и без него)
  • Время. Можно получить красивые кнопки, потратив минимум времени.
  • Аналитика. У некоторых сервисов есть своя статистика по кликам, что очень удобно для аналитики.
  • Много дополнительных плюшек. Сервисов для генерации социальных кнопок становится все больше и каждый из них стремится выделиться, придумав что-то новенькое.

Минусы:

  • Сомнительная безопасность. В интернете есть много споров по поводу использования социальных кнопок от различных сервисов. Многие говорят, что вставив сторонний код в страницу, вы предоставляете неким лицам (в данном случае сервисам социальных кнопок)информацию, которой не хотели бы делиться с кем попало. Также ходят слухи о сборе Cookies и много чего другого.
  • Скорость работы. Социальные кнопки от различных онлайн-конструкторов тормозят загрузку страницы. Это неоспоримый факт. Даже на нашем сайте они загружаются со значительным запозданием. Плюс ко всему подгружается много лишнего хлама. Так уж устроено, что если что-то делается для широкой аудитории, то приходится нагружать продукт мусором, дабы охватить как можно больше аудитории.
  • Паранойя. А вдруг сервис завтра прогорит? Это самая маленькая беда, так как в любой момент можно заменить код на другой — взять у конкурентов.
Топ-пост этого месяца:  5 парсеров аудитории в Facebook сбор и выгрузка данных из групп

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

uSocial

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

  • Кнопки “Поделиться“;
  • Кнопки “Like“;
  • Социальный замок (скоро);
  • Инструменты для работы с группами и т.д.

uSocial имеет довольно богатый конструктор share-кнопок. Однако в полной мере его «пощупать» можно при наличии Pro-аккаунты. Если говорить о дизайне, все очень неплохо. Кнопки получаются аккуратными и вписываются в любой сайт.

Pluso

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

Pluso X

Экспериментальная версия конструктора социальных кнопок Share Pluso. В ней улучшен дизайн иконок, всплывающего окна с полным списком доступных социальных сетей, а также потерпела изменения раздражающая оранжевая кнопка со знаком «+», на ее месте теперь тот же плюсик, но уже в более приятном оформлении.
По заявлению разработчиков, новые социальные кнопки заточены под Retina мониторы. Все остальное, на первый взгляд, осталось прежним. К сожалению, в конструкторе среди доступных вариантов я не нашел кнопок со счетчиком, хотя в стандартной редакции Pluso они есть.
Не знаю, заменят ли они новым конструктором старый, но, на данный момент, одновременно работают оба по разным ссылкам.

Add This

Add This — это сервис, предоставляющий качественные, стильные и гибкие социальные кнопки. Данный ресурс является лидирующим на западе. У нас менее популярен, но мне частенько встречаются русскоязычные сайты с виджетом Add This.
Есть платные и бесплатные виджеты. В бесплатном аккаунте доступны только наиболее простые варианты. В платном доступно намного больше концепций оформления таких как: адаптивные кнопки, кнопки с различными счетчиками и много чего другого.
Данный вариант для наших людей, думаю, плохо подходит, так как за навороты нужно будет заплатить, а на отечественном рынке можно найти все то же самое, но бесплатно.
В конструкторе Add This имеется огромный список доступных социальных сетей, включая Вконтакте, Мой Мир и Одноклассники. Есть плагин для WordPress.

Good Share

Легкие и красивые share-кнопки для вашего сайта с маленьким по объему кодом для вставки, что очень привлекает. К сожалению, есть только один вариант оформления с несколькими цветовыми схемами. Есть все популярные в рунете социальные сети
Как заявляют разработчики, их детище SEO оптимизировано и поисковики полюбят ваш сайт. Не знаю, сколько здесь правды.
Если вам не нужно наворотов, этот вариант именно для вас.

Up To Like

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

Shareaholic

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

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

Всем известные социальные кнопки от компании Яндекс. Раньше они были страшные, но Яндекс решил добавить еще кнопки со счетчиком с обновленным дизайном и стало сносно.
Сам конструктор довольно скудный и некоторые настройки сменить нельзя, но можно немного изменить код и кнопки станут, например, больше.
Если вам нужны простые кнопки «Поделиться» со счетчиком, берите их, не пожалеете.

Share This

Share This — западный конструктор социальных кнопок. Простой, с малым количеством настроек, но есть Вконтакте и Одноклассники. Пока тесно не работал с данным сервисом.

Интересный сервис. Дизайн самих кнопок мне не очень нравится, хотелось бы увидеть Flat оформление, но есть счетчик поделившихся. Такая же концепция виджета, как на скрине, есть на сайте Add This, но там она доступна только в платном аккаунте.

Add to any

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


QIP кнопка

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

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

Представляю вам чистые и адаптивные кнопки социальных сетей, с помощью Font Awesome и JavaScript вы сможете установить себе хорошие кнопки «поделиться» на WordPress.

Я понимаю чтобы не заморачиваться можно и поюзать Pluso или Яндекс Блок «Поделиться», но я вас уверяю это все херня по сравнению с тем что я вам покажу. Данный способ поможет избежать подгрузки сторонних скриптов, без воровства трафика или левой рекламы на сайте. А так же плюс ко всему вы сможете сверстать кнопки как вам угодно. Пример вы можете посмотреть внизу статьи, я на свой блог их тоже подключил.

Подключение jQuery для кнопок

Не используйте? тогда подключаем в

Лучше и проще всего, можно сделать через functions.php (так наверное даже будет правильней):

HTML код для кнопок

Вставляем в нужное вам место следующий HTML код:

Не забываем про стили кнопок

Оформите кнопки в style.css добавив уже готовые стили для кнопок

Последний шаг

Подключаем share.js и смотрим на результат!

Дополнительно

Так получилось, что лично у меня кнопки не работали сразу, помогло вот это:

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

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

CSS проделал длинный путь от форматирования структурированного контента. Современные веб-сайты предназначены для обеспечения различных типов взаимодействий с пользователями. CSS3 эффекты используются в большинстве из этих взаимодействий.

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

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

Дата публикации: 2020-07-29

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

Важность социальных кнопок

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Варианты размещения в шаблонах

Вообще есть три основных варианта:

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

Над статьей. Это гораздо менее распространено. Тут расчет делается на заголовок и первые абзацы публикации. Например, увидел я заголовок “102 варианта приготовления каши”. О, интересно, сразу нажал, сохранил себе в соц. сеть, чтобы позже радовать себя разнообразием за столом.

Сбоку (вертикальное расположение + фиксация). Также достаточно распространенный вариант. Он подходит для сайтов, где сбоку есть место для расположения там узенького блока. Обычно в таком случае соц.сетей немного, от 3 до 10, чтобы поместиться по высоте на экране.

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

Как добавить на сайт кнопки соц. сетей: вариант для верстальщиков

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

Но решение есть! Это кнопки от GoodShare. Вот так прямо и введите в поиске, и вам наверняка выдаст их сайт. Скрипт от goodshare очень легкий и простой, устанавливается с пары кликов (можно подключить из очень быстрого CDN). Если вы верстальщик или хоть немного разбираетесь, я не буду вам объяснять, как устанавливаются скрипты, потому что вы в курсе.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Как создать социальные кнопки «Поделиться» без сервисов и плагинов 78

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

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

Сервисы, которые я использовал на сайтах клиентов и на своём блоге — Яндекс.Поделиться и PLUSO. Эти сервисы позволяют достаточно легко реализовать поставленную задачу.

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

В чём преимущество собственных социальных кнопок перед сервисами и плагинами

  1. Безусловно, неоспоримым фактором является скорость загрузки сайта. Так, к примеру, сервис PLUSO, который я использую на блоге, при лучшем раскладе прибавляет к загрузке 633 миллисекунды.

А в этом блоке используются лишь необходимые изображения социальных кнопок, объединённые в css спрайты. Все стили сведены к минимуму. Плюс простой каркас html.

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

Нет внешних ссылок

  1. Очень простая установка. Достаточно вставить html код блока в исходный код страницы сайта, загрузить спрайт, добавить css стили и установка закончена. Вам лишь необходимо будет подправить путь к файлу с изображениями кнопок.
  2. Этот пункт скорей и не плюс и не минус в сторону собственного блока социальных кнопок. Фишка в том, что у собственного блока нет счётчика нажатий на кнопки. И это можно посчитать за минус. Но, с другой стороны, есть возможность поставить цели Яндекс.Метрики на каждую кнопку и вы точно будет знать сколько раз нажимали на кнопки и делились вашими статьями в социальных сетях ваши посетители.
  3. Статистика, собираемая сервисами, по вашему сайту больше не будет передаваться третьим лицам.

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


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

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

Топ-пост этого месяца:  Препроцессоры Sass и Less автоматизируйте процесс Front-end разработки и достигните новых высот и

Сделать это можно либо открыв файл, отвечающий за вывод статей ( single.php ) и в исходный код добавить блок социальных кнопок. Либо это можно сделать через файл функции темы ( functions.php ).

Я покажу оба варианта, а вы для себя выберите подходящий.

Вставка блока в исходный код single.php

Предупреждение: Пред началом всех действий сделайте резервную копию файла single.php!

Открываем административную панель Вордпресс – «Внешний вид»«Редактор»«Одна запись (single.php)».

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

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

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

А вот и сам html код блока социальных кнопок:

Пояснения по коду: это один блок ДИВ с классом .share, в котором содержатся ссылки на социальные сети. Ссылка открывается в отдельном всплывающем окне, за это отвечает вот эта функция onClick=window.open . Подстановка ссылки на статью осуществляется вот этим кодом . Каждая ссылка имеет свой класс, через который присваивается изображение кнопки.

На этом вставка через исходный код закончена. И далее нужно подключить css стили.

Вставка блока в исходный код single.php через функции темы

Предупреждение: пред началом работ, — сделайте резервную копию файла functions.php!

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

И будьте внимательны после вставки кода у вас не должно быть пробелов и других символов. Либо только закрытие php кода ?>. В противном случае сайт перестанет работать.

Пояснения по коду: место, где будут выставлены кнопки социальных сетей, определяется через API ключ comments_template . По этому ключу определяется место перед комментариями. Сам код соцкнопок заключён в обратные теги открытия и закрытия php. В коде я их обозначил красным цветом. в этом вся хитрость вставки html кода в php, через функции темы.

На этом и это способ окончен, переходим к загрузке изображений на сайт.

Загрузка изображения кнопок на сервер

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

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

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

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

Подключение стилей CSS

Этот шаг можно конечно, выполнить самым первым, но я предпочитаю вначале выполнить всю сложную техническую работу, а уже после приступить к приятным мелочам с css стилями.

Итак, открываем файл style.css, отвечающий за дизайн вашего сайта. И вставляем вот эти стили:

Пояснения по коду: класс .share определяет общий вид блока, размеры каждой кнопки, отступы и задаёт единый фон. А далее каждая ссылка имеет свой класс и каждой такой ссылке, через свойство background присваивается вид кнопки. Кнопки выполнены в качестве css спрайта, и каждая кнопка имеет ширину и высоту 40px, а между ними отступ 2px, что позволяет с точностью определить изображение для каждой кнопки. То есть первая кнопка указана, как 0, а вторая как 42 и так далее. В коде эти значения обозначены оранжевым цветом. Ссылка на спрайт тоже выделена оранжевым цветом, её вы меняете на путь к своему спрайту.

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

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

Вот теперь всё. С поставленной задачей справился. Всем желаю удачи и до встречи в новых статьях и видеоуроках.

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

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

  • ГлавнаяНовости статьиCSS , HTML , jQuery , Разные заметки разработчика Кнопки поделится в соц сетях без сторонних сервисов

Кнопки поделится в соц сетях без сторонних сервисов

  • 4.2/5
  • 16 оценок
Очень плохо! Плохо Нормально Хорошо Очень хорошо!
18.8% 0% 0% 6.3% 75%

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

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

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

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

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

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

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

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

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

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

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

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

Мечта каждого владельца сайта, если все его записи будут репостить читатели на своих страницах в одной из социальных сетей. Сейчас больше всего идет спрос на Вконтакте, Facebook, Twitter и Одноклассники. Я бы еще добавить LiveJournal, liveinternet и Blogger. Вот эти кнопки желательно добавить на сайт для полного удобства пользователя.

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

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

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

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

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


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

Чем сегодня можно воспользоваться, чтоб добавить социальные кнопки для сайта:

  1. Сервис uptolike.
  2. Социальные кнопки яндекс.
  3. Добавление вручную каждой соц сети отдельно.
  4. Сервис Pluso.
  5. С помощью плагинов для WordPress (для ленивых).

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

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

Uptolike

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

  • Широкий выбор среди кнопок социальных сетей;
  • Кнопки адаптированы под мобильные устройства;
  • Возможность цитирования в соц сетяъ любого участка текста;
  • Можно добавить кнопку наверх;
  • Возможность добавления всплывающего окна на подписку в группу Вконтакте;
  • Выбор размера иконок;
  • Выбор стиля иконок для сайта;
  • Добавить эффект при наведении;
  • Изменение фона кнопки, цвета текста, фона счетчика;
  • Увеличение или уменьшение текста в счетчике.

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

Кроме этого, что еще может сервис uptolike.

Поделиться Сделать репост страницы.
Добавить лайки Пользователь имеет возможность поблагодарить автора.
Подписаться Пользователь имеет возможность подписаться на группу Вконтакте.
Поделиться изображением Любой желающий сможет поделиться понравившейся картинкой с сайта.
Опрос При необходимости добавить и провести опрос на сайте.
Добавить рейтинг записей С помощью рейтинга можно увидеть, что нравится читателям а что нет.
Добавить счетчик посещаемости Установить на сайт невидимый счетчик посещаемости.
Плагин для WordPress Кто ленится добавлять код, есть возможность установить плагин.
Плагин для Joomla Плагин для Drupal
Добавить модуль Bitrix

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

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

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

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

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

Яндекс

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

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

Ручной метод добавления

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

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

Вконтакте

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

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

Pluso

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

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

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

WordPress

Если вы ничего не понимаете в этом коде, что куда нужно копировать и как все это работает, выход есть. Если у вас движок WordPress, можно установить плагин, с помощью которого у вас появятся кнопки социальных сетей. Сегодня таких плагинов просто большое количество. Заходи в админку — Плагины. Можно сразу написать в поиске плагинов «соц кнопки», «social» или «вконтакте». Я уверен, вы что то найдете.

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

  1. Social Share Buttons for WordPress.
  2. Social.
  3. Social Media Feather — lightweight social media sharing and follow buttons.

На самом деле подобных таких плагинов очень много, нужно устанавливать и перебирать, какой вам больше понравится, правильно работает, что показывает и как его можно настроить под себя. Разберем на примере первый такой плагин Social Share Buttons for WordPress.

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

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

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

Выбор остается уже за вами, каким способом будете пользоваться. Добавлять иконки социальных сетей через uptolike, Pluso или через Яндекс. Не стоит сразу устанавливать плагин на WordPress, попробуйте сделать все ручным методом или с помощью сервиса.

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

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

На сегодняшний день не встретить ни одного сайта без связки с социальными сетями. Это социальные кнопки «Поделиться», быстрая регистрация через социальные сети, виджеты комментариев и групп. В сегодняшнем посте мы рассмотрим варианты реализации социальных кнопок, их плюсы и минусы, а также посмотрим, какие есть конструкторы социальных кнопок для сайта, а именно кнопок «Поделиться», ведь они являются отличным источником трафика.
Не так давно мы обновляли дизайн данного сайта и решили заменить социальные кнопки. В старом дизайне были использованы стандартные лайки от социальных сетей. Они были невзрачны, совсем не привлекали внимания и не работали так, как нам хотелось бы. Было принято решение заменить Like-кнопки на Share, так как вторые более броские для глаза, все в одном стиле, да и проще. Было несколько требований: яркие, плоский стиль, кнопки со счетчиком для каждой социальной сети. Для реализации этой задачи существует несколько путей: взять готовый jQuery скрипт социальных кнопок, сделать свое решение с собственным видением реализации или использовать онлайн конструкторы социальных кнопок, которые предлагают самим сконструировать и получить красивые кнопки на любой вкус. Скажу сразу, споров было много, ведь в каждом варианте реализации есть свои плюсы и минусы. Первый вариант быстро отпал, так как скрипты, в основном, написаны забугорными веб-мастерами, а буржуйнет о наших социальных сетях и не слыхал. Все, что написано нашими веб-мастерами — убогое и страшное, зато есть Вконтакте, Одноклассники, Мой мир и т.д. Портить внешний вид социальными кнопками не хотелось. Лучший вариант — написать скрипт самим. Тут и раздолье для творчества и есть возможность стилизировать все под сайт, но чтобы написать свой вариант решения, требуется время. Отложили эту идею на лучшие времена. Кстати, если все же реализуем свои социальные кнопки, обязательно их выложим на этом сайте для свободного пользования. Подписывайтесь на нас в социальных сетях или на RSS, чтобы не пропустить. Итак. Решили пока использовать сторонний сервис, хоть в данном решении есть много существенных минусов.
Давайте обсудим все плюсы и минусы использования социальных кнопок, предоставленных сторонним сервисом.

Плюсы:

  • Можно стилизировать социальные кнопки под ваш сайт с помощью визуального конструктора.
  • Много концепций социальных кнопок (вертикальные, горизонтальные, фиксированные, со счетчиком и без него)
  • Время. Можно получить красивые кнопки, потратив минимум времени.
  • Аналитика. У некоторых сервисов есть своя статистика по кликам, что очень удобно для аналитики.
  • Много дополнительных плюшек. Сервисов для генерации социальных кнопок становится все больше и каждый из них стремится выделиться, придумав что-то новенькое.

Минусы:

  • Сомнительная безопасность. В интернете есть много споров по поводу использования социальных кнопок от различных сервисов. Многие говорят, что вставив сторонний код в страницу, вы предоставляете неким лицам (в данном случае сервисам социальных кнопок)информацию, которой не хотели бы делиться с кем попало. Также ходят слухи о сборе Cookies и много чего другого.
  • Скорость работы. Социальные кнопки от различных онлайн-конструкторов тормозят загрузку страницы. Это неоспоримый факт. Даже на нашем сайте они загружаются со значительным запозданием. Плюс ко всему подгружается много лишнего хлама. Так уж устроено, что если что-то делается для широкой аудитории, то приходится нагружать продукт мусором, дабы охватить как можно больше аудитории.
  • Паранойя. А вдруг сервис завтра прогорит? Это самая маленькая беда, так как в любой момент можно заменить код на другой — взять у конкурентов.

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

uSocial

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

  • Кнопки “Поделиться“;
  • Кнопки “Like“;
  • Социальный замок (скоро);
  • Инструменты для работы с группами и т.д.

uSocial имеет довольно богатый конструктор share-кнопок. Однако в полной мере его «пощупать» можно при наличии Pro-аккаунты. Если говорить о дизайне, все очень неплохо. Кнопки получаются аккуратными и вписываются в любой сайт.

Pluso

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

Pluso X

Экспериментальная версия конструктора социальных кнопок Share Pluso. В ней улучшен дизайн иконок, всплывающего окна с полным списком доступных социальных сетей, а также потерпела изменения раздражающая оранжевая кнопка со знаком «+», на ее месте теперь тот же плюсик, но уже в более приятном оформлении.
По заявлению разработчиков, новые социальные кнопки заточены под Retina мониторы. Все остальное, на первый взгляд, осталось прежним. К сожалению, в конструкторе среди доступных вариантов я не нашел кнопок со счетчиком, хотя в стандартной редакции Pluso они есть.
Не знаю, заменят ли они новым конструктором старый, но, на данный момент, одновременно работают оба по разным ссылкам.

Add This

Add This — это сервис, предоставляющий качественные, стильные и гибкие социальные кнопки. Данный ресурс является лидирующим на западе. У нас менее популярен, но мне частенько встречаются русскоязычные сайты с виджетом Add This.
Есть платные и бесплатные виджеты. В бесплатном аккаунте доступны только наиболее простые варианты. В платном доступно намного больше концепций оформления таких как: адаптивные кнопки, кнопки с различными счетчиками и много чего другого.
Данный вариант для наших людей, думаю, плохо подходит, так как за навороты нужно будет заплатить, а на отечественном рынке можно найти все то же самое, но бесплатно.
В конструкторе Add This имеется огромный список доступных социальных сетей, включая Вконтакте, Мой Мир и Одноклассники. Есть плагин для WordPress.

Good Share

Легкие и красивые share-кнопки для вашего сайта с маленьким по объему кодом для вставки, что очень привлекает. К сожалению, есть только один вариант оформления с несколькими цветовыми схемами. Есть все популярные в рунете социальные сети
Как заявляют разработчики, их детище SEO оптимизировано и поисковики полюбят ваш сайт. Не знаю, сколько здесь правды.
Если вам не нужно наворотов, этот вариант именно для вас.

Up To Like

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

Shareaholic

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

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

Всем известные социальные кнопки от компании Яндекс. Раньше они были страшные, но Яндекс решил добавить еще кнопки со счетчиком с обновленным дизайном и стало сносно.
Сам конструктор довольно скудный и некоторые настройки сменить нельзя, но можно немного изменить код и кнопки станут, например, больше.
Если вам нужны простые кнопки «Поделиться» со счетчиком, берите их, не пожалеете.

Share This

Share This — западный конструктор социальных кнопок. Простой, с малым количеством настроек, но есть Вконтакте и Одноклассники. Пока тесно не работал с данным сервисом.

Интересный сервис. Дизайн самих кнопок мне не очень нравится, хотелось бы увидеть Flat оформление, но есть счетчик поделившихся. Такая же концепция виджета, как на скрине, есть на сайте Add This, но там она доступна только в платном аккаунте.

Add to any

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

QIP кнопка

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

Топ-пост этого месяца:  Описания быстрых ссылок в Яндекс Директ
Добавить комментарий