Как добавить социальные кнопки на сайт?

Александр Мальцев
Александр Мальцев
11K
22
Как добавить социальные кнопки на сайт?
Содержание:
  1. Социальные сети на сайте
  2. Ссылки на официальные профили в социальных сетях
  3. Кнопки «Поделиться» и «Мне нравится»
  4. Комментарии

В этой статье мы рассмотрим различные способы создания блоков «Поделиться» и «Мне нравится» в том числе включая вариант без использования сторонних сервисов (через URL-адреса прямого доступа). Кроме этого ещё разберём как можно оформить ссылки на официальные профили компании в социальных сетях.

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

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

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

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

Например, на сайте «mebel.ru» они находятся в правом нижней части:

Пример ссылок на официальные профили компании в социальных сетях

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

Например, на сайте «ferra.ru» кнопки «share» расположены сразу под заголовком статьи:

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

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

Кнопки «like» обычно кроме возможности быстро поделиться, позволяют ещё посетителям сайта одним кликом выразить своё отношение к контенту, т.е. зарегистрировать отметку «Нравится».

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

Если в социальных сетях у вас имеются официальные профили компании, то рекомендуется создать ссылки на них.

Пример оформления ссылок на официальные профили бренда в социальных сетях

Выполняется это очень просто.

Первое что нужно сделать - это создать HTML код:

<ul class="social-icons">
  <li><a class="social-icon-twitter" href="#" title="..." target="_blank" rel="noopener"></a></li>
  <li><a class="social-icon-fb" href="#" title="..." target="_blank" rel="noopener"></a></li>
  <li><a class="social-icon-vk" href="#" title="..." target="_blank" rel="noopener"></a></li>
  <li><a class="social-icon-telegram" href="#" title="..." target="_blank" rel="noopener"></a></li>
  <li><a class="social-icon-youtube" href="#" title="..." target="_blank" rel="noopener"></a></li>
</ul>

Второе - написать стили для их оформления:

