Меню

Кнопки соцсетей для сайта со счетчиком



uSocial

Социальные сервисы

uSocial

Социальные сервисы

Кнопки “Поделиться“

Эффект при наведении premium

Расположение

    сверху снизу слева справа статичное

Ориентация

Состояние бара

Размер

Счетчик

Кнопка вверх

Настройки мобильного вида

Не делиться текущей страницей

Привлечение внимания к кнопкам

Дополнительные настройки набора

Авторизация

Код для Вашего сайта

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

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

Информация об AppID

Для получения AppID и Secret key необходимо создать приложение разработчика на Одноклассниках и пройти модерацию.

Модерация приложения занимает

Остальные поля не обязательны для заполнения.

После создания приложения Вы получите письмо с данными AppID и Secret key для вставки в соотвествующие поля на uSocial.pro при создании социального замка.

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

Адрес для отправки сообщения:
api-support@ok.ru

Тема сообщения:
Внешнее приложение (Виджет публикации)

Текст сообщения:
Прошу предоставить доступ приложению с ID****** (указать ID Вашего приложения) к функции «Виджет публикации» https://apiok.ru/ext/publish
Адрес сайта приложения: адрес Вашего сайта
Цель получения доступа: использование сервиса https://usocial.pro/socialkey

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

Важно: не редактируйте приложение после того, как оно прошло модерацию.

Источник

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

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

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

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

Каковы возможности и функции?

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

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

Блок «Поделиться» от Яндекса

Яндекс разработал свой простой и удобный сервис кнопок социальных сетей – блок «Поделиться». Он позволяет сгенерировать код для добавления на сайт кнопок самых популярных соц сетей:

  • Вконтакте;
  • Facebook;
  • Twitter;
  • Одноклассники;
  • Мой Мир;
  • Livejournal;
  • Я.ру;
  • Friendfeed;
  • Мой круг;
  • Google+;
  • Pinterest;
  • Surfingbird.

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

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

Выбрав внешний вид блока «счетчики», вы получите кнопки сервисов с отображением числа сделанных репостов, т.е. сколько данной новостью человек уже поделилось в соответствующей соц. сети. Эта функция поддерживает наиболее популярные социальные сети (Вконтакте, Facebook, Twitter, Google+, Я.Ру, Мой Мир, Одноклассники.ru).

На сайте это выглядит следующим образом:

Если вы используете сервис Яндекс.Метрика, счетчик для контроля посещаемости сайта, то сможете без труда отслеживать статистику кликов по социальным кнопкам от Яндекс, что может быть полезным. Зачем нужны счетчики посещаемости читайте в статье «Счетчик посещаемости сайта: зачем он вам нужен?».

Читайте также:  Поверка счетчиков какой оквэд

Кнопки социальных сетей Share Pluso

Share Pluso проверенный бесплатный сервис, который позволит посетителям вашего сайта делиться интересными материалами в социальных сетях. Он позволяет установить кнопки социальных сетей, а так же отправить страницу на печать, добавить ее в закладки или отправить другу по e-mail.

Выглядит на сайте это следующим образом:

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

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

Так же на PLUSO имеются подразделы Блог и FAQ, где вы сможете найти ответы популярные вопросы, а так же инструкции по установке.

Кнопки «Мне нравится» и «Поделиться»

«Мне нравится» (Like) — самая популярная кнопка ,которая позволяет посетителям сайта выразить отношение к материалу.

«Поделиться», «рассказать друзьям» или «твитнуть» позволяет пользователю, поместить ссылку на стене своей странички в социальной сети или группе.

Кнопки этого типа есть во всех популярных социальных сетях:

Источник

Выбор и установка кнопок соцсетей для сайта

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

Содержание:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

И все же эти способы – самые востребованные и удобные варианты для быстрой установки скриптов кнопок «поделиться в социальных сетях».

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

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

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

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

Читайте также:  Счетчик электроэнергии цэ6803в технические характеристики

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

  1. Со счетчиком расшариваний;
  2. С выпадающим меню;
  3. Мелкие иконки в стиле минимализма.

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

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

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

Pluso

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

Доступные стили и социальные сети:

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

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

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

Uptolike

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

Готовые иконки могут иметь такой вид:

Можно выбрать все значимые современные сети:

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

После выполнения всех процедур по выбору и регулировке параметров следует нажать «Сгенерировать код», после чего будет предложено ввести свой e-mail для последующей отправки на него кода для установки.

Полученный скрипт и все остальные данные размещаются в html-коде сайта.

Share42

Share42 – понятный пошаговый генератор создания красивых кнопок социальных сетей.

Сервис предлагает быстрое формирование блоков, которое включает:

  1. Выбор необходимых соцсетей и размера иконок;
  2. Первичную настройку панели и другие опции;

Функции предварительного просмотра и скачивания;

