Экономия места в сайдбаре (Часть 1). Как все виджеты социальных сетей сделать в одном?

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

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

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

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

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

Социальная карусель – все виджеты социальных сетей в одном “флаконе”. Экономим место в сайдбаре

Это бесплатный сервис, благодаря которому есть возможность существенно сэкономить место в сайдбаре нашего проекта. Хочу отметить, что этот сервис даёт возможность размещения виджета не только на движке WordPress, но и на рукописных сайтах путём вставки html-кода. Все виджеты таких популярных сетей как: ВКонтакте, Facebook, Google+, YouTube  и Twitter – реализованы в одном виджете в виде табов. Визуально это выглядит так:

Социальная карусель - виджет
Давайте же приступим к ознакомлению. Сервис виджета находиться ЗДЕСЬ.

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

Проходим стандартную процедуру регистрации. Заходим на сервис. Нажимаем – Мои виджеты (пункт 1), затем – Создать новый виджет (пункт 2). Заполняем поле, как он будет называться и вносим адрес нашего сайта (пункт 3). Сохряняем (пункт 4).

Социальная карусель - настройкиПопадаем в следующую вкладку, где уже проходит непосредственно конструирование. Нашему виджету присваивается идентификационный номер. Если вы планируете устанавливать его через плагин WordPress, то нужно выставить галочку в этом поле (пункт 1). Проставляем необходимые нам размеры и ставим автопереключение его вкладок (они будут поочерёдно пролистываться через заданный интервал времени) (пункт 2). В форме виджета, снизу, будет ссылка на разработчика и нам предлагают за деньги её убрать (пункт 3).

Социальная карусель ID сетейПриступаем непосредственно к самим социальным сетям. Стрелками можно задавать очередность нахождения вкладок (пункт 4). Нажимаем на красную кнопку, чтобы перейти к настройке самих  социальных сетей (пункт 5). Вы можете сами выбрать, какие из них будут участвовать в показе (бывают разные ситуации – проблемы с Google аккаунтом или страница ВКонтакте заморожена).

Ставим галочку, что будем использовать плагин для WordPress (пункт 1). Ставим галочку Включить автопереключение вкладок и задаём время их отображения (через сколько секунд будет перелистывание на следующую) (пункт 2). Затем самое интересное, потому, что эта информация не так очевидна. В виджете можно помещать именно группы и сообщества из социальных сетей, а не персональные страницы. Заполняем эти поля (пункт 3). Правильность установки контролируем, нажимая кнопку Предпросмотр (пункт 4).

Социальная карусельЧтобы посмотреть ID группы Вконтакте, заходим в неё, подводим мышкой к Участники, затем правой кнопкой мыши Копировать ссылку и вставляете её в адресную строку. Последние цифры в адресе – это и есть ID группы. Есть. Проставляем её в нашем поле ВКонтакте.

Настриваем ID виджета для Twitter. Заходим на свою страничку. Затем переходим в правый верхний угол – Настройки. Из всплывающего меню вибираем – Виджеты. Настраиваем необходимый по стилистике и размеру виджет, и в новом сгенерированном коде в окне находим строку с ID. Цифры после неё и есть наш ID виджета для Twitter.

Чтобы посмотреть ваш логин пользователя на YouTube канале, автоизируемся в Google+ и переходим по этой ссылке. Берём ID и вставляем его в форму.

Чтобы посмотреть ID на Google+, авторизируемся там, заходим в Профиль и в адресной строке можно увидеть цифры. Их и нужно вставить в поле в форме.

Для Facebook (важно!), копируем не ссылку профиля, не ссылку группы, а именно ссылку страницы. Моя страница на Facebook выглядит так:

Facebook страницаВсё. Форму заполнили. Нажимаем Сгенерировать код. Вот у нас такой получился код. Копируем его. Теперь у нас есть 2 варианта его установки на сайте.

Социальная карусель - код1Вариант. Через плагин для WordPress. Чтобы его скопировать, заходим в Плагин для вордпресс, лайкаем по любой из социальных закладок и его скачиваем.

Социальная карусель плагинЗатем стандартно устанавливаем на движок и активируем. Затем Настройки – Социальная карусель. Вставляем наш код, прописываем его ID, выставляем размеры виджета и сохраняем.

Экономия места в сайдбареЗаходим в Внешний вид – Виджеты (пункт 1-2). Перетаскиваем в сайдбар виджет Текст и помещаем в него следующий код вывода виджета социальных сетей:

Готово. Любуемся и наслаждаемся результатами трудов.

Wordpress сайдбар социальные сети2Вариант. Этот плагин стал у меня конфликтовать с каким-то, из уже установленных. Тем более, тренд последнего времени – это избавление от лишнего и экономия места. Поэтому плагин я снёс, а поместил наш сгенерированный код в файл своей темы header.php перед закрывающим тегом </head>. Получилось примерно так:

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

На этом всё. Отличный сервис, главное БЕСПЛАТНЫЙ, позволяющий существенно улучшить юзабилити сайта. Думаю, Вам он понравиться. Сегодня мы сэконимили место в нашем сайдбаре установив виджет сервиса Социальная карусель – все виджеты социальных сетей в одном. Если будут вопросы, обращайтесь и отзывы тоже не забывайте оставлять. Подписывайтесь на обновления блога. До скорых встреч.

Напоследок, видео о сервисе смотрим:

На связи был, Виталий Калинин!

Читайте ещё интересное на блоге
Для движения вперёд необходим порядок в голове. Для этого убирается лишняя информация
Повторяются теги заголовков. Что делать и как улучшить seo оптимизацию сайта?
Для бизнеса необходима подписная или продающая страница? Поможет плагин wPPage
Хотите сделать группу ВКонтакте? Кому и для чего необходима группа ВКонтакте?
Страница на Я.ру. Как создать и получить трафик из этой социальной сети Яндекса?
IFTTT - синхронизация приложений и сервисов. Автоматизируем рутинные процессы
Понравилась статья? Поделитесь с друзьями!

Оставьте свой первый комментарий и получите ценный подарок

Комментариев 6 на “Экономия места в сайдбаре (Часть 1). Как все виджеты социальных сетей сделать в одном?
  1. Спасибо автору блога! Видел на каком то блоге такую штучку, потом найти не мог. Ещё раз спасибо!

    • Пользуйтесь на здоровье. В следующей статье ещё одна “фишка” по экономии места в сайдбаре.

  2. Вроде все сделала, как написано, но на сайте только надпись “Загрузка карусели”.
    Доктор на сайте пишет:
    Вы либо не установили код скрипта на страницу, либо установлен старый / изменный код, который невозможно автоматически проверить…

    • Валентина, удалось ли разрешить проблему? У меня такая же проблема :sad:

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

Comments are closed.


Внимание! На блоге проводится конкурс лучшего комментатора за месяц!

Хостинг