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

1. Виджеты групп

Виджет группы ВКонтакте

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

Виджет сообщества Facebook

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

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


Виджет Twitter ленты

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


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

2. Виджеты комментариев

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

Виджет комментариев Вконтакте

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


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

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

Виджеты комментариев Facebook

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Обзор сервисов кнопок социальных сетей

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

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

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

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

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

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

    Pluso

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

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

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

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

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

    Uptolike

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

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

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

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

    Pip.Qip.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

    Как установить виджеты соц. сетей?

    Вконтакте, на Одноклассниках и их аналогах есть специальные разделы для вебмастеров. В них предлагается по отдельности добавлять функционал на свои ресурсы. В ВК для этого нужно прокрутить любую страницу в самый низ и выбрать раздел «Разработчикам»:

    Там вы найдете ещё один раздел, через который подключаются сайты и устанавливаются виджеты:

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

    После выбора виджета, вам предоставляется специальный код, его нужно добавить в код сайта. Удобно, что здесь ещё и даются четкие инструкции по установке виджетов:

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

    Сервисы виджетов от социальных сетей

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

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

    С помощью настроек можно сделать блок, чтобы он идеально вписывался в дизайн сайта. Экспериментируйте и пробуйте несколько вариантов отображения, чтобы выбрать лучший вид:

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

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

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


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

    Соцкнопки необходимы, это очевидно. Вопрос в другом - какие выбрать? Мы для вас протестировали ТОП 5 различных сервисов для добавления кода кнопок на сайты. Цель - выявить оптимальный и показать его в деталях. Начнём с отборочного этапа.

    Выбор лучшего сервиса социальных кнопок

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

    Состав команды аттестуемых таков:

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

    Особенности кнопок uSocial

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


    Словесного сравнения многим окажется мало. Поэтому мы составили сравнительную таблицу кнопок от uSocial и остальных дебютантов (используемая шкала оценки - от 1 до 5). Все эти данные получены в процессе тестирования.

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

    Инструкция как установить кнопки социальных сетей на сайт

    Для размещения социальных кнопочек от uSocial на своём сайте необходимо выполнить несколько простых шагов:

    Шаг-1

    Шаг-2

    Собираем набор социальных кнопок. Можно выбрать отображаемые сервисы социальных сетей, форму и стиль кнопок.

    Здесь же можно активировать кнопку "Вверх", включить поддержку мобильных устройств, подключить сервисы Viber, WhatsApp, Telegram, SMS.

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

    Шаг-3

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

    Шаг-4

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

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

    Как увеличить КПД соцбара?

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

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

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

    1. Facebook и Вконтакте используют Open Graph protocol:





    3. Для Twitter код выглядит так:



    4. Для Google+ так:

    - cсылка на профиль автора в Google+
    - название сайта
    - текст сниппета (до 40 символов)
    - описание сайта
    - путь к файлу изображения

    Инструменты для работы с микроразметкой.