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

Как добавить социальные кнопки на сайт?
Содержание:
  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>';

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

krasivij-metall
krasivij-metall

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

Нашел на сайте https://icons8.ru/icons/set/яндекс-дзен--static--black код иконки но она не отображается: <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50" height="50" viewBox="0 0 50 50" style="fill:#1A1A1A;"> <path d="M46.894 23.986c.004 0 .007 0 .011 0 .279 0 .545-.117.734-.322.192-.208.287-.487.262-.769C46.897 11.852 38.154 3.106 27.11 2.1c-.28-.022-.562.069-.77.262-.208.192-.324.463-.321.746C26.193 17.784 28.129 23.781 46.894 23.986zM46.894 26.014c-18.765.205-20.7 6.202-20.874 20.878-.003.283.113.554.321.746.186.171.429.266.679.266.03 0 .061-.001.091-.004 11.044-1.006 19.787-9.751 20.79-20.795.025-.282-.069-.561-.262-.769C47.446 26.128 47.177 26.025 46.894 26.014zM22.823 2.105C11.814 3.14 3.099 11.884 2.1 22.897c-.025.282.069.561.262.769.189.205.456.321.734.321.004 0 .008 0 .012 0 18.703-.215 20.634-6.209 20.81-20.875.003-.283-.114-.555-.322-.747C23.386 2.173 23.105 2.079 22.823 2.105zM3.107 26.013c-.311-.035-.555.113-.746.321-.192.208-.287.487-.262.769.999 11.013 9.715 19.757 20.724 20.792.031.003.063.004.094.004.25 0 .492-.094.678-.265.208-.192.325-.464.322-.747C23.741 32.222 21.811 26.228 3.107 26.013z"></path> </svg> Прошу помочь добавить пример с дзеном
magistic
magistic

Александр, привет!

Статья, конечно, я думаю хорошая, но для тех кто сильно шарит в программировании. Но помогите разобраться мне не разбирающемуся в программировании с этим:

<div class="grid items-center justify-center mx-4">

"https://www.facebook.com/share.php?u={{ url('service', $gig->slug) }}&t={{ $gig->title }}" target="_blank" class="inline-flex justify-center items-center h-12 w-12 border border-transparent rounded-full bg-[#3b5998] focus:outline-none focus:ring-0 mx-auto">

<svg class="h-5 w-5 fill-white" version="1.1" viewBox="0 0 512 512" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M374.244,285.825l14.105,-91.961l-88.233,0l0,-59.677c0,-25.159 12.325,-49.682 51.845,-49.682l40.116,0l0,-78.291c0,0 -36.407,-6.214 -71.213,-6.214c-72.67,0 -120.165,44.042 -120.165,123.775l0,70.089l-80.777,0l0,91.961l80.777,0l0,222.31c16.197,2.541 32.798,3.865 49.709,3.865c16.911,0 33.511,-1.324 49.708,-3.865l0,-222.31l74.128,0Z"/></svg>

</a>

<span class="uppercase font-normal text-xs text-gray-500 mt-4 tracking-widest">{{ ('messages.t_facebook') }}</span>

</div>

Мне нужно переделать на VK. Вот что мне удалось сделать правда выглядет иконка не так как в коде выше:

<img src="http://vk.com/images/vk32.png" />

<a href="#"

onclick="this.href='https://vk.com/share.php?url='+window.location.href+window.location.hash+'&title='+document.title">

ВКонтакт</a>

И пробовал так: (но тут я думаю полная чушь...)

<a href=https://vk.com/share.php?url=' . $url,'onclick'=>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");

Александр Мальцев
Александр Мальцев

Привет! Я так понимаю, ты хочешь это делать в браузере. Тогда так:

<a href="#" onclick="this.href='https://vk.com/share.php?url=' + encodeURIComponent(location.origin + location.pathname) + '&title=' + encodeURIComponent(document.title)" style="display: inline-block; font-size: 0;">
  <img src="https://vk.com/images/vk32.png" alt="Поделиться в Контакте">
