П риветствую! Недавно меня в обратной связи спросили, как сделать такие же кнопки социальных сетей, которые установлены у меня на сайте. И я решил дать ответ в статье, сделав обзор 6 сервисов соц. кнопок для сайта.
Преимущества и недостаткиОднако необходимо отметить, что в некоторых случаях размещение кнопок может иметь небольшие минусы. Рассмотрим, зачем необходимо размещать кнопки социальных сетей на созданном блоге, а также рассмотрим основные положительные и отрицательные стороны размещения таких иконок.
Недостатки
Рассмотрим самые популярные сервисы, которые можно использовать для добавления кнопок социальных сетей на сайт.
Это полностью бесплатный сервис, который работает следующим образом. Он автоматически генерирует специальный скрипт, при помощи которого имеется возможность посетителям интернет-проекта публиковать ссылки в социальные сети. Выглядит сервис в виде кнопочек. Установка очень проста и удобна, а размещенные кнопочки красиво смотрятся на странице.
Сервис предлагает более трехсот вариантов разных кнопок! Можно очень просто выбрать наиболее понравившиеся.
Установка происходит буквально в один клик. Имеется статистика переходов.
Это, наверное, один из самых интересных онлайн сервисов, при помощи которого имеется возможность сгенерировать кнопку по нескольким параметрам: размеру и внешнему виду. Кроме этого можно выбрать, как будет располагаться панель с кнопками (горизонтально или вертикально). Можно также указать кодировку. После выбора всех необходимых настроек, сгенерированный скрипт нужно скачать и поместить на свой интернет-проект в необходимое место. В основном, сразу после статьи.
Яндекс предлагает самостоятельно выбрать, какие социальные сети будут отображаться. Пользователь может это сделать путем простой установки галочек напротив тех кнопок, которые будут размещены на блоке. Можно отредактировать их внешний вид.
Далее система автоматически сгенерирует исходный код, который нужно будет установить у себя на блоге. К основным преимуществам этого сервиса можно отнести то, что скрипт не ставит на созданном блоге исходящие ссылки. Также имеется возможность подключения Яндекс.Метрики, для ведения статистики.
Данный сервис предлагает пользователям разместить на своем сайте очень красивые и стильные кнопочки социальных сетей. Созданная сервисом форма использует css и javascript. Сгенерированная форма будет прекрасно вписываться в дизайн любого интернет-проекта. Кнопки «лайков» выполнены с использованием современной технологии jquery. Подключение очень простое и не вызовет трудностей даже у начинающих. Загрузка происходит очень быстро.
Это полезный и полностью бесплатный онлайн сервис, который предлагает пользователям разместить кнопки таким образом: в один ряд, расположение в виде выпадающего меню, иконки всех сервисов в строку. После выбора вариантов отображения сервис автоматически сгенерирует специальный javascript код, который нужно будет поместить в необходимо место на сайте.
Кроме этого сервис рассказывает, как нужно добавить созданный код в шаблоны .
При использовании данного сервиса, можно очень быстро и просто добавить необходимые кнопочки на свой сайт или блог. Для этого необходимо выполнить всего лишь три простых шага: выбрать место, где будет расположен созданный виджет, выбрать стиль кнопок и получить код. Разместивши на созданном блоге такие кнопки, посетители смогут добавлять интересные материалы в свои собственные закладки и социальные сети.
Итак, установка кнопок социальных сетей для сайта происходит очень просто, и не вызовет затруднений даже у начинающих интернет-пользователей. По желанию, можно установить или же кнопки всех имеющихся сетей, или же выбрать только какие-то определенные сети. Для этого необходимо использовать официальные виджеты или сторонние онлайн сервисы. Наиболее большой популярностью пользуются кнопочки, установленные на личных блогах, или же на новостных или развлекательных интернет-проектах. :)
P.S. Спасибо за внимание. А какой сервис предпочитаете вы? Жду ваши комментарии. :)
Давно я ничего не писал про WordPress. Сегодня поговорим о виджетах социальных сетей.
Man sitting at the table with laptop
В первом посте рассмотрим самые популярные социальные сети: FB, VK, G+ и OK.
FacebookДля виджетов Facebook есть множество расширений, но я за добавление кодом, так как в этом случае у вас есть гораздо больше возможностей настройки. Создать его можно с помощью официального сервиса Page Plugin . Заходим на страницу и заполняем параметры виджета.
Нажимаем «Получить код».
Код состоит из двух частей.
Копируем и вставляем последовательно обе части кода в виджет. Готово.
VKУ VK есть свой сервис Виджет для сообществ . Настройки элементарные: вид, ширина и цвет элементов. И не забудьте посмотреть другие виджеты VK , там много интересного.
G+Для получения кода для виджета G+ воспользуемся сервисом Google+ Badge . Авторизируемся через аккаунт Google, выбираем настройки и получаем код. Всё просто.
ОКДля Одноклассников похожая история, только настроек меньше. Заходим в сервис Виджет группы , заполняем ID группы и выбираем высоты и ширину. ID группы можно найти в настройках своего сообщества в ОК.
Во второй части я рассмотрю установку виджета твиттера и другие социальные сети. Спасибо за внимание.
Спасибо за то, что читаете! Подписывайтесь на меня в социальных сетях
С помощью социальных сетей сейчас продвигается множество сайтов, а опытные вебмастера прекрасно понимают, насколько важно интегрировать свои площадки с самыми популярными ресурсами. Независимо от тип сайта и его предназначения, кнопки и формы соц. сетей точно стоит установить.
Виджеты социальных сетей можно поставить несколькими способами. Самый трудоемкий процесс – это отдельное добавление через разделы для разработчиков. Чтобы облегчить эту задачу, можно воспользоваться специальными сервисами. Каким из способов воспользоваться, решать только вам.
Как установить виджеты соц. сетей?Вконтакте, на Одноклассниках и их аналогах есть специальные разделы для вебмастеров. В них предлагается по отдельности добавлять функционал на свои ресурсы. В ВК для этого нужно прокрутить любую страницу в самый низ и выбрать раздел «Разработчикам»:
Там вы найдете ещё один раздел, через который подключаются сайты и устанавливаются виджеты:
Выбор широкий, а если вам не нужно много разных функций, вы можете выбрать один из вариантов. Чаще всего на сайтах подключаются комментарии из социальных сетей. Это удобно, ведь пользователи могут без регистрации и ввода разных данных, оставить запись:
После выбора виджета, вам предоставляется специальный код, его нужно добавить в код сайта. Удобно, что здесь ещё и даются четкие инструкции по установке виджетов:
Даже новичок разберется, а если что-то не получается, смотрите подробную инструкцию по . Даже если будете пользоваться другими соц. сетями, разницы нет, выполняются одни и те же действия.
Сервисы виджетов от социальных сетейНеудобно добавлять по отдельности каждый виджет, да и не всегда хочется разбираться с кодами. Есть более простой способ поставить их на своем сайте, за счет специальных сервисов. Кроме этого, они помогают добавить оригинальные блоки. Например, в системе Socialcarousel можно поставить один виджет для всех социальных сетей:
Интересный вариант, но лучше использовать более популярные сервисы, такие как Pluso. В них доступны кнопки соц. сетей с гибкими настройками. Можно установить определенные проекты и выбрать оформление кнопок:
С помощью настроек можно сделать блок, чтобы он идеально вписывался в дизайн сайта. Экспериментируйте и пробуйте несколько вариантов отображения, чтобы выбрать лучший вид:
Современное общество привыкло к соц. сетям и активно ими пользуется, поэтому интеграция вашего ресурса точно не будет лишней. Повышенное удобство использования сайта сказывается на поведенческих факторах. Только не забудьте поставить виджеты всех социальных сетей, ведь ваши посетители могут быть поклонниками не только Одноклассников или Вконтакте.
Добавить виджеты социальных сетей легко, а если они хоть как-то помогают в развитии, то почему бы этим не воспользоваться? В заключение хотелось бы ещё посоветовать . Они тоже помогают добавлять виджеты и расширить возможности пользователей.
Плюсы:
По заявлению разработчиков, новые социальные кнопки заточены под Retina мониторы . Все остальное, на первый взгляд, осталось прежним. К сожалению, в конструкторе среди доступных вариантов я не нашел кнопок со счетчиком, хотя в стандартной редакции Pluso они есть.
Не знаю, заменят ли они новым конструктором старый, но, на данный момент, одновременно работают оба по разным ссылкам.
Есть платные и бесплатные виджеты. В бесплатном аккаунте доступны только наиболее простые варианты. В платном доступно намного больше концепций оформления таких как: адаптивные кнопки , кнопки с различными счетчиками и много чего другого.
Данный вариант для наших людей, думаю, плохо подходит, так как за навороты нужно будет заплатить, а на отечественном рынке можно найти все то же самое, но бесплатно.
В конструкторе Add This имеется огромный список доступных социальных сетей, включая Вконтакте, Мой Мир и Одноклассники. Есть плагин для .
Как заявляют разработчики, их детище оптимизировано и поисковики полюбят ваш сайт. Не знаю, сколько здесь правды.
Если вам не нужно наворотов, этот вариант именно для вас.
Shareaholic предлагает несколько новых концепций share-кнопок. Лично мне понравилась стрелочка над кнопками (стрелки - очень сильный маркетинговый инструмент), но, к сожалению, надпись на английском, так что для нашего народа не подходит. Среди доступных социальных сетей есть Вконтакте .
Все мы, занимаясь своим проектом, хотим как можно быстрее и максимально полно донести информацию до наших читателей. Поэтому стараемся разместить всё это там, где это будет всегда на глазах – в сайдбаре. И поэтому, там постоянно не хватает места. А нам ещё нужно и виджеты всех социалок туда поместить. Вот для этого и нужно воспользоваться сервисом Социальная карусель – все виджеты социальных сетей в одном
. Обо всех его преимуществах и особенностях настройки и поговорим ниже.
Часто мы сталкиваемся с проблемой размещения различных рекламных баннеров, партнёрской информации, своей подписки, своих инфопродуктов, информации о рубриках, статьях и комментариях на блоге. И, конечно же, размещения, так популярных сейчас, виджетов социалок. И всю эту лавину информации необходимо разместить на видном месте. И чаща всего этим местом становиться именно сайдбар.
Классически, все используют двухколоночные шаблоны (поле и сайдбар с правой стороны). Увеличение количества колонок я считаю не совсем правильным, потому что это сильно загромождает пространство и негативно влияет на поведенческие факторы посетителей.
Кстати, в заголовке указано Часть 1, потому, что это первый пост из серии об экономии места в сайдбаре. В следующих постах рассмотрю использование функции ротации баннеров и использование табов для улучшения юзабилити сайта. Поэтому подписывайтесь на обновления блога .
Нет необходимости доказывать, что участие и продвижение своего бренда в социальных сетях имеет сейчас очень большое значение. Поэтому крайне важно, чтобы они были представлены на сайте. И поэтому я задался вопросом, как же реализовать совмещение всех виджетов социалок в одном месте. И о чудо, я наткнулся на решение этого вопроса. Встречайте…
Социальная карусель – все виджеты социальных сетей в одном “флаконе”. Экономим место в сайдбареЭто бесплатный сервис , благодаря которому есть возможность существенно сэкономить место в сайдбаре нашего проекта. Хочу отметить, что этот сервис даёт возможность размещения виджета не только на движке WordPress, но и на рукописных сайтах путём вставки html -кода. Все виджеты таких популярных сетей как: , Facebook, Google+, YouTube и Twitter – реализованы в одном виджете в виде табов. Визуально это выглядит так:
Давайте же приступим к ознакомлению. Сервис виджета находиться .
Много о настройках говорить не буду, его разработчик позаботился о качественном разъяснении того, как его нужно настраивать. Инструкция представлена видеороликами, где достаточно подробно нас знакомят с особенностями его установки на сайт. Особенности есть, но они не критичные и решаются достаточно легко. Самое главное, что править код вам практически не придётся. Сервис всё сделает за вас.
Проходим стандартную процедуру регистрации. Заходим на сервис. Нажимаем – Мои виджеты (пункт 1), затем – Создать новый виджет (пункт 2). Заполняем поле, как он будет называться и вносим адрес нашего сайта (пункт 3). Сохряняем (пункт 4).
Попадаем в следующую вкладку, где уже проходит непосредственно конструирование. Нашему виджету присваивается идентификационный номер. Если вы планируете устанавливать его через плагин WordPress, то нужно выставить галочку в этом поле (пункт 1). Проставляем необходимые нам размеры и ставим автопереключение его вкладок (они будут поочерёдно пролистываться через заданный интервал времени) (пункт 2). В форме виджета, снизу, будет ссылка на разработчика и нам предлагают за деньги её убрать (пункт 3).
Приступаем непосредственно к самим социальным сетям. Стрелками можно задавать очередность нахождения вкладок (пункт 4). Нажимаем на красную кнопку, чтобы перейти к настройке самих социальных сетей (пункт 5). Вы можете сами выбрать, какие из них будут участвовать в показе (бывают разные ситуации – проблемы с Google аккаунтом или страница ВКонтакте заморожена).
Ставим галочку, что будем использовать плагин для WordPress (пункт 1). Ставим галочку Включить автопереключение вкладок и задаём время их отображения (через сколько секунд будет перелистывание на следующую) (пункт 2). Затем самое интересное, потому, что эта информация не так очевидна. В виджете можно помещать именно группы и сообщества из социальных сетей, а не персональные страницы. Заполняем эти поля (пункт 3). Правильность установки контролируем, нажимая кнопку Предпросмотр (пункт 4).
Чтобы посмотреть
ID
группы Вконтакте
, заходим в неё, подводим мышкой к Участники
, затем правой кнопкой мыши Копировать ссылку
и вставляете её в адресную строку. Последние цифры в адресе – это и есть ID группы. Есть. Проставляем её в нашем поле ВКонтакте.
Настриваем ID виджета для Twitter . Заходим на свою страничку. Затем переходим в правый верхний угол – Настройки . Из всплывающего меню вибираем – Виджеты . Настраиваем необходимый по стилистике и размеру виджет, и в новом сгенерированном коде в окне находим строку с ID. Цифры после неё и есть наш ID виджета для Twitter.
Чтобы посмотреть ваш логин пользователя на YouTube канале , автоизируемся в Google+ и переходим по этой ссылке . Берём ID и вставляем его в форму.
Чтобы посмотреть ID на Google + , авторизируемся там, заходим в Профиль и в адресной строке можно увидеть цифры. Их и нужно вставить в поле в форме.
Для Facebook (важно!), копируем не ссылку профиля, не ссылку группы, а именно ссылку страницы. Моя страница на Facebook выглядит так:
Всё. Форму заполнили. Нажимаем Сгенерировать код
. Вот у нас такой получился код. Копируем его. Теперь у нас есть 2 варианта его установки на сайте.
1
Вариант
. Через плагин для WordPress. Чтобы его скопировать, заходим в Плагин для вордпресс
, лайкаем по любой из социальных закладок и его скачиваем.
Затем стандартно устанавливаем на движок и активируем. Затем Настройки – Социальная карусель
. Вставляем наш код, прописываем его ID, выставляем размеры виджета и сохраняем.
Заходим в Внешний вид – Виджеты
(пункт 1-2). Перетаскиваем в сайдбар виджет Текст
и помещаем в него следующий код вывода виджета социальных сетей:
Готово. Любуемся и наслаждаемся результатами трудов.
2
Вариант
. Этот плагин стал у меня конфликтовать с каким-то, из уже установленных. Тем более, тренд последнего времени – это избавление от лишнего и экономия места. Поэтому плагин я снёс, а поместил наш сгенерированный код в файл своей темы header.php
перед закрывающим тегом
. Получилось примерно так:
Мой сгенерированный код
Виджет сайдбара с выводом так и оставил. Получившийся результат можете посмотреть здесь на блоге с правой стороны. Довольно качественно исполнен и имеет огромный плюс – экономит наше место.
На этом всё. Отличный сервис, главное БЕСПЛАТНЫЙ , позволяющий существенно улучшить юзабилити сайта. Думаю, Вам он понравиться. Сегодня мы сэконимили место в нашем сайдбаре установив виджет сервиса Социальная карусель – все виджеты социальных сетей в одном . Если будут вопросы, обращайтесь и отзывы тоже не забывайте оставлять. Подписывайтесь на обновления блога. До скорых встреч.
Напоследок, видео о сервисе смотрим:
Читайте ещё интересное на блогеХотите в ТОП? Поможет уникальность картинки. Используем сервис TinEye