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

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

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

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

Виджет группы вконтакте на сайт

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

Чтобы получить доступ ко всем виджетам нужно зайти в раздел Настройки и внизу страницы нажать на кнопку Разработчикам.

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

И здесь можно посмотреть все виды виджетов для вашего сайта:

Виджет «Комментарии» — можно разместить блок с комментариями от ВК на вашем сайте, как это сделано у меня. Людям удобней и быстрей оставить запись в этой форме, чем вписывать имя и почту в стандартную. Да и при таких комментариях автоматически делается репост на стену комментатора, что будет для вас большим плюсом.

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

Затем настройки непосредственно самой формы: выберите число комментариев, которые будут отображаться на странице (остальные будут под спойлером «показать другие комментарии»). Нажмите на подробнее возле Медиа, и можно отключить некоторые функции. Укажите ширину поля для комментария, чтобы она не была слишком короткой и не вылезала за края. Если сразу не угадали с шириной, можно исправить прямо в коде – замените цифры в «width: «665».

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

Если возникли сложности с размещением этого кода, можно добавить комментарии с помощью специального плагина VK Comments. Узнать ID можно в этом же разделе разработчикам, просто в верхнем меню выберите Мои приложения и откройте нужный сайт. Цифры в конце ссылки и будут вашим ID (к примеру, vk.com/editapp?id=123456).

Виджет «Запись на стене» — применяется редко, но может кому-то пригодится. С его помощью можно вставить пост из вконтакте в статью. Все лайки при этом сохраняются и отображаются на записи в группе. Еще один метод использования – дословно цитировать важную информацию, сразу давая ссылку на источник.

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

Виджет «Сообщества» — отличный способ связать свою группу и сайт, чтобы люди активней подписывались. Добавьте этот виджет в сайдбар и он всегда будет на глазах.

Ниже можно настроить цвет, если стандартные расцветки вас не устраивают. После этого копируйте код и вставляйте в виджет Текст, чтобы добавить в сайдбар. Либо в любое другое место на сайте, как вам будет удобно.

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

В варианте «Кнопка с текстовым счетчиком» вы можете самостоятельно выбрать надпись для кнопки.

Виджет «Рекомендации» работает только совместно с предыдущим. Он анализирует число лайков на статьях, и выводит список самых популярных записей. Настройки все интуитивно понятные: количество записей, за какой период выводятся данные (день, неделя, месяц) и текст над разделом (Понравилось/Интересно …. Людям).

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

Виджет «Подписаться на пользователя» выводит отдельную кнопку, которая позволяет одним кликом стать вашим подписчиком вконтакте. Речь не про группу, а именно про ваш аккаунт. Укажите ссылку на пользователя, на которого можно подписаться, а затем выберите внешний вид кнопки из 4 вариантов.

Вот и все виджеты виджеты вконтакте, которые можно разместить на сайте.

Виджет одноклассники на сайт

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

Настроек здесь не очень много, так что вы без труда разберетесь:

• Ширину и Высоту выбирайте сами по своим пожеланиями.
• ID группы – зайдите в свою группу, и посмотрите на адресную строку. Цифры в строчке и будет ваш ID (например, http://ok.ru/group/50582132228315). Замените цифры на свои.

Скопируйте код, затем зайдите в админку Дизайн – Виджеты, перетащите виджет Текст в левую область и вставьте этот код.

Виджет фейсбук на сайт

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

Затем перейдите в верхнем меню в раздел Docs и здесь найдите в списках Social Plugins.

Перейдите в раздел Page Plugin и тут заполните информацию о своей группе: ссылку на страничку, ширину и высоту виджета и внешний вид.

Когда вас устроит результат, просто нажмите «Получить код» и тут вам предложат два кода.

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

1. Вставляем часть, над которой написано Include the SDK JavaScript on your page once, ideally right after the opening body tag — зайдите в админку, выберите Дизайн – Редактор и здесь найдите footer. Запустите окно поиска (ctrl + F) и найдите body. Нам нужно именно закрывающееся -< /body >. И строчкой выше, прямо над ним, вставляем код из верхнего окна. Сохранить.
2. Вторую часть нужно вставить в виджетах. Для этого зайдите в Дизайн – Виджеты и перетащите виджет Текст в левую область и вставьте этот код. Проверьте работоспособность и чтобы все правильно отображалось.

Виджет твиттера на сайт

Напоследок рассмотрю и добавление твиттера, хотя его добавляют довольно редко.

Зайдите в Настройки и выберите Виджеты.

После этого нажмите на большую кнопку Создать и настройте внешний вид виджета.

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

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

2. Лёгкий способ получить ссылки на сайт - QIP.RU
Разместите кнопку на сайте и дайте посетителям возможность добавлять понравившиеся материалы сайта в закладки, блоги и соцсети. Три шага: где разметите кнопку (сайт, Blogger или WordPress), стиль кнопок (готовые варианты) и получить кнопку.

3. Кнопки для добавления контента в соцсети — Pluso
Разместите кнопки и дайте посетителям возможность делиться понравившимися страницами в соцсетях, а также печатать, отправлять письмо и добавлять закладки.

4. Сервис социальной активности — UpToLike
Кастомизированные кнопки соцсетей с возможностью задать цвет, форму, размер и спецэффекты. Дополнительные фишки - виджет расшаривания картинок PicShare, функция «Цитирование» и кастомизированная функция Following.

5. Одна кнопка ! — для всех сервисов закладок и соцсетей
Выберите вид кнопку. Где будет установлена кнопка: сайт, Blogger или WordPress. Добавьте кнопку.

Скрипты кнопок социальных сетей для сайта

1. Красивые социальные кнопки для сайта — goodshare.js
Отображение кнопок практически на любом устройстве. Чистый код. Краткая документация. SEO friendly.

2. Скрипт кнопок социальных закладок и сетей — Share42
Выберите размер и отметьте иконки сервисов, которые хотите использовать на сайте. Выберите нужные опции. Посмотрите, как это будет выглядеть и/или скачайте готовый скрипт. Установите скрипт на сайт WordPress, Drupal, другое.

3. Красивые кнопки «лайков» соцсетей с использованием jQuery — Social Likes
Скрипт кнопок «лайков» со счётчиками в едином стиле для соцсетей: Facebook, Twitter, ВКонтакте, Одноклассники, Мой мир, Google+ и Pinterest.

Зарубежные аналоги кнопок социальных сетей для сайта

1. Share Buttons — AddThis
Кнопки шаринга помогут вам увеличить аудитория сайта, путем привлечения посетителей с других ресурсов и соцсетей, через распространяемый контент.

4. Social Sharing — Po.st
Получить больше пользы от шаринга в соцсетях. Сервис позволит облегчить процесс шаринга в соцсетях для посетителей, что позволит увеличить органический трафик сайта.

5. Share Buttons for Any Website — AddToAny
Получите код кнопок социальных сетей для любого сайта. Выберите тип и стиль кнопок, укажите e-mail и другие опции или выберите одну из платформ: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad или FeedFlare. Получите код кнопок.

На чтение 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. Виджеты групп

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

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

Виджет сообщества 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 достаточно перечислить через запятую.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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