Установку блока на свой ресурс: необходимо скачать архив (со скриптом), распаковать его, загрузить папку «share42» на свой сайт и указать путь до нее (http://site.name/share42/). Далее нужно выбрать тип ресурса и вставить в шаблон полученный в последнем окне код:

Sharethis

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

Функционал конструктора – все, что нужно для быстрого создания панелей. Принцип работы:

    После определения типа блоков («inline» или «sticky») осуществляется переход к выбору самих иконок (методом клика);

  • Дополнительные настройки (размер, вид, наличие счетчика, тип обрамления);
  • Финальное получение кода (требует регистрации).

    Addthis

    Самый известный иностранный сервис с услугами для размещения кнопок социальных сетей на сайте. Для доступа к полному функционалу необходимо пройти процедуру быстрой регистрации. И оно того стоит!

    Addthis превращается в мощный и полный полезных «фишек» наглядный конструктор с превью в режиме онлайн.

    Кнопки соц. сетей на сайте могут быть:

    1. Скользящими (floating);
    2. Зафиксированными на странице (inline);
    3. Раскрывающимися при наведении (expanding);
    4. Баннерами и слайдерами.

    Все вариации полностью адаптированы для мобильных устройств.

    После выбора типа блока и нажатия «Continue» левая панель окна принимает следующий вид:

    Здесь можно выбрать счетчик (share counters), посмотреть список всех доступных кнопок шаринга социальных сетей (select your own + add more services), настроить дизайн (design) и дополнительные функции (скрытие блоков и т.д.)

    Для получения кода достаточно нажать «Save & Continue». На следующей странице появится скрипт вида

    код самого блока

    и подробная инструкция по установке скрипта для разных шаблонов (включая доступные плагины).

    Social-Likes

    Social-likes – компактный и простой скрипт социальных кнопок «лайк» со счетчиком. На странице можно выбрать нужные сети, тип и расположение иконок, их скин и внешний вид.

    Дальнейшие действия для установки:

    1. Нажать «скачать кнопки»;
    2. Сохранить архив на ПК;
    3. В шаблоне сайта создать папку «social» и вложить в нее распакованные файлы архива;
    4. Перед прописать:

    Название файла .css может иметь другое значение (зависит от выбора, сделанного на сайте).

  • Использовать другую часть кода и вставить ее в шаблон для размещения кнопок:
  • Odnaknopka.ru

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

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

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

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

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

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

    Pip.Qip.ru

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

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

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

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

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

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

    Кнопка поделиться Вконтакте

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

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

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

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

    Кнопка поделиться Facebook

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

    Выбор функций ограничивается размером самой кнопки и тремя вариантами ее «композиции» (дизайна).

    После нажатия кнопки «Получить код» на экране появится окно с двумя «шагами»:

    Шаг 2 – Добавляем Javascript.

    Встраивается в html-код страницы единожды. Лучшее место – сразу после тега .

    Шаг 3 – сам код кнопки и его размещение.

    Кнопка поделиться Одноклассники

    Разработчики сайта «Одноклассники» представили обновленную кнопку «Класс/Поделиться», которая работает значительно быстрее прошлого образца.

    Здесь находится страница конструктора.

    С помощью интуитивно понятного интерфейса параметры подгоняются быстро и легко. Когда настройка завершена и вид элемента в блоке «Результат» устраивает, можно «пролистнуть экран» вниз и заметить код, который нужно встроить в html страницы в выбранном месте.

    Кнопка поделиться Google+

    Такой гигант, как Google, не мог остаться в стороне, поэтому для соц. сети googleplus тоже есть своя кнопка расшаривания. В отличие от виджета того же «ВКонтакте», кнопка «+1» не ведет к публикации материалов на страницах нажавшего на нее человека и не имеет влияния на ранжирование. «Тогда зачем она нужна?» – спросите вы. «+1» является частью эффективной PR-кампании вашего ресурса, в ходе которой материалы рекламируются друзьями друзей через профили Гугл, а рекомендации можно увидеть прямо в выдаче поисковой системы!

    Официальная страница открывает простой способ установки «+1» с помощью кода:

    Кнопка поделиться от Твиттер

    «Твитнуть или не твитнуть?». Чтобы у посетителей появились такие муки выбора, необходимо создать элемент для расшаривания от Twitter в официальном конструкторе.

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

    Код для размещения будет находиться в правом окне.

    Кнопка поделиться от Mail.ru

    Плагин для шаринга от социальной сети . – кнопка «Нравится». Комфортное и быстрое создание доступно по ссылке.

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

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

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

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

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

    Или вынести иконку в CSS и для каждой социалки создать свой класс. Пример в Vk.com:

    html-код в таком случае будет:

    Легкие и кастомные кнопки расшаривания

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

    Плюсы такого подхода:

    1. Нет лишнего трафика;
    2. Нет рекламы;
    3. Корректная работа;
    4. Нет проблем с зависимостью от сервиса (который может часто тупить и не загружаться);
    5. Нет проблем с поеданием памяти браузера.

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

    Twitter Facebook Google plus LinkedIn Pinterest VK Tumblr Reddit Odnoklassniki

    Далее нужно придать им нужный вид с помощью CSS. В нашем случае html-код кнопки расшаривания в ВК выглядит так:

    Ну и стилизация кнопки в CSS:

    Вам останется только добавить всё это дело в модальное окно и реализовать корректный парсинг тегов с вашей разметки OpenGraph и подставноку в url’ы для шаринга, которые приведены выше.

    Источник