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

Обновлено: 08.01.2025

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

Содержание:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Pluso

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

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

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

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

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

Uptolike

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

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

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

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

Share42

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

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

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

Addthis

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

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

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

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

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

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

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

Social-Likes

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

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

Odnaknopka. ru

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

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

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

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

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

Pip.Qip. ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Twitter Facebook Google plus LinkedIn Pinterest VK Tumblr Reddit Odnoklassniki

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

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

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

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

Репосты в социальные сети с помощью api

Каждая популярная соц.сеть имеет свои апи, используя которые, можно самостоятельно реализовать функционал репостов, без применения готовых решений – виджетов. В этой статье будет описано только пять кнопок репостов для самых распространенных социальных сетей.
Api очень простые и использовать их можно без каких-либо предварительных регистраций или запросов в поддержку. Все, что из себя представляют апи, это обычные ссылки с get-параметрами, в которых можно передавать адрес страницы сайта и дополнительную информацию для репоста(заголовок, описание и тд). Но в данном случае будет достаточно только одного параметра – ссылка на страницу. Остальные данные будут передаваться немного другим образом, об этом чуток позже.
Ниже приведены пять ссылок на api каждой их соц.сети:

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

Мета-теги Open Graph для сайта

Немного раньше, я упоминал, что помимо ссылки на страницу, для качественного репоста потребуется еще заголовок, описание и картинка. Чтобы не передавать эти данные в ссылках и иметь возможность более удобного управления, стоит воспользоваться специальными мета-тегами. Существуют протокол Open Graph, который позволяет легко и просто указывать для каждой страницы свои параметры репоста. Практически все соц.сети придерживаются этого протокола. До недавнего времени только twitter по своему использовал мета-теги Open Graph, но в последнее время также стал придерживаться общего стандарта.
Для передачи необходимых данных о странице достаточно только нескольких тегов, они должны быть прописаны в самом начале – внутри блока head. Выглядеть это будет вот так:

Код JavaScript для шарингов

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

В атрибутах data-social хранится название соц.сети, в которую будет сделан репост. А в атрибуте data-url прописана ссылка для репоста. Если data-url отсутствует, то по умолчанию будет использована текущая страница.
И теперь сам js. Для его работы необходима библиотеке jQuery.

Копируем ссылку ВКонтакте профиля на телефоне

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

Объединение нескольких соцсетей

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

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

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

Продвижение ВКонтакте при помощи сервиса Хиполинк

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

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

Достоинства Хиполинка:

— Простота использования. Создать лендинг, онлайн-магазин сможет пользователь с минимальным опытом работы с онлайн-сервисами.

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

— Возможность подключения модулей сбора статистики и метрики: Яндекс Метрика, Google Analitics, Фейсбук Пиксель, Вконтакте Пиксель.

Как сделать активную ссылку в ВК

На самом деле, нет никаких проблем. Вставить ссылку в ВК можно легко с помощью специальных тегов вида:

Здесь:

Таким образом создается ссылка словом в ВК (анкорная ссылка).

Как сделать активную ссылку в ВК на пост

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

club — для ссылок на группы;
public — для ссылок на сообщества;
event — для ссылок на мероприятия.

Как вставить ссылку в ВК в смайлик

Как сделать активную ссылку в ВК на сайт

При использовании внешних url-адресов помните, что слишком длинные ссылки автоматически обрезаются социальной сетью, а это может приводить к плачевным последствиям. Что бы избежать подобных неприятностей, вы всегда можете воспользоваться бесплатной сокращалкой, встроенной во Вконтакте: vk.cc. Помните, что практически все внешние сокращатели ссылок заблокированы социальной сетью. В большинстве случаев Вконтакте расценивает, сокращённые сторонними сервисами url-адреса, как фишинговые и блокирует. Несколько секунд, которые вам придётся потратить на использование фирменного инструмента, не стоят крайне вероятного бана.

Заключение

Теперь, зная как сделать ссылку в ВК, мы имеем в своем распоряжении еще один рабочий инструмент продвижения страниц в соцсети. В умелых руках он может увеличить активность ваших читателей, привлечь повышенное внимание к рекламному посту или просто помочь собрать побольше лайков. Используйте его с умом и сможете существенно повысить популярность своих публикаций и показатель кликабельности, а также увеличить объёмы охватываемой аудитории.

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