Экономия места в сайдбаре (Часть 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>. Получилось примерно так:

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

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

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

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

Читайте ещё интересное на блоге
Как через интернет передать получателю файл большого размера? Встречайте, DropMeFiles
Хотите в ТОП? Поможет уникальность картинки. Используем сервис TinEye
Нужны ли полезные привычки? Конечно. Так растёт наша личная эффективность
Неккоректно работает RSS лента блога? Убираем ошибки синтаксического анализа XML
Заработок на Appcent. Скачать мобильное приложение и получить за это деньги
Знакомьтесь - сервисы облачного хранения данных. Используйте облако данных, живите спокойно
Понравилась статья? Поделитесь с друзьями!

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

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

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

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

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

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

Comments are closed.


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

Хостинг