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

Обновлено: 27.03.2024

1. Общие положения

1.1. Загружая, копируя элементы Сервисов, приступая к использованию Сервисов Пользователь подтверждает свое согласие соблюдать условия Соглашения.
1.2. В случае если Пользователь не согласен с данными условиями, он не вправе устанавливать, копировать или иным образом использовать Сервисы.
1.3. Сервисы подлежат правовой охране в качестве компьютерных программ.
1.4. Все права на Сервисы принадлежат Правообладателю (соответствующим авторам в соответствующих частях), за исключением передаваемых по настоящему лицензионному соглашению или иным, заключенным в соответствии с действующим законодательством, соглашениям.

2. Права Пользователя

2.1. В соответствии с настоящим Соглашением Пользователь получает неисключительное право использования Сервисов, в том числе, в составе собственных сайтов в сети Интернет.
2.2. Количество сайтов, в составе которых Сервисы могут быть использованы каждым Пользователем, не ограничено.
2.3. Использование Сервисов для Пользователя является бесплатным.
2.4. Сервисы используются Пользователем в том виде, в котором они предоставляются Правообладателем, в соответствии с теми условиями, на которых они предоставляются.
2.5. Настоящее Соглашение не предоставляет Пользователю прав на внесение изменений в Сервисы, переработку Сервисов, передачу прав по настоящему соглашению иным лицам или любое иное использование Сервисов, которое прямо не предусмотрено настоящим Соглашением.
2.6. Сервисы должны использоваться Пользователем в соответствии с действующим законодательством.

3. Права Правообладателя

3.1. Правообладатель вправе в одностороннем порядке в любой момент, не уведомляя при этом Пользователя вносить в настоящее Соглашение изменения, которые будут обязательны для всех Пользователей, в том числе ранее принявших условия настоящего Соглашения.
3.2. Правообладатель вправе отказать в предоставлении возможности использования или прекратить текущее использование Сервисов (одного, нескольких, всех) для отдельных Пользователей или для всех Пользователей.
3.3. Правообладатель при условии сохранения надлежащего выполнения Сервисами своих основных функций вправе одновременно выборочно направлять конечных пользователей Сервисов по адресам партнеров.
3.4. Правообладатель не несет ответственности за содержание ресурсов, к которым конечные пользователи Сервисов получают доступ по адресам партнеров. Переходя по данным адресам, конечные пользователи самостоятельно несут ответственность за свои действия.
3.5. Поскольку Сервисы представляют собой только лишь средство для работы с информацией, Правообладатель не несет ответственности за правомерность использования Пользователем Сервисов, а также за содержание сайтов или иной информации Пользователя, для работы с которой используются Сервисы.

4. Конфиденциальность информации

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

5. Иные условия

О нас пишут

Подключите скрипт блока. Чтобы загружать скрипт асинхронно и не блокировать загрузку страницы, укажите атрибут async или defer .

Если требуется поддержка старых браузеров (например, Internet Explorer 8), дополнительно подключите скрипт es5-shims . Этот скрипт должен быть подключен перед скриптом блока:

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

Поддерживаемые атрибуты

Значение по умолчанию: normal .

  • first — кнопка вверху списка в pop-up;
  • last — кнопка внизу списка в pop-up;
  • hidden — кнопка не отображается в pop-up;
  • extraItem — кнопка в основном списке.

Значение по умолчанию: last .

В шапке окна отображается превью сайта.

Контент в превью может не совпадать с контентом для соцсети. Картинка и описание для превью берутся из атрибутов image и description . Если атрибуты image и description не указаны, данные подтягиваются из разметки Open Graph. Если описание не найдено в разметке Open Graph, оно подставляется из мета-тега description страницы. Если описания нет и там, берется текущий URL страницы.

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

Значение по умолчанию: horizontal .

Несколько хэштегов указываются через запятую, без пробела.

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

Значение по умолчанию: ru .

Значение по умолчанию: bottom .

  • inner — внутри контейнера;
  • outer — снаружи контейнера.

Значение по умолчанию: inner .

Значение по умолчанию: vkontakte,twitter .

Значение по умолчанию: normal .

Значение по умолчанию: m .

По умолчанию указывается заголовок страницы, на которой размещен блок.

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

По умолчанию указывается URL страницы, на которой размещен блок.

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

Значение по умолчанию: normal .

  • first — кнопка вверху списка в pop-up;
  • last — кнопка внизу списка в pop-up;
  • hidden — кнопка не отображается в pop-up;
  • extraItem — кнопка в основном списке.

Значение по умолчанию: last .

В шапке окна отображается превью сайта.

Контент в превью может не совпадать с контентом для соцсети. Картинка и описание для превью берутся из атрибутов image и description . Если атрибуты image и description не указаны, данные подтягиваются из разметки Open Graph. Если описание не найдено в разметке Open Graph, оно подставляется из мета-тега description страницы. Если описания нет и там, берется текущий URL страницы.

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

Значение по умолчанию: horizontal .

Несколько хэштегов указываются через запятую, без пробела.

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

Значение по умолчанию: ru .

Значение по умолчанию: bottom .

  • inner — внутри контейнера;
  • outer — снаружи контейнера.

Значение по умолчанию: inner .

Значение по умолчанию: vkontakte,twitter .

Значение по умолчанию: normal .

Значение по умолчанию: m .

По умолчанию указывается заголовок страницы, на которой размещен блок.

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

По умолчанию указывается URL страницы, на которой размещен блок.

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

Указать атрибуты контента для каждой соцсети отдельно

Список поддерживаемых соцсетей

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

Подключите скрипт блока. Если требуется поддержка старых браузеров (например, Internet Explorer 8), дополнительно подключите скрипт es5-shims . Этот скрипт должен быть подключен перед скриптом блока:

Вызовите метод Ya.share2 . Передайте методу идентификатор элемента и объект параметров.

Также вместо идентификатора вы можете передать сам элемент:

Внутри объекта параметры объединяются в группы:

content

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

Параметр Описание Возможные значения
description Текст, которым нужно поделиться. Строка.
image Изображение, которым нужно поделиться. URL изображения.
title Заголовок, которым нужно поделиться. Строка.

По умолчанию указывается заголовок страницы, на которой размещен блок.

По умолчанию указывается URL страницы, на которой размещен блок.

Параметр Описание Возможные значения
description Текст, которым нужно поделиться. Строка.
image Изображение, которым нужно поделиться. URL изображения.
title Заголовок, которым нужно поделиться. Строка.

По умолчанию указывается заголовок страницы, на которой размещен блок.

По умолчанию указывается URL страницы, на которой размещен блок.

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

contentByService

theme

Внутри группы theme можно указать параметры, относящиеся к внешнему виду блока:

Значение по умолчанию: false

Значение по умолчанию: normal .

  • first — кнопка вверху списка в pop-up;
  • last — кнопка внизу списка в pop-up;
  • hidden — кнопка не отображается в pop-up;
  • extraItem — кнопка в основном списке.

Значение по умолчанию: last .

В шапке окна отображается превью сайта.

Контент в превью может не совпадать с контентом для соцсети. Картинка и описание для превью берутся из атрибутов image и description . Если атрибуты image и description не указаны, данные подтягиваются из разметки Open Graph. Если описание не найдено в разметке Open Graph, оно подставляется из мета-тега description страницы. Если описания нет и там, берется текущий URL страницы.

  • true — заменять стандартный pop-up;
  • false — не заменять стандартный pop-up.

Значение по умолчанию: false

Значение по умолчанию: horizontal .

Значение по умолчанию: ru .

Значение по умолчанию: bottom .

  • inner — внутри контейнера;
  • outer — снаружи контейнера.

Значение по умолчанию: inner .

Значение по умолчанию: vkontakte,twitter

Значение по умолчанию: normal .

Значение по умолчанию: m .

  • true — открывать новую вкладку или окно;
  • false — открывать всплывающее окно.

Значение по умолчанию: false

Значение по умолчанию: false

Значение по умолчанию: normal .

  • first — кнопка вверху списка в pop-up;
  • last — кнопка внизу списка в pop-up;
  • hidden — кнопка не отображается в pop-up;
  • extraItem — кнопка в основном списке.

Значение по умолчанию: last .

В шапке окна отображается превью сайта.

Контент в превью может не совпадать с контентом для соцсети. Картинка и описание для превью берутся из атрибутов image и description . Если атрибуты image и description не указаны, данные подтягиваются из разметки Open Graph. Если описание не найдено в разметке Open Graph, оно подставляется из мета-тега description страницы. Если описания нет и там, берется текущий URL страницы.

  • true — заменять стандартный pop-up;
  • false — не заменять стандартный pop-up.

Значение по умолчанию: false

Значение по умолчанию: horizontal .

Значение по умолчанию: ru .

Значение по умолчанию: bottom .

  • inner — внутри контейнера;
  • outer — снаружи контейнера.

Значение по умолчанию: inner .

Значение по умолчанию: vkontakte,twitter

Значение по умолчанию: normal .

Значение по умолчанию: m .

  • true — открывать новую вкладку или окно;
  • false — открывать всплывающее окно.

Значение по умолчанию: false

hooks

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

Событие Описание Аргументы
onready Срабатывает при инициализации блока.
onshare Срабатывает при нажатии на кнопку соцсети. name — название соцсети.
Событие Описание Аргументы
onready Срабатывает при инициализации блока.
onshare Срабатывает при нажатии на кнопку соцсети. name — название соцсети.

Методы

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

  • Вызов методов через переменную
  • Вызов методов без переменной

Метод позволяет переопределить параметры контента после инициализации блока. Формат аргументов метода совпадает с форматом параметров группы content.

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

Метод позволяет переопределить параметры контента для отдельного сервиса после инициализации блока. Формат аргументов метода совпадает с форматом параметров группы contentByService.

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

Метод позволяет очистить контейнер блока и удалить все обработчики событий.

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

Метод позволяет переопределить параметры контента после инициализации блока. Формат аргументов метода совпадает с форматом параметров группы content.

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

