Красивые кнопки социальных сетей. Социальные кнопки своими руками без сторонних сервисов

В последнее время каждый второй (если не первый) заказчик в требованиях по разработке сайта просит непременно связать его с социальными сетями. «Социальные» кнопки на сайте — средство номер 1 для привлечения целевой аудитории, распространения контента и пиара в целом. Причем совершенно бесплатное!

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

Если ваш сайт ориентирован на людей которые общаются популярных соц. сетях, например, Вконтакте, Twitter, Instagramm, Facebook, Google+, Pinterest и прочее, и вы хотите охватить их все, то чтобы не устанавливать кнопки каждой из них по отдельности, учитывая то, что они могут отличаться по размерам и дизайну, советуем воспользоваться сервисами-агрегаторами. Это простые и удобные инструменты, которые позволят посетителям сайта быстро делиться информацией со своими друзьями вне зависимости какой социальной сетью они пользуются. Ниже мы разберем наиболее популярные сервисы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Порядок действий:

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

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

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

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

Итак, приступим. В готовом примере будут просто текстовые ссылки без картинок. Если вы владеете минимальными навыками в CSS и Фотошоп или поиском картинок гугл, думаю Вам не составит труда сделать кнопки не хуже чем мои 🙂

Для начала нужно подключить библиотеку jquery.

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

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

Код приведенный ниже вставляем в теги

сюда код

И вставляем сразу после подключенной библиотеки.
Также, если вы не любите лишний код в html, то можете сделать немножко иначе.
Создайте файл buttons.js и вставляем код в него.
Далее после подключенной библиотеки вставляем ссылку на файл с правильным путем к нему.

Собственно, сам код:

Share = { /** * Показать пользователю диалог шаринга в сооветствии с опциями * Метод для использования в inline-js в ссылках * При блокировке всплывающего окна подставит нужный адрес и ползволит браузеру перейти по нему * * @example like+ * * @param Object _element - элемент DOM, для которого * @param Object _options - опции, все необязательны */ go: function(_element, _options) { var self = Share, options = $.extend({ type: "vk", // тип соцсети url: location.href, // какую ссылку шарим count_url: location.href, // для какой ссылки крутим счётчик title: document.title, // заголовок шаринга image: "", // картинка шаринга text: "", // текст шаринга }, $(_element).data(), // Если параметры заданы в data, то читаем их _options // Параметры из вызова метода имеют наивысший приоритет); if (self.popup(link = self(options)) === null) { // Если не удалось открыть попап if ($(_element).is("a")) { // Если это , то подставляем адрес и просим браузер продолжить переход по ссылке $(_element).prop("href", link); return true; } else { // Если это не , то пытаемся перейти по адресу location.href = link; return false; } } else { // Попап успешно открыт, просим браузер не продолжать обработку return false; } }, // ВКонтакте vk: function(_options) { var options = $.extend({ url: location.href, title: document.title, image: "", text: "", }, _options); return "http://vkontakte.ru/share.php?" + "url=" + encodeURIComponent(options.url) + "&title=" + encodeURIComponent(options.title) + "&description=" + encodeURIComponent(options.text) + "&image=" + encodeURIComponent(options.image) + "&noparse=true"; }, // Одноклассники ok: function(_options) { var options = $.extend({ url: location.href, text: "", }, _options); return "http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1" + "&st.comments=" + encodeURIComponent(options.text) + "&st._surl=" + encodeURIComponent(options.url); }, // Facebook fb: function(_options) { var options = $.extend({ url: location.href, title: document.title, image: "", text: "", }, _options); return "http://www.facebook.com/sharer.php?s=100" + "&p=" + encodeURIComponent(options.title) + "&p=" + encodeURIComponent(options.text) + "&p=" + encodeURIComponent(options.url) + "&p=" + encodeURIComponent(options.image); }, // Живой Журнал lj: function(_options) { var options = $.extend({ url: location.href, title: document.title, text: "", }, _options); return "http://livejournal.com/update.bml?" + "subject=" + encodeURIComponent(options.title) + "&event=" + encodeURIComponent(options.text + "
" + options.title + "") + "&transform=1"; }, // Твиттер tw: function(_options) { var options = $.extend({ url: location.href, count_url: location.href, title: document.title, }, _options); return "http://twitter.com/share?" + "text=" + encodeURIComponent(options.title) + "&url=" + encodeURIComponent(options.url) + "&counturl=" + encodeURIComponent(options.count_url); }, // Google+ gg: function (_options) { var options = $.extend({ url: location.href }, _options); return "https://plus.google.com/share?url=" + encodeURIComponent(options.url); }, // Mail.Ru mr: function(_options) { var options = $.extend({ url: location.href, title: document.title, image: "", text: "", }, _options); return "http://connect.mail.ru/share?" + "url=" + encodeURIComponent(options.url) + "&title=" + encodeURIComponent(options.title) + "&description=" + encodeURIComponent(options.text) + "&imageurl=" + encodeURIComponent(options.image); }, // Открыть окно шаринга popup: function(url) { return window.open(url,"","toolbar=0,status=0,scrollbars=1,width=626,height=436"); } }

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

ВКонтакте Facebook Twitter Одноклассники Google+ Mail.Ru LiveJournal

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

Share_this{margin-top:15px;width:100%;} .social_share{float:right;margin-left:5px;color:#fff;padding:2px;} .social_share:hover{cursor:pointer;} .vk:hover{background:#ff6600;} .fb:hover{background:#ff6600;} .tw:hover{background:#ff6600;} .gg:hover{background:#ff6600;} .ok:hover{background:#ff6600;} .mr:hover{background:#ff6600;} .lj:hover{background:#ff6600;} .vk{background:#339900;} .fb{background:#339900;} .tw{background:#339900;} .gg{background:#339900;} .ok{background:#339900;} .mr{background:#339900;} .lj{background:#339900;}

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

Плюсы: