Как добавить виджет социальной сети. Кнопки социальных сетей. Сервисы виджетов от социальных сетей
В последнее время каждый второй (если не первый) заказчик в требованиях по разработке сайта просит непременно связать его с социальными сетями. «Социальные» кнопки на сайте — средство номер 1 для привлечения целевой аудитории, распространения контента и пиара в целом. Причем совершенно бесплатное!
Социальные сети предоставляют коды своих кнопок и виджетов для размещения на сайте, и прилагают инструкции по их установке в системе управления сайтом. Установить их позволяют любые CMS (операционные системы), главное гармонично вписать их в дизайн вашего сайта.
Каковы возможности и функции?
Если ваш сайт ориентирован на людей которые общаются популярных соц. сетях, например, Вконтакте, Twitter, Instagramm, Facebook, Google+, Pinterest и прочее, и вы хотите охватить их все, то чтобы не устанавливать кнопки каждой из них по отдельности, учитывая то, что они могут отличаться по размерам и дизайну, советуем воспользоваться сервисами-агрегаторами. Это простые и удобные инструменты, которые позволят посетителям сайта быстро делиться информацией со своими друзьями вне зависимости какой социальной сетью они пользуются. Ниже мы разберем наиболее популярные сервисы.
Кнопки социальных сетей Share Pluso
2 комментарияПараллельно с сайтом или блогом полезно вести группу в социальных сетях. Там вы можете выкладывать анонсы своих новых статей, делиться информацией по смежной тематике и просто писать свои мысли. А в ответ получите дополнительные приток посетителей.
Связать два этих проекта вам помогут виджеты социальных сетей для сайта. После несложной настройки в сайдбаре появятся ссылки на ваши группы, и люди смогут сразу подписаться на них.
В основном речь пойдет о том, как привязать группу в социальных сетях к вашему сайту. И разместить форму подписки в сайдбар, чтобы людям было проще подписаться на обновления. Но помимо этого некоторые соц.сети предлагают и другие полезные функции, о которых стоит упомянуть. Так что помимо этого рассмотрела и создание опросов, и лайки, и репосты, и комментарии от соц.сетей – информации много и вся полезная.
Но тут опять же стоит знать меру, ведь чем больше разных виджетов, тем дольше будет грузиться сайт и могут возникнуть проблемы.
Виджет группы вконтакте на сайт
Мне очень нравится соц.сеть вконтакте, так что начну именно с нее. Хотела рассказать только о том, как добавить виджет группы, но заодно рассмотрю и остальные – вдруг вас что-то еще заинтересует.
Чтобы получить доступ ко всем виджетам нужно зайти в раздел Настройки и внизу страницы нажать на кнопку Разработчикам.
На следующей странице выбираем среднюю иконку с надписью Подключение сайтов и виджетов.
И здесь можно посмотреть все виды виджетов для вашего сайта:
Виджет «Комментарии» — можно разместить блок с комментариями от ВК на вашем сайте, как это сделано у меня. Людям удобней и быстрей оставить запись в этой форме, чем вписывать имя и почту в стандартную. Да и при таких комментариях автоматически делается репост на стену комментатора, что будет для вас большим плюсом.
Настройки не сложные. Вам нужно вписать название сайта, адрес, выбрать тематику – это регистрация вашего сайта в системе. Один раз добавите, потом можно просто выбирать из списка.
Затем настройки непосредственно самой формы: выберите число комментариев, которые будут отображаться на странице (остальные будут под спойлером «показать другие комментарии»). Нажмите на подробнее возле Медиа, и можно отключить некоторые функции. Укажите ширину поля для комментария, чтобы она не была слишком короткой и не вылезала за края. Если сразу не угадали с шириной, можно исправить прямо в коде – замените цифры в «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 и тут заполните информацию о своей группе: ссылку на страничку, ширину и высоту виджета и внешний вид.
Когда вас устроит результат, просто нажмите «Получить код» и тут вам предложат два кода.
Сделайте резервную копию сайта, чтобы при ошибке быстро восстановить.
- Вставляем часть, над которой написано Include the SDK JavaScript on your page once, ideally right after the opening body tag — зайдите в админку, выберите Дизайн – Редактор и здесь найдите footer. Запустите окно поиска (ctrl + F) и найдите body. Нам нужно именно закрывающееся -< /body >. И строчкой выше, прямо над ним, вставляем код из верхнего окна. Сохранить.
- Вторую часть нужно вставить в виджетах. Для этого зайдите в Дизайн – Виджеты и перетащите виджет Текст в левую область и вставьте этот код. Проверьте работоспособность и чтобы все правильно отображалось.
Виджет твиттера на сайт
Напоследок рассмотрю и добавление твиттера, хотя его добавляют довольно редко.
Зайдите в Настройки и выберите Виджеты.
После этого нажмите на большую кнопку Создать и настройте внешний вид виджета.
Обзор отечественных конструкторов и скриптов кнопок социальных сетей для сайтов, а также зарубежных аналогов. Коротко, понятно и наглядно.
Конструкторы кнопок социальных сетей для сайта
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. Получите код кнопок.
в 8:00 | Изменить сообщение | 6 комментариев |
С помощью социальных сетей сейчас продвигается множество сайтов, а опытные вебмастера прекрасно понимают, насколько важно интегрировать свои площадки с самыми популярными ресурсами. Независимо от тип сайта и его предназначения, кнопки и формы соц. сетей точно стоит установить.
Виджеты социальных сетей можно поставить несколькими способами. Самый трудоемкий процесс – это отдельное добавление через разделы для разработчиков. Чтобы облегчить эту задачу, можно воспользоваться специальными сервисами. Каким из способов воспользоваться, решать только вам.
Как установить виджеты соц. сетей?
Вконтакте, на Одноклассниках и их аналогах есть специальные разделы для вебмастеров. В них предлагается по отдельности добавлять функционал на свои ресурсы. В ВК для этого нужно прокрутить любую страницу в самый низ и выбрать раздел «Разработчикам»:
Там вы найдете ещё один раздел, через который подключаются сайты и устанавливаются виджеты:
Выбор широкий, а если вам не нужно много разных функций, вы можете выбрать один из вариантов. Чаще всего на сайтах подключаются комментарии из социальных сетей. Это удобно, ведь пользователи могут без регистрации и ввода разных данных, оставить запись:
После выбора виджета, вам предоставляется специальный код, его нужно добавить в код сайта. Удобно, что здесь ещё и даются четкие инструкции по установке виджетов:
Даже новичок разберется, а если что-то не получается, смотрите подробную инструкцию по . Даже если будете пользоваться другими соц. сетями, разницы нет, выполняются одни и те же действия.
Сервисы виджетов от социальных сетей
Неудобно добавлять по отдельности каждый виджет, да и не всегда хочется разбираться с кодами. Есть более простой способ поставить их на своем сайте, за счет специальных сервисов. Кроме этого, они помогают добавить оригинальные блоки. Например, в системе Socialcarousel можно поставить один виджет для всех социальных сетей:
Интересный вариант, но лучше использовать более популярные сервисы, такие как Pluso. В них доступны кнопки соц. сетей с гибкими настройками. Можно установить определенные проекты и выбрать оформление кнопок:
С помощью настроек можно сделать блок, чтобы он идеально вписывался в дизайн сайта. Экспериментируйте и пробуйте несколько вариантов отображения, чтобы выбрать лучший вид:
Современное общество привыкло к соц. сетям и активно ими пользуется, поэтому интеграция вашего ресурса точно не будет лишней. Повышенное удобство использования сайта сказывается на поведенческих факторах. Только не забудьте поставить виджеты всех социальных сетей, ведь ваши посетители могут быть поклонниками не только Одноклассников или Вконтакте.
Добавить виджеты социальных сетей легко, а если они хоть как-то помогают в развитии, то почему бы этим не воспользоваться? В заключение хотелось бы ещё посоветовать . Они тоже помогают добавлять виджеты и расширить возможности пользователей.
Давно я ничего не писал про WordPress. Сегодня поговорим о виджетах социальных сетей.
Man sitting at the table with laptop
В первом посте рассмотрим самые популярные социальные сети: FB, VK, G+ и OK.
Для виджетов Facebook есть множество расширений, но я за добавление кодом, так как в этом случае у вас есть гораздо больше возможностей настройки. Создать его можно с помощью официального сервиса Page Plugin . Заходим на страницу и заполняем параметры виджета.
Нажимаем «Получить код».
Код состоит из двух частей.
Копируем и вставляем последовательно обе части кода в виджет. Готово.
VK
У VK есть свой сервис Виджет для сообществ . Настройки элементарные: вид, ширина и цвет элементов. И не забудьте посмотреть другие виджеты VK , там много интересного.
G+
Для получения кода для виджета G+ воспользуемся сервисом Google+ Badge . Авторизируемся через аккаунт Google, выбираем настройки и получаем код. Всё просто.
ОК
Для Одноклассников похожая история, только настроек меньше. Заходим в сервис Виджет группы , заполняем ID группы и выбираем высоты и ширину. ID группы можно найти в настройках своего сообщества в ОК.
Во второй части я рассмотрю установку виджета твиттера и другие социальные сети. Спасибо за внимание.
Спасибо за то, что читаете! Подписывайтесь на меня в социальных сетях