Метод позволяет переопределить параметры контента для отдельного сервиса после инициализации блока. Формат аргументов метода совпадает с форматом параметров группы contentByService.

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

Метод позволяет очистить контейнер блока и удалить все обработчики событий.

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

Подключите скрипт блока. Если требуется поддержка старых браузеров (например, Internet Explorer 8), дополнительно подключите скрипт es5-shims . Этот скрипт должен быть подключен перед скриптом блока:

Вызовите метод Ya.share2 . Передайте методу идентификатор элемента и объект параметров.

Также вместо идентификатора вы можете передать сам элемент:

Внутри объекта параметры объединяются в группы:

content

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

Параметр Описание Возможные значения
description Текст, которым нужно поделиться. Строка.
image Изображение, которым нужно поделиться. URL изображения.
title Заголовок, которым нужно поделиться. Строка.

По умолчанию указывается заголовок страницы, на которой размещен блок.

По умолчанию указывается URL страницы, на которой размещен блок.

Параметр Описание Возможные значения
description Текст, которым нужно поделиться. Строка.
image Изображение, которым нужно поделиться. URL изображения.
title Заголовок, которым нужно поделиться. Строка.

По умолчанию указывается заголовок страницы, на которой размещен блок.

По умолчанию указывается URL страницы, на которой размещен блок.

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

contentByService

theme

Внутри группы theme можно указать параметры, относящиеся к внешнему виду блока:

  • true — стили не подгружаются;
  • false — стили подгружаются.

Значение по умолчанию: false

Значение по умолчанию: normal .

  • first — кнопка вверху списка в pop-up;
  • last — кнопка внизу списка в pop-up;
  • hidden — кнопка не отображается в pop-up;
  • extraItem — кнопка в основном списке.

Значение по умолчанию: last .


В шапке окна отображается превью сайта.

Контент в превью может не совпадать с контентом для соцсети. Картинка и описание для превью берутся из атрибутов image и description . Если атрибуты image и description не указаны, данные подтягиваются из разметки Open Graph. Если описание не найдено в разметке Open Graph, оно подставляется из мета-тега description страницы. Если описания нет и там, берется текущий URL страницы.

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

Содержание:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Доступные социальные сети для шаринга в Яндексе

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

Внешний вид блока социальных кнопок Яндекса

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

Pluso

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

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

Внешний вид кнопок соц. сетей Pluso
Доступные социалки в Pluso

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

Предварительный просмотр и дополнительные опции

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

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

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

Uptolike

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

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

Внешний вид кнопок Uptolike

Всплывающее окно Uptolike

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

Социальные сети Uptolike

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

Адаптация Uptolike под мобильные

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

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

Share42

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

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

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

Первичная настройка Share42



Sharethis

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

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

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




Addthis

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

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

Выбираем тип кнопок в Addthis

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

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


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

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

Кастомизация Addthis

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

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

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

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

Social-Likes

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

Панель соц кнопок Social Likes

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

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

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

Odnaknopka. ru

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

Сервис Однакнопка

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

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


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

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

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

Pip.Qip. ru

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

Внешний вид кнопок pip.qip. ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SDK Javascript

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

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

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

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

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

Кнопки репостов в Одноклассниках

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

Пример кода кнопки Одноклассники

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Twitter Facebook Google plus LinkedIn Pinterest VK Tumblr Reddit Odnoklassniki

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

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

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

Понравился пост? Сделай репост и подпишись!

Рекомендую к прочтению

ТОП-13 SEO-курсов в Минске: кто научит продвигать сайты?

Материал

Как дать гостевой доступ к Яндекс Метрике

Материал

Как дать гостевой доступ к Яндекс Вебмастеру

Материал

ASO - основы продвижения мобильных приложений в ТОП App Store и Google Play

Материал

Что такое конверсия сайта и как ее посчитать: формулы, средние значения и типы конверсий в интернете

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

Внешний вид


Это самая очевидная проблема: социальных сетей много, у каждой свой дизайн share-блока. По отдельности они выглядят вполне прилично, но при установке всех вместе получается полная каша. Что с этим делать? Во-первых, можно просто оставить одну-две соцсети, выглядеть это будет не так ужасно. Во-вторых, можно использовать обычные иконки с share-ссылкой. К сожалению, в первом случае идут лесом пользователи «второстепенных» соцсетей, а во втором не видно пузомерок — количества лайков и твитов.

Быстродействие


В пору быстрого интернета все меньше приходится задумываться об оптимизации скорости загрузки сайта. Однако с каждым годом растет количество пользователей мобильного интернета, который пока не может похвастаться высокими скоростями. А социальные кнопки способны заметно замедлить загрузку сайта. Интересный факт: еще в 2007 году Amazon сообщил, что каждые лишние 100мс при загрузке сайта снижают продажи на 1%. А Google с 2010 года учитывает скорость загрузки при ранжировании сайтов в поисковой выдаче. И хочется ли после этого ставить нативные кнопки?

Что же делать?

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


PLUSO — молодой сервис, который удовлетворяет всем вышеуказанным требованиям, вот какие кнопочки он позволяет делать, всего более 300 вариаций:

Читайте также: