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

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

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

Код вставки виджета сообщества Facebook можно получить на странице разработчика . Здесь заполняем форму с настройками виджета:

После настроек нажмите кнопку Get code (получить код) и скопируйте оба поля в нужное место на сайте.

Для того, чтобы добавить twitter -ленту на сайт, зайдите на страницу (Настройки->Виджеты-> Создать новый). Если вы вошли с профиля того аккаунта, виджет которого хотите создать, то у вас уже будет представлен готовый его вариант, который при необходимости можно подкорректировать. Ширина блока адаптивная , то есть виджет будет подстраиваться под ширину блока, в котором его разместят, регулировать можно лишь высоту. Далее нажмите кнопку «Создать виджет» и скопируйте появившийся код.

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

Для рунета наиболее популярными являются виджеты комментариев Вконтакте, причина тому очевидна.

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

При этом к группе можно добавить нескольких администраторов. Для этого достаточно зайти на страницу настроек и в администрируемых приложениях для нужного выбрать пункт «Редактировать». Далее во вкладке «Руководство» добавить нужного человека.

Второй способ: после вставки блока на сайт нажмите на ссылку Администрирование -> Назначить администраторов, которая перебросит вас на нужную страницу ВКонтакте.

На странице настроек блока комментариев устанавливаем нужные параметры (url менять не обязательно) и нажимаем кнопку “Get code ”.

Чтобы добавить администраторов к комментариям, дополнительно необходимо прописать мета-тег, в который вместо YOUR_FACEBOOK_USER_ID нужно вставить ID вашего профиля.

property = "fb:admins" content = "{YOUR_FACEBOOK_USER_ID}" />

Если администраторов должно быть несколько, их ID достаточно перечислить через запятую.

При возникновении каких-либо проблем или вопросов, задавайте их в комментариях или обращайтесь за помощью к нашим специалистам. Мы работаем практически с любыми системами управления сайтом!

На чтение 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(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); }})();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В последнее время каждый второй (если не первый) заказчик в требованиях по разработке сайта просит непременно связать его с социальными сетями. «Социальные» кнопки на сайте — средство номер 1 для привлечения целевой аудитории, распространения контента и пиара в целом. Причем совершенно бесплатное!

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

Если ваш сайт ориентирован на людей которые общаются популярных соц. сетях, например, Вконтакте, Twitter, Instagramm, Facebook, Google+, Pinterest и прочее, и вы хотите охватить их все, то чтобы не устанавливать кнопки каждой из них по отдельности, учитывая то, что они могут отличаться по размерам и дизайну, советуем воспользоваться сервисами-агрегаторами. Это простые и удобные инструменты, которые позволят посетителям сайта быстро делиться информацией со своими друзьями вне зависимости какой социальной сетью они пользуются. Ниже мы разберем наиболее популярные сервисы.