Как добавить виджет социальной сети css. Виджет социальные иконки для групп, страниц и сообществ. WordPress. Преимущества и недостатки сервисов

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

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

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

Кстати, в заголовке указано Часть 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

Плюсы:

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

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

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

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