.social-icons {
  display: flex;
  justify-content: center;
  list-style: none;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 0;
}
.social-icons>li {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.social-icons a {
  position: relative;
  background-color: #eee;
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: background-color .3s ease-in-out;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .25rem;
}
.social-icons a:hover {
  background-color: #e0e0e0;
}
.social-icons a::before {
  content: "";
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  left: .65rem;
  top: .65rem;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
}
.social-icons .social-icon-twitter::before {
  background-image: url("...");
}
.social-icons .social-icon-fb::before {
  background-image: url("...");
}
.social-icons .social-icon-vk::before {
  background-image: url("...");
}
.social-icons .social-icon-telegram::before {
  background-image: url("...");
}
.social-icons .social-icon-youtube::before {
  background-image: url("...");
}
Пример

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

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

Наиболее простой способ вставить такие блоки на сайт — это воспользоваться сторонними сервисами.

Использование сторонних сервисов

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

Примеры сервисов, представляющий такую услугу:

Как это осуществляется в USocial:

Создание социальных кнопок в USocial

Конструктор блока «Поделиться» от Яндекса:

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

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

Мета-теги для социальных сетей

Социальные мета-теги – это дополнительная информация, которую нужно вставить на страницу через тег <meta>. Основное их назначение – это указать соцсетям точный заголовок, описание и изображение, которые вы хотите видеть в публикуемой ссылке.

При этом для разных сетей код микроразметки может отличаться:

<!-- для Facebook и ВКонтакте (протокол Open Graph) -->
<meta property="og:title" content="Заголовок поста" />
<meta property="og:description" content="Описание поста" />
<meta property="og:image" content="Ссылка на изображение" />
<meta property="og:url" content="Адрес страницы" />
<meta property="og:site_name" content="Название сайта" />
<!-- для Twitter -->
<meta name="twitter:site" content="Название сайта" />
<meta name="twitter:title" content="Заголовок поста" />
<meta name="twitter:description" content="Описание поста" />

Данный код необходимо прописать в разделе <head>.

Полезные инструменты:

Без использования сторонних сервисов (официальные кнопки соцсетей)

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

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

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

Документация ВКонтакте для создания кнопки, с помощью которой можно будет публиковать страницы в этой сети
<!-- 1. Подключить скрипт shares.js в тег <head> -->
<script src="https://vk.com/js/api/share.js?93"></script>
<!-- 2. Добавить на страницу элемент с id="vk_share_button" -->
<div id="vk_share_button"></div>
<!-- 3. В скрипте получить этот элемент и установить ему в качестве контента текст, возвращаемый функцией VK.Share.button -->
<script>
  document.getElementById('vk_share_button').innerHTML = VK.Share.button(false, { type: "round", text: "Сохранить" });
</script>

Кроме кнопки «Поделиться» ВКонтакте предлагает ещё много других виджетов, которые вы также можете установить себе на сайт.

Документация ВКонтакте для создания различных виджетов для сайта

Получается, что официальные кнопки соцсетей тоже достаточно просто вставить на сайт. Но они также как и в случае со сторонними сервисами полагаются на JavaScript.

Если вас это не устраивает (вы не хотите иметь зависимость от внешнего кода), то тогда можно вообще отказаться от размещения сторонних JavaScript скриптов на своём сайте, и реализовать всё это дело через URL-адреса. Благо социальные сети это позволяют.

Социальные кнопки через URL-адреса прямого доступа

Этот способ настолько прост, насколько это возможно. Но о нём часто забывают. Он основном на простом создании ссылок.

Основные преимущества это способа:

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

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

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

Каждая социальная сеть имеет свой собственный уникальный URL-адрес для публикаций. Необходимая для извлечения информация в этом случае передаётся в составе URL через GET-параметры. Подключать какие-то сторонние JavaScript скрипты при таком подходе не нужно.

URL-адреса прямого доступа для социальных сетей Twitter, Facebook, ВКонтакте, Telegram имеют следующий вид:

https://twitter.com/intent/tweet?text={текст твита}&url={адрес страницы}&via={имя пользователя}
https://www.facebook.com/sharer/sharer.php?u={адрес страницы}
https://vk.com/share.php?url={адрес страницы}
https://t.me/share/url?url={адрес страницы}&text={заголовок страницы}

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

В зависимости от используемого языка или фреймворка кодирования URL может выполняться по-разному.

Например, в PHP его выполнить можно с помощью функции urlencode:

$url = urlencode('https://itchief.ru/');

В JavaScript кодирование полного URI осуществляется посредством encodeURI, а одного значения параметра через encodeURIComponent:

const url = encodeURI('https://itchief.ru/');

Следовательно, HTML код ссылок для публикации материала в социальных сетях будут выглядеть следующим образом:

<a href="https://twitter.com/intent/tweet?text={текст твита}&url={адрес страницы}&via={имя пользователя}" target="_blank">Поделиться ссылкой в Twitter</a>
<a href="https://www.facebook.com/sharer/sharer.php?u={адрес страницы}" target="_blank">Поделиться ссылкой в Facebook</a>
<a href="https://vk.com/share.php?url={адрес страницы}" target="_blank">Поделиться ссылкой в ВКонтакте</a>
<a href="https://t.me/share/url?url={адрес страницы}&text={заголовок страницы}" target="_blank">Поделиться ссылкой в Telegram</a>

Пример

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

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

На клиенте, т.е. с помощью JavaScript, это можно сделать так:

document.addEventListener('DOMContentLoaded', function () {
  const createShareHtml = function (title, shareData) {
    let anchorList = [];
    const anchorTemplate = function (item) {
      return '<a href="' + item.href + '" target="_blank" rel="noopener">' + item.title + '</a>';
    }
    const wrapperTemplate = function (title, anchorList) {
      return '<div class="social-share__title">' + title + '</div><div class="social-share__items">' + anchorList.join('') + '</div>';
    }
    shareData.forEach(function (item) {
      anchorList.push(anchorTemplate(item));
    })
    return wrapperTemplate(title, anchorList);
  }
  const $socialShare = document.querySelector('.social-share');
  if ($socialShare) {
    const url = encodeURIComponent(location.protocol + '//' + location.host + location.pathname);
    const title = encodeURIComponent(document.title);
    const twitterUserName = 'itchief_ru';
    const shareData = [{
        title: 'Twitter',
        href: 'https://twitter.com/intent/tweet?text=' + title + '&url=' + url + '&via=' + twitterUserName,
      },
      {
        title: 'Facebook',
        href: 'https://www.facebook.com/sharer/sharer.php?u=' + url,
      },
      {
        title: 'ВКонтакте',
        href: 'https://vk.com/share.php?url=' + url,
      },
      {
        title: 'Telegram',
        href: 'https://t.me/share/url?url=' + url + '&text=' + title,
      }
    ];
    const $html = createShareHtml('Поделиться этим материалом в социальных сетях:', shareData);
    $socialShare.innerHTML = $html;
  }
});

Место, в которое они будут помещены на странице в данном случае необходимо разметить посредством создания пустого элемента <div> с классом social-share:

<div class="social-share"></div>

Открыть пример

Вид блока:

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

Это решение показывает, что самостоятельно создать набор кнопок «Поделиться» без зависимостей довольно просто.

Для того чтобы вставить его себе на сайт, необходимо на каждую страницу добавить только вышеприведённый скрипт и элемент <div class="social-share"></div>.

Количество соцсетей в этом скрипте указывается в переменной shareData (в виде массива объектов):

const shareData = [
  {
    title: 'Twitter',
    href: `https://twitter.com/intent/tweet?text=${title}&url=${url}&via=${twitterUserName}`
  },
  ...
];

В ключе «title» мы задаём название соцсети, а в «href» – её URL-адрес для публикаций.

Сам скрипт работает довольно просто. После загрузки DOM, он получает URL-адрес текущей страницы и её заголовок. Далее используя эти данные, он «пробегается» по соцсетям в shareData и формирует массив ссылок. После этого он получает элемент .social-share и вставляет туда HTML код ссылок, полученный посредством объедение всех элементов массива anchorList в строку.

Создание соцкнопок посредством JavaScript

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

Готовое решение:

Создания набора социальных кнопок на JavaScript для публикации материала через URL
<style>
  .social-share {
    background-color: #f0f8f3;
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
  }
  .social-share__title {
    text-align: center;
    font-weight: bold;
    font-size: .875rem;
    margin-bottom: 0.5rem;
  }
  .social-share__items {
    display: flex;
    justify-content: center;
    list-style: none;
    margin-top: 0;
  }
  .social-share__item {
    position: relative;
    background-color: #00832d;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background-color .3s ease-in-out;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    border-radius: .25rem;
  }
  .social-share__item:hover {
    background-color: #006624;
  }
  .social-share__item::before {
    content: "";
    position: absolute;
    width: 1.2rem;
    height: 1.2rem;
    left: .65rem;
    top: .65rem;
    background: transparent no-repeat center center;
    background-size: 100% 100%;
  }
  .social-share__item_twitter::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3E%3C/svg%3E");
  }
  .social-share__item_fb::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23ffffff' d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
  }
  .social-share__item_vk::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23ffffff' d='M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z'/%3E%3C/svg%3E");
  }
  .social-share__item_telegram::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z'/%3E%3C/svg%3E");
  }
</style>

<div class="social-share"></div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const createShareHtml = function (title, shareData) {
    let anchorList = [];
    const anchorTemplate = function (item) {
      return '<a href="' + item.href + '" class="social-share__item social-share__item_' + item.name +
        '" title="' + item.title + '" onclick="' + item.onclick + '"></a>';
    }
    const wrapperTemplate = function (title, anchorList) {
      return '<div class="social-share__title">' + title + '</div><div class="social-share__items">' +
        anchorList.join('') + '</div>';
    }
    shareData.forEach(function (item) {
      anchorList.push(anchorTemplate(item));
    })
    return wrapperTemplate(title, anchorList);
  }
  const $socialShare = document.querySelector('.social-share');
  if ($socialShare) {
    const url = encodeURIComponent(location.protocol + '//' + location.host + location.pathname);
    const title = encodeURIComponent(document.title);
    const twitterUserName = 'itchief_ru';
    const shareData = [{
        name: 'twitter',
        title: 'Twitter',
        href: 'https://twitter.com/intent/tweet?text=' + title + '&url=' + url + '&via=' + twitterUserName,
        onclick: 'window.open(this.href, \'Twitter\', \'width=800,height=300,resizable=yes,toolbar=0,status=0\'); return false'
      },
      {
        name: 'fb',
        title: 'Facebook',
        href: 'https://www.facebook.com/sharer/sharer.php?u=' + url,
        onclick: 'window.open(this.href, \'Facebook\', \'width=640,height=436,toolbar=0,status=0\'); return false'
      },
      {
        name: 'vk',
        title: 'ВКонтакте',
        href: 'https://vk.com/share.php?url=' + url,
        onclick: 'window.open(this.href, \'ВКонтакте\', \'width=800,height=300,toolbar=0,status=0\'); return false'
      },
      {
        name: 'telegram',
        title: 'Telegram',
        href: 'https://t.me/share/url?url=' + url + '&title=' + title,
        onclick: 'window.open(this.href, \'Telegram\', \'width=800,height=300,toolbar=0,status=0\'); return false'
      }
    ];
    const $html = createShareHtml('Поделиться этим материалом в социальных сетях:', shareData);
    $socialShare.innerHTML = $html;
  }
});
</script>

