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

Плюсы:

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

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

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

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

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 >. И строчкой выше, прямо над ним, вставляем код из верхнего окна. Сохранить.
  • Вторую часть нужно вставить в виджетах. Для этого зайдите в Дизайн – Виджеты и перетащите виджет Текст в левую область и вставьте этот код. Проверьте работоспособность и чтобы все правильно отображалось.
  • Виджет твиттера на сайт

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

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

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

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

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

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

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

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

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

    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. В них доступны кнопки соц. сетей с гибкими настройками. Можно установить определенные проекты и выбрать оформление кнопок:

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

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

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