</a>
ArtMihey
ArtMihey
Добрый день статья очень полезная, вы мне помогли, может у вас еще есть значок для ВАЙБЕРА ато у меня не получается почемуто настроить svg.
Александр Мальцев
Александр Мальцев
Привет! Спасибо за отзыв.
Ссылка: пример с Viber
Luna
Luna
Спасибо большое за статью! Очень помогло.
Но столкнулась с проблемой, что ссылки не работают на мобильных устройствах и планшетах (Эппл). Я предполагаю, что проблема в onclick, но пока моих знаний не хватает, чтобы понять, как это решить. Подскажите пожалуйста, что можно сделать, чтобы ссылки заработали?
Владислав
Владислав
Большое спасибо за информацию!
Александр Мальцев
Александр Мальцев
Рад, что информация понравилась.
SKRYPCHENKO ANDRIY
SKRYPCHENKO ANDRIY
Здравствуйте, Александр! Спасибо большое за Вашу статью, очень помогла. Немного выше Вы дали ответ (код) WhatsApp, если не затруднит, сбросьте пожалуйста код Instagram. Спасибо большое))) К сожалению не смог найти в интернете(

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

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

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

Если вы хотите публиковать свои материалы в своей группе, то конечно вам нужно использовать API социальной сети. Эта статья не об этом.
Антон
Антон
Cтранно, но ссылки на значки перестали работать…
Александр Мальцев
Александр Мальцев
Что конкретно не работает? Есть ссылка на получившееся решение?
Антон
Антон
Александр, доброго времени суток! Не работают значки соц. сетей (т.е они не отображаются...)
 .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 у вас на каждой ссылке соц.сети проставлено это значение. Ну это мои догадки.
Александр Мальцев
Александр Мальцев
ffffff — это цвет иконки в шестнадцатеричном формате. Если нужно не белый, то укажите любое другое значение.
Антон
Антон
Александр, я так и понял, но в начале подумал что что не так, т.к как иконка вообще не отображалась, она как бы была бесцветная. конкретно вот такая. 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");
    }
Александр Мальцев
Александр Мальцев
Можете установить тот цвет, который нужно. Не обязательно использовать эти.
В этом примере:
fill='%232787f5' - это цвет #2787f5
fill='%2327a7e7' - это цвет #27a7e7
fill='%2326e07f' - это цвет #26e07f

%23 - это знак #
Антон
Антон
Спасибо за пояснение теперь разобрался!!! =) С telegram ошибся, а можно ли указать для Telegram ссылку в таком варианте: t.me/share/url?url={https://www.mysite.ru} т.е без &text={Заголовок}. При условии что я указал:
<meta property="og:title" content="Заголовок поста" />
<meta property="og:description" content="Описание поста" />
Просто так смотрится куда симпатичнее нежели дублировать заголовок по несколько раз. Да и ссылка вроде работает в таком варианте. Либо это считается ошибкой?)
Еще раз благодарю Вас Александр!
Александр Мальцев
Александр Мальцев
Отлично!
В официальном руководстве Telegram указан следующий URL:
https://t.me/share/url?url={url}&text={text}
При этом параметр text указан как необязательный, т.е. его можно не передавать.
Таким образом, ваша ссылка является корректной.
Антон
Антон
Спасибо!
Антон
Антон
Александр, приветствую! И Спасибо Вам за отличнейшую работу! Статья получилась довольно полная! Но пару моментов могли бы вы подсказать?
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. 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 его указывать не обязательно, поэтому его практически никто не добавляет.
Антон
Антон
Спасибо! А что значит тогда «Хоть для самих 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 Отметки к примеру мне нравятся не нужны.
Александр Мальцев
Александр Мальцев
Это означает, что мета-свойство «og:url» нужно для поисковых роботов социальных сетей. А для share — адрес текущей страницы в качестве значения параметра в составе URL.
В мета-свойстве «og:url», да, просто указываем канонический адрес текущей страницы.
Да, получается так. Только в параметре text для «t.me» необходимо задавать описание страницы, а не URL.