Пример

Создание соцкнопок посредством PHP

Формировать блок кнопок «Поделиться» можно не только посредством изменения DOM (на клиенте), но и сразу на сервере.

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

Например, на PHP это можно сделать так:

// заголовок для блока "Поделиться"
$shareTitle = 'Поделиться этим материалом в социальных сетях:';
// url страницы
$url = urlencode((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'] . explode('?', $_SERVER['REQUEST_URI'], 2)[0]);
// имя пользователя в Twitter
$twitterUserName = urlencode('itchief_ru');
// title страницы
$title = urlencode('...');
// share данные
$shareData = [
  'twitter' => [
    'title' => 'Twitter',
    'href' => 'https://twitter.com/intent/tweet?text=' . $title . '&url=' . $url . '.&via=' . $twitterUserName,
    'onclick' => 'window.open(this.href, \'Twitter\', \'width=800,height=300,resizable=yes,toolbar=0,status=0\'); return false'
  ],
  'fb' => [
    'title' => 'Facebook',
    'href' => 'https://www.facebook.com/sharer/sharer.php?u=' . $url,
    'onclick' => 'window.open(this.href, \'Facebook\', \'width=640,height=436,toolbar=0,status=0\'); return false'
  ],
  'vk' => [
    'title' => 'ВКонтакте',
    'href' => 'https://vk.com/share.php?url=' . $url,
    'onclick' => 'window.open(this.href, \'ВКонтакте\', \'width=800,height=300,toolbar=0,status=0\'); return false'
  ],
  'telegram' => [
    'title' => 'Telegram',
    'href' => 'https://t.me/share/url?url=' . $url . '&title=' . $title,
    'onclick' => 'window.open(this.href, \'Telegram\', \'width=800,height=300,toolbar=0,status=0\'); return false'
  ]
];
$anchorList = [];
foreach ($shareData as $key => $value) {
  $anchorList[] = '<a href="' . $value['href'] . '" class="social-share__item social-share__item_' . $key . '" title="' . $value['title'] . '" onclick="' . $value['onclick'] . '"></a>';
}
$anchors = implode($anchorList);
$html = '<div class="social-share__title">' . $shareTitle . '</div><div class="social-share__items">' . $anchors . '</div>';
echo '<div class="social-share">' . $html . '</div>';

Комментарии:

  1. SKRYPCHENKO ANDRIY
    23 июля 2021, 15:43
    Здравствуйте, Александр! Спасибо большое за Вашу статью, очень помогла. Немного выше Вы дали ответ (код) WhatsApp, если не затруднит, сбросьте пожалуйста код Instagram. Спасибо большое))) К сожалению не смог найти в интернете(

    1. Александр Мальцев
      03 августа 2021, 07:23
      Привет! Спасибо за отзыв. У Instagram нет share ссылки, можно только создать ссылку на официальный профиль.

      Ссылки на профили социальных сетей в виде кнопок включая InstagramПример
    2. Михаил
      27 июня 2021, 15:20
      Спасибо, получилось не плохо, здесь можно просмотреть в footer сайт padabo.ru
      Почему то слово Присоединяйтесь: было далеко справа и высоко, пришлось удалить код со словом, а так не плохо выглядит.
      1. Александр Мальцев
        28 июня 2021, 13:12
        Пожалуйста! Рад, что всё получилось.
      2. Вячеслав
        21 мая 2021, 08:03
        Добрый день! В примере «Создание ссылок посредством JavaScript» картинки прикрепляются, а в примере «Создание соцкнопок посредством JavaScript» нет. Почему такое происходит и можно ли исправить? И почему для разных соцсетей цепляются разные картинки?
        1. Вячеслав
          22 мая 2021, 17:15
          Браузер «Сhrome», все расширения выключены, AdBlock не стоит, даже кэш в ВК сбросил. Картинки нет
          1. Александр Мальцев
            22 мая 2021, 14:49
            Привет! Этот пример написан на современном JavaScript. Изменил его для поддержки старых браузеров. Также проверьте может у вас AdBlock включен или какой-то подобный инструмент. Он может вырезать такой контент.
            1. Вячеслав
              22 мая 2021, 17:27
              И не могли бы Вы подробнее «разжевать» про ОК. В принципе всё работает, но поделиться я могу только в своей ленте, а мне хотелось бы в группе. Для группы ОК просит какой-то аппрув приложения и пререкодирование . Я вообще ничего не понял.
              1. Александр Мальцев
                27 мая 2021, 15:05
                Ссылка для ОК имеет следующий вид:
                https://connect.ok.ru/offer?url=URL_TO_SHARE&title=TITLE&imageUrl=IMAGE_URL
                Где:
                • URL_TO_SHARE — URL страницы
                • TITLE — Заголовок
                • IMAGE_URL — URL картинки

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

                Если вы хотите публиковать свои материалы в своей группе, то конечно вам нужно использовать API социальной сети. Эта статья не об этом.
          2. Антон
            19 января 2021, 21:12
            Cтранно, но ссылки на значки перестали работать…
            1. Александр Мальцев
              24 января 2021, 09:30
              Что конкретно не работает? Есть ссылка на получившееся решение?
              1. Антон
                24 января 2021, 17:04
                Александр, доброго времени суток! Не работают значки соц. сетей (т.е они не отображаются...)
                 .social-share__item_telegram::before {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z'/%3E%3C/svg%3E");
                  }
                Я так подозреваю дело в fill='%23ffffff у вас на каждой ссылке соц.сети проставлено это значение. Ну это мои догадки.
                1. Александр Мальцев
                  25 января 2021, 04:22
                  ffffff — это цвет иконки в шестнадцатеричном формате. Если нужно не белый, то укажите любое другое значение.
                  1. Антон
                    25 января 2021, 04:42
                    Александр, я так и понял, но в начале подумал что что не так, т.к как иконка вообще не отображалась, она как бы была бесцветная. конкретно вот такая. itchief.ru/assets/uploadify/0/1/a/01ade46702362cce62e0984dd5b324a7.png

                    На мой взгляд пускай она хоть как то будет отображаться, а то не понятно работает иконка или нет…
                    Можно использовать след. вариант как пример, он же у вас в самом начале был, когда статья только вышла. Удалось сохранить.
                    .social-icons .social-icon-vk::before {
                          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%232787f5' d='M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z'/%3E%3C/svg%3E");}
                    
                    .social-icons .social-icon-telegram::before {
                          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2327a7e7' d='M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z'/%3E%3C/svg%3E");
                        }
                    
                        .social-icons .social-icon-youtube::before {
                          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3Cpath fill='%2326e07f' d='M19.077 4.928A9.927 9.927 0 0012.011 2c-5.506 0-9.987 4.479-9.989 9.985a9.962 9.962 0 001.333 4.992L2 22l5.233-1.237a9.98 9.98 0 004.773 1.216h.004c5.505 0 9.986-4.48 9.989-9.985a9.922 9.922 0 00-2.922-7.066zm-2.179 10.626c-.208.583-1.227 1.145-1.685 1.186-.458.042-.887.207-2.995-.624-2.537-1-4.139-3.601-4.263-3.767-.125-.167-1.019-1.353-1.019-2.581s.645-1.832.874-2.081a.916.916 0 01.666-.312c.166 0 .333 0 .478.006.178.007.375.016.562.431.222.494.707 1.728.769 1.853s.104.271.021.437-.125.27-.249.416c-.125.146-.262.325-.374.437-.125.124-.255.26-.11.509.146.25.646 1.067 1.388 1.728.954.85 1.757 1.113 2.007 1.239.25.125.395.104.541-.063.146-.166.624-.728.79-.978s.333-.208.562-.125 1.456.687 1.705.812c.25.125.416.187.478.291.062.103.062.603-.146 1.186z'/%3e%3c/svg%3e");
                        }
                    
                    1. Александр Мальцев
                      27 января 2021, 14:36
                      Можете установить тот цвет, который нужно. Не обязательно использовать эти.
                      В этом примере:
                      fill='%232787f5' - это цвет #2787f5
                      fill='%2327a7e7' - это цвет #27a7e7
                      fill='%2326e07f' - это цвет #26e07f
                      
                      %23 - это знак #
                      
            2. Антон
              19 января 2021, 20:27
              Спасибо за пояснение теперь разобрался!!! =) С telegram ошибся, а можно ли указать для Telegram ссылку в таком варианте: t.me/share/url?url={https://www.mysite.ru} т.е без &text={Заголовок}. При условии что я указал:
              <meta property="og:title" content="Заголовок поста" />
              <meta property="og:description" content="Описание поста" />
              
              Просто так смотрится куда симпатичнее нежели дублировать заголовок по несколько раз. Да и ссылка вроде работает в таком варианте. Либо это считается ошибкой?)
              Еще раз благодарю Вас Александр!
              1. Александр Мальцев
                24 января 2021, 09:39
                Отлично!
                В официальном руководстве Telegram указан следующий URL:
                https://t.me/share/url?url={url}&text={text}
                
                При этом параметр text указан как необязательный, т.е. его можно не передавать.
                Таким образом, ваша ссылка является корректной.
                1. Антон
                  24 января 2021, 17:06
                  Спасибо!
              2. Антон
                18 января 2021, 23:31
                Александр, приветствую! И Спасибо Вам за отличнейшую работу! Статья получилась довольно полная! Но пару моментов могли бы вы подсказать?
                1) Какой (share) HTML код ссылок нужен для публикации материала в WhatsApp?
                2) Не могли бы вы также для WhatsApp добавить svg значек (ссылку www.w3.org/2000/svg), как вы сделали это в статье, только на другие соц.сети, пробовал искать но что-то не нашел)
                3) И нужно ли заполнять и какой адрес указвать для: meta property=«og:url» content=«Адрес страницы»
                если для каждой соц.сети уже и так указана ссылка share?
                <ul class="social-icons">
                  <li><a class="social-icon-vk" href="https://vk.com/share.php?url=http://mysite.ru" title="ВКонтакте" target="_blank" rel="noopener"></a></li>
                  <li><a class="social-icon-telegram" href="http://t.me/share/url?url=http://mysite.ru" title="Telegram" target="_blank" rel="noopener"></a></li>
                </ul>
                Еще раз Спасибо за статью!
                p/s тоже не понятно нужно ли в начале прописывать html lang=«ru» prefix=«og: ogp.me/ns#» по моему и без него все работает.
                1. Александр Мальцев
                  19 января 2021, 14:52
                  Привет! Рад, что статья понравилась.
                  1. HTML код ссылок для публикации материала в WhatsApp:
                  <a href="https://wa.me/?text={адрес страницы}" target="_blank">Поделиться ссылкой в WhatsApp</a>
                  
                  2. SVG иконка для WhatsApp:
                  .social-share__item_whatsapp::before {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
                  }
                  
                  3. Да, заполнять значение для «og:url» нужно. Хоть для самих share они не нужны, но отметки «Нравится» и действия «Поделиться» для этого URL будут агрегироваться именно поэтому URL. В «og:url» указываем канонический URL веб-страницы, т.е. то же что и в share:
                  <meta property="og:url" content="{адрес страницы}">
                  Атрибут prefix в используется для того, чтобы указать какой семантический словарь используется. Он определен в спецификации RDF. В HTML 5 его указывать не обязательно, поэтому его практически никто не добавляет.
                  1. Антон
                    19 января 2021, 15:12
                    Спасибо! А что значит тогда «Хоть для самих share они не нужны» можно как то и без адреса в ссылках обойтись или что? Не совсем понял, либо я все-таки указываю и в самих share и в meta такие ссылки:
                    https://www.facebook.com/sharer/sharer.php?u={https://www.mysite.ru}
                    https://vk.com/share.php?url={https://www.mysite.ru}
                    https://t.me/share/url?url={адрес страницы}&text={https://www.mysite.ru}
                    
                    И в meta грубо говоря просто адрес текущей страницы?
                    <meta property="og:url" content="{https://www.mysite.ru}">
                    Так получается?)
                    P/S Отметки к примеру мне нравятся не нужны.
                    1. Александр Мальцев
                      19 января 2021, 15:39
                      Это означает, что мета-свойство «og:url» нужно для поисковых роботов социальных сетей. А для share — адрес текущей страницы в качестве значения параметра в составе URL.
                      В мета-свойстве «og:url», да, просто указываем канонический адрес текущей страницы.
                      Да, получается так. Только в параметре text для «t.me» необходимо задавать описание страницы, а не URL.
                Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.