Триколор 

Кнопки социальных сетей. Виджеты социальных сетей Виджет мы в социальных сетях

Давно я ничего не писал про 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 группы можно найти в настройках своего сообщества в ОК.

Во второй части я рассмотрю установку виджета твиттера и другие социальные сети. Спасибо за внимание.

Спасибо за то, что читаете! Подписывайтесь на меня в социальных сетях

  • Добавление иконок на профили и группы в социальных сетях

    • Нет никакой тайны в том, что уже много лет существуют особые кнопки социальных сетей, установка которых на сайте позволяет увидеть прирост трафика, а заодно способствует развитию PR-кампании своего ресурса. Расшаривание материалов обеспечивает охват гигантской аудитории, которая состоит из потенциальных клиентов, читателей и подписчиков.

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

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

    Расшаривание с помощью соц. кнопок позволяет увеличить посещаемость сайта до 20% !

    Преимущества и недостатки сервисов

    Эффективные инструменты для шаринга могут быть добавлены двумя способами:

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

    Все сервисы представляют собой площадки, где после ввода данных генерируется код, который необходимо разместить на веб-сайте.

    К основным преимуществам этих «помощников» можно отнести:

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

    Статистика переходов комфортно отслеживается в Яндекс.Метрике и Google Analytics.

    И все же ничего идеального не бывает. Сервисы социальных кнопок, в отличие от официальных решений, имеют ряд недостатков:

    • Снижение скорости загрузки страницы, что может отрицательно сказаться и на позициях сайта при его ранжировании в поисковой выдаче, и на объеме продаж;
    • Сбои и ошибки в работе серверов, ведущие к длительной загрузке кнопок или их временной недоступности;
    • Периодическое появление рекламы;
    • Отсутствие стабильного алгоритма работы через AJAX;
    • Возможное использование памяти браузеров;
    • Наличие сомнительного трафика;
    • Непредставление гарантий безопасности данных пользователей.
    • Плагины разных платформ могут отличаться по дизайну и размерам, что усложняет их гармоничное сосуществование на одной странице;
    • Процесс занимает больше времени, требует некоторых подготовительных действий и начальных знаний html.
    Обзор сервисов кнопок социальных сетей

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

    Яндекс кнопки соц сетей

    Варианты внешнего вида:

    Список доступных для шаринга сетей:

    Первичная настройка отображения кнопок соц сетей от Яндекса и готовый код:

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

    Pluso

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

    Окно предварительного просмотра и дополнительных опций:

    Произведя нехитрые манипуляции по выбору нужных соц. сетей, иконок и их настроек, можно увидеть код:

    (function() { if (window.pluso)if (typeof window.pluso.start == "function") return; if (window.ifpluso==undefined) { window.ifpluso = 1; var d = document, s = d.createElement("script"), g = "getElementsByTagName"; s.type = "text/javascript"; s.charset="UTF-8"; s.async = true; s.src = ("https:" == window.location.protocol ? "https" : "http") + "://share.pluso.ru/pluso-like.js"; var h=d[g]("body"); h.appendChild(s); }})();

    Для корректного отображения сервиса полученный скрипт с прилагающимися данными достаточно скопировать и установить в верстку сайта в выбранном месте.

    Наряду с инструментами для шаринга дает возможность установить специальные служебные элементы: «печать», «в закладки» и т.д.

    Uptolike

    Посетители могут выбрать 4 вида кнопки, один из которых – виджет (с разным положением относительно страницы).

    Скрипт социальных кнопок выглядит так:

    Для работы с виджетом код сложнее:

    window.informerPosition = {vert:"top",hor:"left"}

    Для установки достаточно поместить данные в шаблон.

    Pip.Qip.ru

    Представитель «моментальных» сервисов генерации кодов для установки социальных кнопок - Pip.Qip . Простота здесь лишь подчеркивает комфорт.

    Для получения заветного кода нужно:

  • Указать тип площадки для размещения;
  • Выбрать стиль из списка;
  • Нажать «Уже хочу!» – и лицезреть готовый код внизу страницы.

    • Останется лишь поместить его в код сайта.

    Добавление кнопок соц сетей вручную

    Альтернативой безусловно удобным, но не всегда приемлемым сервисам социальных кнопок являются сами соц. сети, которые дают возможность вручную добавить кнопки на веб-сайт, используя плагины и API.

    Знаменитый «Вконтакте» генерирует коды кнопок расшаривания по этому адресу.

    С помощью виджета можно выбрать вид будущей кнопки и «прикрутить» счетчик (пункт «стиль»), придумать оригинальное название («текст») и получить заветный код.

    Первую часть кода следует поместить внутри тега :

    Вторую – в место непосредственного расположения кнопки:

    Методика получения официальных кнопок Facebook еще более проста и понятна. На сайте можно воспользоваться

    Плюсы:

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

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

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

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

    На чтение 3 мин. Опубликовано 26.08.2016

    Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress. Сегодня вы узнаете как очень просто добавить на свой сайт виджет социальные иконки. С помощью данного виджета вы сможете добавлять на сайт не только социальные иконки, но и просто различные иконки на любые сайты и страницы. В настройках виджета у вас будет на выбор более 400 различных иконок. Вы сможете вставлять к каждой иконки любой URL адрес, соцсети или просто любого сайта. Можно будет выбрать цвет и размер для иконки. Есть три стиля на выбор, круглый, квадратный, с закруглёнными краями.

    Установить плагин Social Icons Widget by WPZOOM вы сможете прямо из админ-панели wordpress. Перейдите на страницу: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.



    – Title, можете указать заголовок для виджета.

    – Description, можете указать описание для виджета.

    – Show icon labels, поставьте здесь галочку, чтобы добавить к иконкам описание.

    – Open links in new tab, поставьте здесь галочку, чтобы открывать ссылки в новом окне.

    – Icon Style, здесь два стиля для иконок, с фоном и без фона.

    – Icon Background Style, здесь вы сможете выбрать стиль для фона иконок, фон с закруглёнными углами, круглый фон и квадратный фон.

    – Icon Padding (pixels), здесь можно указать размер набивки иконок.

    – Icon Size (pixels) , здесь можно задать размер иконок.

    – Icons, у вас по умолчанию будут отображаться три соц. иконки, для facebook, twitter и instagramm. Вам нужно добавить свои ссылки на свои страницы или сообщества в данных соцсетях. В конце сохраните виджет

    Вы также можете добавлять дополнительные иконки. Чтобы добавить иконку нажмите на кнопку – Add more . У вас появится поле для новой иконки, чтобы выбрать иконку нажмите на крестик в чёрном кружке.

    Далее, у вас откроется окно для выбора иконок. Выберите иконку, выберите цвет для иконки, можно выбрать категорию иконок. У вас будет на выбор 4 категории с различными иконками, более 400 штук. В конце нажмите внизу на кнопку – Save .


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

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

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

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