Как добавить социальные кнопки на сайт?
В этой статье мы рассмотрим различные способы создания блоков «Поделиться» и «Мне нравится» в том числе включая вариант без использования сторонних сервисов (через URL-адреса прямого доступа). Кроме этого ещё разберём как можно оформить ссылки на официальные профили компании в социальных сетях.
Социальные сети на сайте
На сайте ссылки на социальные сети используются для того, чтобы пользователь знал о наличии на этих ресурсах официальных страниц этой компании, а также мог очень просто перейти туда.
Обычно ссылки на официальные профили в социальных сетях оформляются в виде значков или кнопок, и помещаются в заголовок или футер страниц веб-сайта.
Например, на сайте «mebel.ru» они находятся в правом нижней части:
Кроме ссылок на официальные страницы бренда, на сайтах ещё очень часто можно увидеть кнопки «share» (поделиться) и «like» (нравится). Их обычно располагают рядом со статьёй, товаром или услугой.
Например, на сайте «ferra.ru» кнопки «share» расположены сразу под заголовком статьи:
Кнопки «share» позволяют быстро поделиться этим контентом в социальных сетях. При нажатию на неё автоматически формируется ссылка на этот контент и пользователю останется только нажать «Отправить». После чего она будет опубликована в его личном аккаунте, которую увидят все его подписчики.
Кнопки «like» обычно кроме возможности быстро поделиться, позволяют ещё посетителям сайта одним кликом выразить своё отношение к контенту, т.е. зарегистрировать отметку «Нравится».
Почему связь с социальными ресурсами важно для вашей компании? В основном это связано с тем, что социальные сети сейчас занимают огромную роль в жизни людей и не использовать их для увеличения своей аудитории, просмотров и потенциальных клиентов просто неразумно.
Ссылки на официальные профили в социальных сетях
Если в социальных сетях у вас имеются официальные профили компании, то рекомендуется создать ссылки на них.
Выполняется это очень просто.
Кнопки «Поделиться» и «Мне нравится»
Блок с кнопками «Поделиться» предназначен для того, чтобы пользователи могли быстро публиковать понравившиеся им страницы в своих социальных сетях, а в случае использования «Мне нравиться» ещё и «лайкать» их.
Использование сторонних сервисов
Создание соцкнопок этим способом выполняется легко. Для этого достаточно перейти на любой сервис, представляющий такую возможность, выбрать в нём вид кнопок, вариант их оформления и нужный набор сервисов. Обычно все эти действия выполняются очень просто (через конструктор). Далее, после того как вы всё окончательно настроили, нужно скопировать полученный код и подключить его к себе на сайт.
Примеры сервисов, представляющий такую услугу:
Как это осуществляется в USocial:
Конструктор блока «Поделиться» от Яндекса:
Дополнительно, чтобы повысить эффективность от репостинга, на страницы сайта нужно добавить социальные мета-теги (микроразметку).
Мета-теги для социальных сетей
При этом для разных сетей код микроразметки может отличаться:
Без использования сторонних сервисов (официальные кнопки соцсетей)
Но, при добавлении блоков «Поделиться» и «Мне нравится» через сторонние сервисы они обычно загружают не только необходимые для работы скрипты социальных сетей (например, ВКонтакте, Facebook, Twitter и т.д.), но и многие другие вещи, которые для их нормальной работы вообще не нужны. Например, эти сервисы могут добавлять код, который будет собирать информацию о ваших пользователей, выполнять их отслеживание и многое другое. Кроме этого, они также могут приводить к увеличению времени полной загрузки страниц сайта.
При желании можно обойтись без этих дополнительных посредников и подключить скрипты социальных сетей к себе на сайт напрямую. Инструкции как это сделать приведены в соответствующих разделах документации социальных сетей.
Например, для того чтобы создать кнопку ВКонтакте необходимо выполнить следующие действия согласно официальной документации:
Кроме кнопки «Поделиться» ВКонтакте предлагает ещё много других виджетов, которые вы также можете установить себе на сайт.
Получается, что официальные кнопки соцсетей тоже достаточно просто вставить на сайт. Но они также как и в случае со сторонними сервисами полагаются на JavaScript.
Если вас это не устраивает (вы не хотите иметь зависимость от внешнего кода), то тогда можно вообще отказаться от размещения сторонних JavaScript скриптов на своём сайте, и реализовать всё это дело через URL-адреса. Благо социальные сети это позволяют.
Социальные кнопки через URL-адреса прямого доступа
Этот способ настолько прост, насколько это возможно. Но о нём часто забывают. Он основном на простом создании ссылок.
Основные преимущества это способа:
Этот вариант делает сайт более независимым, быстрым и ответственным по отношению к конфиденциальности данных своих пользователей.
Однако этот способ кроме преимуществ, имеет также и некоторые ограничения. Например, используя его, вы не сможете уже так просто показать количество отметок «Нравиться» и «Поделиться» для текущей страницы. Если для вас это не является обязательным условием – то тогда нет причин не использовать этот вариант.
Каждая социальная сеть имеет свой собственный уникальный URL-адрес для публикаций. Необходимая для извлечения информация в этом случае передаётся в составе URL через GET-параметры. Подключать какие-то сторонние JavaScript скрипты при таком подходе не нужно.
URL-адреса прямого доступа для социальных сетей Twitter, Facebook, ВКонтакте, Telegram имеют следующий вид:
В зависимости от используемого языка или фреймворка кодирования URL может выполняться по-разному.
Например, в PHP его выполнить можно с помощью функции urlencode :
Следовательно, HTML код ссылок для публикации материала в социальных сетях будут выглядеть следующим образом:
Кроме этого, чтобы публикуемая запись был оформлена корректно незабываем добавить на каждую свою страницу мета-теги для социальных сетей.
Создание ссылок посредством JavaScript
Автоматическое формирование ссылок для публикации страниц сайта в соцсетях можно выполнить как на клиенте, так и на сервере.
На клиенте, т.е. с помощью JavaScript, это можно сделать так:
Место, в которое они будут помещены на странице в данном случае необходимо разметить посредством создания пустого элемента
Это решение показывает, что самостоятельно создать набор кнопок «Поделиться» без зависимостей довольно просто.
Для того чтобы вставить его себе на сайт, необходимо на каждую страницу добавить только вышеприведённый скрипт и элемент
Количество соцсетей в этом скрипте указывается в переменной shareData (в виде массива объектов):
В ключе « title » мы задаём название соцсети, а в « href » – её URL-адрес для публикаций.
Создание соцкнопок посредством JavaScript
Представленный выше вариант можно стилизовать, например, представив его в виде кнопок с иконками. А также ещё сделать так, чтобы при нажатии на них форма для публикации открывалась не в новой вкладке, а в popup окне. Чтобы провести эти изменения нам нужно будет создать стили и отредактировать JavaScript код.
Создание соцкнопок посредством PHP
Формировать блок кнопок «Поделиться» можно не только посредством изменения DOM (на клиенте), но и сразу на сервере.
Если вы хорошо знаете устройство своего бэкенда и имеете хотя бы минимальный опыт написания северных скриптов, то сгенерировать такой блок на сервере тоже будет довольно просто.
Создание ссылок на контакты, социальные сети и мессенджеры
В этой статье рассмотрим самые популярные:
Ссылка на телефон
Ссылка на телефон имеет простой формат url (когда прописывается не полная http:// ссылка, а сокращенное обозначение, понимаемое браузерами как вызов нужного приложения).
В случае с телефоном это протокол tel:.
Рассмотрим на примере добавление ссылки на телефон 88005555555 (номер может быть любым другим, какой вам нужен) в текст на сайте.
Выделите текст в редакторе мышкой и нажмите на панели редактирования кнопку добавления ссылки:
В открывшемся окне введите в поле ссылки url вашего телефона:
После чего нажмите OK в окне и выйдите из редактирования текстового блока, чтобы сохранились изменения.
Теперь при клике на ссылку на сайте браузер будет вызывать подходящее приложение для совершения вызова — в мобильных браузерах это начнет набор телефонного номера для звонка.
Также можно вставлять такие ссылки в Кнопке и Картинке, просто вставляя ссылку в поле ввода ссылки:
Ссылка на email
Абсолютно аналогично настраивается ссылка на email адрес, только вместо uri протокола tel используется протокол mailto:
Здесь также может использоваться любой ваш email адрес, возьмем для примера адрес нашей техподдержки: support@lpmotor.ru
Для добавления в текст — точно также выделяем текст мышкой и жмем кнопку добавления ссылки:
Вводим ссылку с email из нашего примера:
Заходим в настройки блока, указываем ссылку и жмем «ОК» и сохраняем изменения. И так же можем добавить ссылки в картинки или кнопки.
Установка ссылок на социальные сети
Разместите на сайте кнопки и иконки социальных сетей, чтобы дать возможность посетителям быстро делиться интересными страницами в своих социальных сетях. А также для удобного поиска и направления посетителя на вашу страницу в той или иной соц. сети.
В mottor есть несколько способов установки ссылок:
2. в блоке «Картинка«
3. в «Текстовом блоке«
Обратите внимание. Перед установкой ссылки нужно выделить текст, к которому вы хотите привязать ссылку.
Примеры ссылок на соц. сети:
Ссылки для перехода в мессенджер (WhatsApp, Viber, Telegram)
Если вам нужно, чтобы клиент при нажатии на кнопку сразу попадал в свой мессенджер и начал общение с вами, то нужно будет указать специальную ссылку в каждом блоке, откуда происходит переход. Для каждого мессенджера будет своя ссылка, поэтому рассмотрим каждый по очереди.
Ссылка на WhatsApp
Вместо номера 79999999999 вам нужно будет указать номер телефона вашего аккаунта в этом мессенджере.
Ссылка на WhatsApp с заранее набранным сообщением
В этой ссылке мы видим, что есть номер телефона 79999999999, его вы меняете на свой телефон в таком же формате, без точек, тире, пробелов и т.п. Просто указываете набор цифр.
+ в ссылке есть «зашитое» сообщение «Добрый день! Я хочу купить квартиру в Москве.«
Ссылка на Viber
Вместо номера 79999999999 вам нужно будет указать номер телефона вашего аккаунта в нужном мессенджере. Будет это телефон с +7 или просто 7 — без разницы 🙂
Ссылка на Viber с переходом в чат
%2B — обязательно должно остаться перед номером телефона. Знак «+» перед телефоном НЕ указывается.
Ссылка на Telegram
username — заменяем на ваш логин внутри telegram (без знака @)
Ссылка на Telegram
В случае, если по ссылке https://telegram.me не открывается Telegram, можно попробовать изменить ссылку на https://tele.click/
Например, https://tele.click/lpmotorsupportbot
Ссылка на Skype
username — логин вашего аккаунта в Skype
Создание кнопки «Поделиться» от Яндекса
Создание и размещение на сайте виджета, который позволит репостить ссылку на ваш сайт в выбранных соц. сетях. Размещение кнопки будем показывать на примере редактора mottor.
2. Затем код данного виджета остаётся только разместить в html-блоке на вашем сайте. Чтобы это сделать нажимаем на «+» в левом верхнем углу редактора:
3. Выбираем html-блок и ставим его в том месте на сайте, где должна размещаться кнопка «Поделиться». Размещаем внутри него скопированный код и готово!
Итоги
Итак, в этой статье мы научились настраивать ссылки на соц.сети и увидели, как просто это делается в редакторе mottor.
Надеемся, вы примените эти знания при создании своего собственного сайта. Если что-то будет непонятно — в конструкторе сайтов mottor есть бесплатная техподдержка для всех пользователей. Вам поможет живой специалист:
Ссылки из социальных сетей для SEO ― польза или плацебо?
Согласно данным SimilarWeb за октябрь 2016 г., самый популярный сайт в мире ― facebook.com. В России на первом месте ― vk.com. При этом социальные сети входят в ТОП-10 самых посещаемых ресурсов практически каждой страны. Значит ли это, что соцсети и их ссылки могут влиять на позиции вашего сайта?
Такие «невесомые» ссылки
Начнем с того, почему многие SEO-специалисты считают, что ссылки из социальных сетей не имеют прямого влияния на продвижение. Все дело в ссылочном весе, который они не передают. Система оформления исходящих ссылок несколько отличается в разных социальных сетях, но имеет схожий принцип, запрещающий передавать вес сторонним ресурсам.
Например, вот так выглядит ссылка из профиля SE Ranking на Facebook:
По ссылкам, закрытым через rel= “nofollow” поисковые системы не переходят, соответственно такие ссылки не могут влиять на ранжирование сайтов.
Примерно так выглядит ссылки из профиля SE Ranking в Twitter:
Пример ― ссылка из профиля SE Ranking во ВКонтакте:

Социальные сети намеренно не передают ссылочный вес, чтобы не поощрять различные ссылочные манипуляции. Поэтому с этой точки зрения ссылки из социальных сетей ― плацебо для продвижения сайта. Но зачем же тогда их продают и покупают?
Социальные сигналы и их влияние на ранжирование сайта
Представители Google неоднократно заявляли, что социальные сигналы не являются фактором ранжирования в прямом значении этого словосочетания. Но отличие SEO-практиков от теоретиков ― в том, что они не верят голословным заявлениям, а проверяют все на практике. Тем более популярность социальных сетей настолько высока, что сомнения насчет их бесполезности для продвижения сайта то и дело появляются в умах оптимизаторов.
Сотрудники компании Tasty Placement провели эксперимент. Они создали 6 сайтов одной тематики, рассчитанные на 6 одинаковых по численности населения города США. Спустя 10 месяцев с каждым из них была проведена работа, связанная с различными социальными активностями. Результаты ― в таблице.

Конечно, этот эксперимент нельзя использовать как доказательство влияния социальных сигналов на ранжирование сайта. Но принять во внимание все же нужно.
Приток трафика с социальных ссылок
Подписчики профилей и сообществ в социальных сетях как правило, лояльны к бренду ― пользуются или пользовались услугами компании. Поэтому они охотнее переходят по ссылкам в постах и активнее реагируют на публикуемый контент.
Социальные сети ― это лакомый «кусок» трафика, который обязательно нужно брать. Тем более что социальные профили сами по себе отлично ранжируются в поисковых системах. Поэтому значительное количество пользователей из поиска приходят по брендовым запросам сначала в социальные сети, а потом уже на сайт.
Быстрая индексация социальных сетей
Поисковые роботы Google посещают ваш сайт примерно раз в неделю, Яндекс ― раз в 2-3 недели (средние показатели). Поэтому после создания новой страницы и размещения на ней контента приходится ждать. В социальных сетях контент публикуется каждую секунду, поэтому роботы находятся там почти круглосуточно, отсеивая полезные и бесполезные на их взгляд страницы и добавляя первые в поисковой индекс.
Резюме
Обратные ссылки ― важный показатель SEO, который может как отправить ваш сайт «на отдых» в Минусинск под ручку с Google-Пингвином, так и постелить ковровую дорожку в ТОП. Социальные ссылки не нанесут сайту вреда, а помогают разнообразить ссылочный профиль, а также дают дополнительные переходы заинтересованных пользователей.
Но самое главное ― социальные сети позволяют продвигать ваш бренд, что часто приносит не меньшую пользу, чем продвижение сайта.
Что такое ссылка в соц сетях?
Что такое ссылка на страницу в соц сетях?
Ссылка на страницу ВКонтакте, Facebook, Twiter, Одноклассники и прочих — это URL (адрес) Вашего профиля, взять который можно из адресной строки браузера.
Что такое ссылка в интернете?
Ссылка (гиперссылка) – это часть гипертекстового документа, которая ссылается на другой элемент (команду, заголовок, текст, изображение, примечание) в самом документе, на другой объект (приложение, каталог, файл), расположенный в компьютерной сети или на локальном диске, либо на элементы объекта.
Как добавить иконки соц сетей на сайт HTML?
Есть несколько способов добавить иконки социальных сетей на ваш сайт:
Что такое ссылка на страницу VK?
Активная ссылка — это текст синего цвета, при клике на который вы переходите на страницу, которая скрыта за этим текстом. Чтобы сделать активную ссылку, вам нужно использовать схему для ссылок — @ ид-номер страницы после vk, пробел и в скобках () текст, который будет активной ссылкой. …
Что значит ссылка на Ваш аккаунт?
Ссылка на Инстаграм аккаунт — адрес официального сайта + ник пользователя. Каждый пользователь Инстаграма имеет свой уникальный никнейм, а каждый аккаунт — это отдельная страница в интернете со своей уникальной ссылкой, основанной на нике.
Как сделать ссылку на свой вк?
Зайдите в настройки своей страницы ВКонтакте (http://vk.com/settings) Найдите раздел «Адрес Вашей страницы» Скопируйте «Номер страницы» или доступную для копирования часть «Адреса страницы»
Как указать социальные сети в резюме?
Как добавить в резюме свою страницу в соцсетях?
Что значит отправили в ссылку?
Ссы́лка — вид уголовного наказания, состоящий в удалении осуждённого из места его постоянного или временного жительства с обязательным поселением сыльнопоселенца в определённой местности, как правило, на окраине, на периферии в пределах страны, государства на срок, указанный в приговоре.
Какие ссылки можно использовать в формулах?
Типы ссылок EXCEL на ячейку: относительная (A1), абсолютная ($A$1) и смешанная (A$1) адресация
Что такое ссылка и как ее определить?
Ссылка, она же гиперссылка – это средство перехода от одного сайта к другому или от одной страницы к другой. Ссылки являются одним из самых важных элементов для поисковой системы, так как с помощью них поисковик обнаруживает новые документы и индексирует их.
Как вставить ссылку на соцсети HTML?
Ссылка на соц сеть
Теперь чтобы вставить ссылку на ваш профиль, канал или группу — нужно в атрибуте href вместо символа # вставить ссылку на вашу соцсеть. Будьте внимательны чтобы не удалить двойную кавычку, которая должна быть перед и в конце ссылки.
Как установить шрифт Font Awesome?
Подключение с помощью CDN
Чтобы подключить иконочный шрифт Font Awesome 5 с помощью CDN необходимо перейти на страницу: Font Awesome Start и выставить необходимые параметры. Полученный код вставляем в тег вашего сайта, на тех страницах где вы собираетесь использовать иконки.
Что такое ссылка на страницу и где ее брать
В статье мы расскажем:
Довольно часто при регистрации в каком либо сервисе, при восстановлении доступа к аккаунту, при запуске рекламы и в других случаях просят указать ссылку на страницу ВК, других соцсетей или отдельной записи сайта.
Вопрос вроде простой, если знаешь, о чем речь. Рассмотрим его на примерах для тех, кто здесь испытывает трудности.
Что такое ссылка Вашу на страницу.
Чаще всего требуется указать ссылку на:
Социальные сети
Пример моего профиля (у Вас в URL после vk.com будет числовой идентификатор, если Вы его не поменяли в настройках аккаунта на что-то поинтереснее).
Сообщества и сайты
Посты в соцсетях
Видеохостинги
На скриншоте показано, как при размещении видеоролика требуется указать его адрес.
В Youtube это делается в три клика:
Под окном просмотра кликаем «Поделиться».
Копируем конструкцию во всплывшем окне.
Из адресной строки копируйте URL открывающихся страниц.































