код соцсетей для сайта
Выбираем лучшие кнопки социальных сетей для сайта
В Интернете, вероятно, не осталось сайтов, на которых бы не были размещены кнопки для постинга материалов в социальные сети. Последние давно и прочно заняли место в наших жизнях. Мы там общаемся, знакомимся, раскручиваем бизнес, читаем новости и прочее. Полный спектр. Неудивительно, что веб-мастера стремятся расширить присутствие своих сайтов в соцсетях любыми доступными методами. Ведь там лежат тонны потенциального траффика, который нужен абсолютно всем. Поток посетителей – это деньги, репутация, рост. Всё строится вокруг него. Лакомый кусок.
Соцкнопки необходимы, это очевидно. Вопрос в другом – какие выбрать? Мы для вас протестировали ТОП 5 различных сервисов для добавления кода кнопок на сайты. Цель – выявить оптимальный и показать его в деталях. Начнём с отборочного этапа.
Выбор лучшего сервиса социальных кнопок
Выбор претендентов для сравнения оказался банален – мы взяли самые популярные сервисы, о которых слышал любой человек, сколь-нибудь близко знакомый с темой создания сайтов. Никаких редких, набирающих популярность, только опытные старички.
Состав команды аттестуемых таков:
В результате тестирования выбранных социальных сервисов – лидером оказался uSocial. Теперь вы желаете получить обоснование нашего выбора. Само собой, голословными не останемся.
Особенности кнопок uSocial
uSocial – это мощный конструктор социальных кнопок «Поделиться» и «Мне нравится» для сайта. Имеет собственную функциональную кнопку для шаринга uLike, виджет для привлечения посетителей (завлекающее pop-up окно), приложение для ВК сообществ, конструктор мета-данных и инструмент отладки (очистки кэша). Отдельно стоит выделить наличие такой полезной опции как «Социальный замок» позволяет скрывать заданный контент (ссылку, промокод и т.д.) на страницах сайта и предоставлять к нему доступ по истечению определенного времени или при выполнении условия – «Поделиться» сайтом в социальных сетях! Само собой, есть поддержка мобильной версии блока, счетчика репостов/лайков, доступна масса гибких настроек для отображения, а также подробная статистика репостов в личном кабинете. Кнопки можно установить на сайт любого конструктора или CMS: uCoz, uKit, Wix, Jimdo, WordPress, Joomla и остальных движков.
Приведем некоторые факты, убедившие нас в правильности принятого решения.
Словесного сравнения многим окажется мало. Поэтому мы составили сравнительную таблицу кнопок от uSocial и остальных дебютантов (используемая шкала оценки – от 1 до 5). Все эти данные получены в процессе тестирования.
Надеемся, проведённый анализ смог развеять ваши сомнения в обоснованности нашего выбора. Помимо приятной внешности социальные кнопки от uSocial носят глубокий прикладной характер, являясь довольно мощным инструментом для продвижения любых проектов.
Инструкция как установить кнопки социальных сетей на сайт
Для размещения социальных кнопочек от uSocial на своём сайте необходимо выполнить несколько простых шагов:
На сайте сервиса и выбираем, какой тип кнопок или набор сервисов будем создавать: кнопки «Поделиться», «Мне нравится», единую кнопку «uLike»; виджет «Привлечение посетителей» или «Социальный замок».
Собираем набор социальных кнопок. Можно выбрать отображаемые сервисы социальных сетей, форму и стиль кнопок.
Премиум пользователям доступны кнопки разных цветов и дополнительные эффекты при наведении. Для настройки внешнего вида доступны следующие опции: положение, размер кнопок, включить отдельные счётчики для каждой кнопки и добавить суммарный счётчик «Поделиться».
Здесь же можно активировать кнопку «Вверх», включить поддержку мобильных устройств, подключить сервисы Viber, WhatsApp, Telegram, SMS.
После завершения всех операций вводим адрес своего сайта и жмём на кнопку «Получить код».
Копируем код скрипта в появившемся окне. Вставлять код нужно на те страницы вашего ресурса, где необходима панель социальных кнопок. Например, в футер перед закрывающим тегом
Кнопки соцсетей для сайта на чистом CSS
Социальные сети стали неотъемлемой частью современного интернета. Своим понятным функционалом они массово завлекли пользователей вызвав у них зависимость.
Хочу поделиться с достопочтенной аудиторий кнопками социальных сетей для сайта на чистом CSS и Font Awesome, которые я делал подгоняя стили целый день.
Кнопки социальных сетей
Набор круглых кнопок
Посидел денёк подбирая тени и стили для кнопок соцсетей. Теперь вот хочу поделиться с вами своим вариантом круглых кнопочек соцсетей:
Чтобы вставить кнопки на сайт, добавьте через HTML код нужных вам соцсетей.
Для тех кто плохо разбирается в HTML, подскажу что код одной кнопки соцсети состоит из трёх строк.
В классе открывающегося тега div есть названия соцсетей на английском. Ненужные кнопки можно удалить, а нужные отсортировать в том порядке который вас устраивает.
Надеюсь с вставкой HTML-кода кнопок разберётесь.
Ссылка на соц сеть
Так же обязательно добавьте CSS, чтобы ваши кнопки работали так же как в моём примере.
Код CSS
CSS кнопок добавляется в файл CSS темы или шаблона вашего сайта. Место для вставки кода CSS не принципиально. Можете вставлять код в самый низ файла css с новой строки.
Начиная со строки 15 идут стили для кнопок. Можете удалить ненужные вам соцсети.
Например:
Набор квадратных кнопок
Так же если вам не нравятся круглые кнопки, предложу вариант квадратных кнопок:
Как добавить социальные кнопки на сайт?
В этой статье мы рассмотрим различные способы создания блоков «Поделиться» и «Мне нравится» в том числе включая вариант без использования сторонних сервисов (через URL-адреса прямого доступа). Кроме этого ещё разберём как можно оформить ссылки на официальные профили компании в социальных сетях.
Социальные сети на сайте
На сайте ссылки на социальные сети используются для того, чтобы пользователь знал о наличии на этих ресурсах официальных страниц этой компании, а также мог очень просто перейти туда.
Обычно ссылки на официальные профили в социальных сетях оформляются в виде значков или кнопок, и помещаются в заголовок или футер страниц веб-сайта.
Например, на сайте «mebel.ru» они находятся в правом нижней части:
Кроме ссылок на официальные страницы бренда, на сайтах ещё очень часто можно увидеть кнопки «share» (поделиться) и «like» (нравится). Их обычно располагают рядом со статьёй, товаром или услугой.
Например, на сайте «ferra.ru» кнопки «share» расположены сразу под заголовком статьи:
Кнопки «share» позволяют быстро поделиться этим контентом в социальных сетях. При нажатию на неё автоматически формируется ссылка на этот контент и пользователю останется только нажать «Отправить». После чего она будет опубликована в его личном аккаунте, которую увидят все его подписчики.
Кнопки «like» обычно кроме возможности быстро поделиться, позволяют ещё посетителям сайта одним кликом выразить своё отношение к контенту, т.е. зарегистрировать отметку «Нравится».
Почему связь с социальными ресурсами важно для вашей компании? В основном это связано с тем, что социальные сети сейчас занимают огромную роль в жизни людей и не использовать их для увеличения своей аудитории, просмотров и потенциальных клиентов просто неразумно.
Ссылки на официальные профили в социальных сетях
Если в социальных сетях у вас имеются официальные профили компании, то рекомендуется создать ссылки на них.
Выполняется это очень просто.
Кнопки «Поделиться» и «Мне нравится»
Блок с кнопками «Поделиться» предназначен для того, чтобы пользователи могли быстро публиковать понравившиеся им страницы в своих социальных сетях, а в случае использования «Мне нравиться» ещё и «лайкать» их.
Использование сторонних сервисов
Создание соцкнопок этим способом выполняется легко. Для этого достаточно перейти на любой сервис, представляющий такую возможность, выбрать в нём вид кнопок, вариант их оформления и нужный набор сервисов. Обычно все эти действия выполняются очень просто (через конструктор). Далее, после того как вы всё окончательно настроили, нужно скопировать полученный код и подключить его к себе на сайт.
Примеры сервисов, представляющий такую услугу:
Как это осуществляется в USocial:
Конструктор блока «Поделиться» от Яндекса:
Дополнительно, чтобы повысить эффективность от репостинга, на страницы сайта нужно добавить социальные мета-теги (микроразметку).
Мета-теги для социальных сетей
При этом для разных сетей код микроразметки может отличаться:
Без использования сторонних сервисов (официальные кнопки соцсетей)
Но, при добавлении блоков «Поделиться» и «Мне нравится» через сторонние сервисы они обычно загружают не только необходимые для работы скрипты социальных сетей (например, ВКонтакте, Facebook, Twitter и т.д.), но и многие другие вещи, которые для их нормальной работы вообще не нужны. Например, эти сервисы могут добавлять код, который будет собирать информацию о ваших пользователей, выполнять их отслеживание и многое другое. Кроме этого, они также могут приводить к увеличению времени полной загрузки страниц сайта.
При желании можно обойтись без этих дополнительных посредников и подключить скрипты социальных сетей к себе на сайт напрямую. Инструкции как это сделать приведены в соответствующих разделах документации социальных сетей.
Например, для того чтобы создать кнопку ВКонтакте необходимо выполнить следующие действия согласно официальной документации:
Кроме кнопки «Поделиться» ВКонтакте предлагает ещё много других виджетов, которые вы также можете установить себе на сайт.
Получается, что официальные кнопки соцсетей тоже достаточно просто вставить на сайт. Но они также как и в случае со сторонними сервисами полагаются на JavaScript.
Если вас это не устраивает (вы не хотите иметь зависимость от внешнего кода), то тогда можно вообще отказаться от размещения сторонних JavaScript скриптов на своём сайте, и реализовать всё это дело через URL-адреса. Благо социальные сети это позволяют.
Социальные кнопки через URL-адреса прямого доступа
Этот способ настолько прост, насколько это возможно. Но о нём часто забывают. Он основном на простом создании ссылок.
Основные преимущества это способа:
Этот вариант делает сайт более независимым, быстрым и ответственным по отношению к конфиденциальности данных своих пользователей.
Однако этот способ кроме преимуществ, имеет также и некоторые ограничения. Например, используя его, вы не сможете уже так просто показать количество отметок «Нравиться» и «Поделиться» для текущей страницы. Если для вас это не является обязательным условием – то тогда нет причин не использовать этот вариант.
Каждая социальная сеть имеет свой собственный уникальный URL-адрес для публикаций. Необходимая для извлечения информация в этом случае передаётся в составе URL через GET-параметры. Подключать какие-то сторонние JavaScript скрипты при таком подходе не нужно.
URL-адреса прямого доступа для социальных сетей Twitter, Facebook, ВКонтакте, Telegram имеют следующий вид:
В зависимости от используемого языка или фреймворка кодирования URL может выполняться по-разному.
Например, в PHP его выполнить можно с помощью функции urlencode :
Следовательно, HTML код ссылок для публикации материала в социальных сетях будут выглядеть следующим образом:
Кроме этого, чтобы публикуемая запись был оформлена корректно незабываем добавить на каждую свою страницу мета-теги для социальных сетей.
Создание ссылок посредством JavaScript
Автоматическое формирование ссылок для публикации страниц сайта в соцсетях можно выполнить как на клиенте, так и на сервере.
На клиенте, т.е. с помощью JavaScript, это можно сделать так:
Место, в которое они будут помещены на странице в данном случае необходимо разметить посредством создания пустого элемента
Это решение показывает, что самостоятельно создать набор кнопок «Поделиться» без зависимостей довольно просто.
Для того чтобы вставить его себе на сайт, необходимо на каждую страницу добавить только вышеприведённый скрипт и элемент
Количество соцсетей в этом скрипте указывается в переменной shareData (в виде массива объектов):
В ключе « title » мы задаём название соцсети, а в « href » – её URL-адрес для публикаций.
Создание соцкнопок посредством JavaScript
Представленный выше вариант можно стилизовать, например, представив его в виде кнопок с иконками. А также ещё сделать так, чтобы при нажатии на них форма для публикации открывалась не в новой вкладке, а в popup окне. Чтобы провести эти изменения нам нужно будет создать стили и отредактировать JavaScript код.
Создание соцкнопок посредством PHP
Формировать блок кнопок «Поделиться» можно не только посредством изменения DOM (на клиенте), но и сразу на сервере.
Если вы хорошо знаете устройство своего бэкенда и имеете хотя бы минимальный опыт написания северных скриптов, то сгенерировать такой блок на сервере тоже будет довольно просто.
Генератор кнопок соцсетей
Выберите нужные вам кнопки социальных сетей, установите в настройках их внешний вид и получите код HTML и CSS, полностью готовый для вставки на вашем сайте.
Онлайн генератор кнопок социальных сетей для сайта.
Данный генератор кнопок соцсетей очень прост в использовании. Минимум настроек и вы получаете готовые HTML и CSS.
Установите флажки для соцсетей которые нужно для вас добавить:
Цвет кнопок
Форма кнопок
Вывод SVG-иконок
Добавить Title
Внимание! Для кнопок требуется вставлять 2 сгенерированных кода: HTML и CSS. Обязательно!
А на вимео можо добавить, добрый человек?)
Да, можно. Сейчас соберу иконку и цвет для кнопки вимео и добавлю новую кнопочку.
Поклон вам, сделайте ещё кнопочку доната у себя на сайте)
Готово. Добавил Vimeo.
А чтобы размер изменить, мне нужно строчку добавить ещё одну?
Добрый день. Получилось установить кнопки. В полной версии сайта все хорошо работает, а когда смотришь с мобильного, то кнопки становятся ЧБ и безразмерные. Подскажите как исправить?
Не должно быть такого.
или может вы добавили стили внутри медиа запроса для широких экранов и поэтому на мобильном стили не подключаются. Медиа запрос это типа:
или может у вас в браузере стили закешировало и берёт стили из кеша где ещё нет стилей для этих кнопок. Тогда нужно просто почистить кеш браузера.
мобильной версии на сайте вообще нет, в мобильном оно все отображается так же как и в компе.
такого запроса у себя тоже не нашел.
Что я могу сделать еще или вам прислать на проверку?
Оставьте ссылку на сайт, я её потом затру.
Чтобы по быстрому решить и не гадать в чём причина, нужно в живую увидеть что к чему и из за чего.
я их сейчас разместил под меню слева, но вообще до этого они были над шапкой сайта.. в самом верху.
и так и так, все равно через телефон проблема остается
Наверное у вас просто закешировало файл стилей в браузере мобильного. Кеш браузера телефона почистите и всё станет норм. Просто он файл style.css не скачивает с сервера а берёт из кеша, а в кеше у него сохранился файл до того как вы в него внесли изменения, добавив эти стили кнопок. Почистите кеш в браузере смартфона.
благодарю, да, видимо все таки дело в кеше. просто в браузере инстаграма кеш никак не удалить, если только само приложение.
а можем где-то обсудить мобильную версию сайта? если вы этим занимаетесь конечно. Благодарю!
Чтобы кнопки встали по аккуратней чем сейчас, оберните кнопки в вот такой див:
И добавьте такой css:
Кеши только придётся снова почистить чтобы изменения увидеть. Так кнопки встанут по центру и добавятся отступы. Будет лучше чем сейчас.
А что касается мобильной версии, оно конечно сделать можно и тематика очень интересная. Но есть но. Я сайт немного полистал чтобы ознакомится. Он на вордпрессе сделан, а я с таким даже связываться не хочу. На самих страницах сайта есть битые ссылки ведущие вникуда, отсутствующие изображения и куча других косяков по мелочи. Там если браться делать, то переделывать полностью, то есть делать сайт с нуля, с проверкой, редактированием и переносом всего существующего контента. Итого это по времени выйдет долго (точно больше месяца). Отсюда и цена получится которую даже не прилично озвучивать.
А подскажите пожалуйста еще такой момент, сейчас соц кнопки перекинул в верхнюю часть сайта, а можно как-то подложку под них сделать определенного цвета? чтобы была просто полоса вверху на всю ширину страницы?
Да, конечно можно, хоть полоску определённого цвета, хоть изображение.
И добавим вот такой css:
Так же чтобы увидеть изменения чистим кеши.
Если делать просто полоской, то получается не очень. Поэтому я сделал что полоска под шапку сайта опускается. Цвет можно поменять, у свойства background-color поставьте значение нужного вам цвета.
Вот можете цвет выбрать:
Кликните по кнопочке выше, в появившемся окошке переключите на HEX (там есть стрелочки после названия формата). Подберите цвет который нравится и укажите его значением для background-color
А как все же сделать, чтобы я мог уменьшить размер полоски, чтобы не так сильно заходила под шапку или вообще не заходила?
и может можно регулировать его прозрачность?
Расположение кнопки соцсетей для сайта: зачем, где и как
Неотъемлемая часть поискового продвижения
Из этого материала вы узнаете:
Кнопка соцсетей для сайта является такой же неотъемлемой частью поискового продвижения, как и сам блог. Она делает пребывание посетителей на вашем сайте комфортным, облегчая (и даже стимулируя) шеринг интересных публикаций на личных страницах.
Пожалуй, вы не найдете ни одной веб-страницы, где бы не было кнопок постинга в социальных сетях. И их действительно нельзя игнорировать. Для многих пользователей соцсети превратились в полноценный аналог поисковых систем, где они могут найти абсолютно любую интересующую их информацию. А значит, здесь есть мегабайты трафика.
Итак, давайте разберемся, как этот трафик направить в нужную вам сторону с помощью кнопки соцсетей для сайта.
Роль кнопки соцсетей для сайта
Роль соцсетей в поисковом продвижении достаточно серьезна:
Социальные сети обеспечивают дополнительный способ коммуникации с потенциальными покупателями, распространяют информацию с сайта на нескольких ресурсах и являются еще одним источником привлечения пользовательского трафика.
Разновидности кнопок соцсетей для сайта
На сайте размещаются социальные кнопки двух типов.
Преимущества кнопки соцсетей на сайте
Подсказывают пользователям, что на кнопки требуется нажать
Иногда люди решают рассказать об интересных предложениях и материалах сайта. Тогда кнопки соцсетей, находящиеся в их поле зрения, напоминают и подсказывают, что можно проинформировать своих друзей через социальные сети.
Упрощают сохранение полезных материалов
Чтобы сохранить интересную информацию с сайта в своем аккаунте, человек должен уйти с интернет-ресурса и зайти в профиль соцсети. Когда же есть социальная кнопка, то достаточно всего лишь на нее нажать, и материалы с веб-ресурса сохранятся в аккаунте. Процесс несложный и быстрый, поэтому он привлекает большинство пользователей.
Если посетитель замечает кнопки основных социальных сетей, он выбирает подходящую — ту, которой чаще всего пользуется и где у него шире аудитория. Соответственно, информацию с сайта увидит новая группа людей, которая пополнит входящий трафик веб-ресурса.
Привлекают на сайт новый трафик
Это главное преимущество, которая дает кнопка соцсетей для сайта. Если большая часть посетителей кликает на социальные виджеты, то и материалы с веб-ресурса анонсируются в социальных сетях чаще. В случае заинтересованности пользователи соцсетей придут на сайт и тем самым обеспечат ему дополнительный трафик.
Минусы кнопки соцсетей для сайта
«Слепота» на социальные кнопки
Поскольку кнопки социальных сетей присутствуют почти на каждом веб-ресурсе, пользователи перестали обращать на них внимание. Взгляд посетителей замыливается, они уже не замечают данные элементы, причем это происходит не специально, а на уровне подсознания. Так кнопки становятся неэффективным инструментом.
Неготовность пользователей
Посетители сайта вообще могут быть не в теме социальных сетей. Например, далеко не все люди пенсионного возраста имеют там профили.
Многие пользователи не знают ни про соцсети, ни тем более про социальные кнопки. Когда такой виджет попадается им на глаза, они испытывают неловкость, потому что не понимают, что это и зачем нужно. Ситуация из разряда редких, но вполне реальная.
Следует учитывать, что слишком много кнопок разных соцсетей не способствуют акцентированию внимания на них. Более пяти-шести виджетов приводят людей в смятение и затрудняют выбор.
2 нюанса расположения кнопки соцсетей на сайте
Продумываем расположение
Размещение кнопок социальных сетей требуется основательно продумать. Они не должны быть навязчивыми, и в то же время необходимо, чтобы пользователи их видели и находили.
Чаще всего социальные виджеты ставят в начале или в конце статьи, а также в sidebar. Можно протестировать разные варианты расположения и решить, какое будет оптимальным для конкретного веб-ресурса.
Задаем внешний вид социальных кнопок
Кнопки социальных сетей должны выглядеть определенным образом:
8 вариантов размещения кнопок соцсетей на сайте
На сайте есть зоны, где размещение кнопок соцсетей не рекомендуется:
Ошибки размещения кнопок соцсетей на сайте
Встречаются веб-ресурсы, где виджеты соцсетей размещаются в нелогичных местах, так, что не до конца ясно, чем именно здесь можно поделиться — разве что веб-ресурсом целиком.
Это могут быть шаблонная информация из серии «О компании» или страницы товаров, ссылками на которые в принципе странно делиться в социальных сетях.
Если социальные кнопки находятся сразу после названия интересной статьи, то человек под впечатлением от прочитанного забудет поделиться ссылкой в соцсети, потому что он просто не увидит соответствующего виджета внизу материала.
Поэтому кнопку социальных сетей оптимально ставить после полезной информации. Так посетитель не забудет сохранить в своем аккаунте ссылку на понравившийся контент.
Коды HTML для добавления кнопки соцсетей на сайте
Социальные виджеты добавляются на веб-ресурс через код HTML конкретной соцсети.