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

В этой статье мы рассмотрим различные способы создания блоков «Поделиться» и «Мне нравится» в том числе включая вариант без использования сторонних сервисов (через 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:

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

Дополнительно, чтобы повысить эффективность от репостинга, на страницы сайта нужно добавить социальные мета-теги (микроразметку).
Мета-теги для социальных сетей
Социальные мета-теги – это дополнительная информация, которую нужно вставить на страницу через тег <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
Автоматическое формирование ссылок для публикации страниц сайта в соцсетях можно выполнить как на клиенте, так и на сервере.
На клиенте, т.е. с помощью 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>
Вид блока:

Это решение показывает, что самостоятельно создать набор кнопок «Поделиться» без зависимостей довольно просто.
Для того чтобы вставить его себе на сайт, необходимо на каждую страницу добавить только вышеприведённый скрипт и элемент <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 код.
Готовое решение:

<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>';
Ссылка: пример с Viber
Но столкнулась с проблемой, что ссылки не работают на мобильных устройствах и планшетах (Эппл). Я предполагаю, что проблема в onclick, но пока моих знаний не хватает, чтобы понять, как это решить. Подскажите пожалуйста, что можно сделать, чтобы ссылки заработали?
Почему то слово Присоединяйтесь: было далеко справа и высоко, пришлось удалить код со словом, а так не плохо выглядит.
Где:
Эти ссылки предназначены для пользователей и конечно с помощью них они публикуют понравившейся материал в своей ленте.
Если вы хотите публиковать свои материалы в своей группе, то конечно вам нужно использовать API социальной сети. Эта статья не об этом.
Я так подозреваю дело в fill='%23ffffff у вас на каждой ссылке соц.сети проставлено это значение. Ну это мои догадки.
На мой взгляд пускай она хоть как то будет отображаться, а то не понятно работает иконка или нет…
Можно использовать след. вариант как пример, он же у вас в самом начале был, когда статья только вышла. Удалось сохранить.
В этом примере:
Просто так смотрится куда симпатичнее нежели дублировать заголовок по несколько раз. Да и ссылка вроде работает в таком варианте. Либо это считается ошибкой?)
Еще раз благодарю Вас Александр!
В официальном руководстве Telegram указан следующий URL:
При этом параметр text указан как необязательный, т.е. его можно не передавать.
Таким образом, ваша ссылка является корректной.
1) Какой (share) HTML код ссылок нужен для публикации материала в WhatsApp?
2) Не могли бы вы также для WhatsApp добавить svg значек (ссылку www.w3.org/2000/svg), как вы сделали это в статье, только на другие соц.сети, пробовал искать но что-то не нашел)
3) И нужно ли заполнять и какой адрес указвать для: meta property=«og:url» content=«Адрес страницы»
если для каждой соц.сети уже и так указана ссылка share?
Еще раз Спасибо за статью!
p/s тоже не понятно нужно ли в начале прописывать html lang=«ru» prefix=«og: ogp.me/ns#» по моему и без него все работает.
1. HTML код ссылок для публикации материала в WhatsApp:
2. SVG иконка для WhatsApp:
3. Да, заполнять значение для «og:url» нужно. Хоть для самих share они не нужны, но отметки «Нравится» и действия «Поделиться» для этого URL будут агрегироваться именно поэтому URL. В «og:url» указываем канонический URL веб-страницы, т.е. то же что и в share:
Атрибут prefix в используется для того, чтобы указать какой семантический словарь используется. Он определен в спецификации RDF. В HTML 5 его указывать не обязательно, поэтому его практически никто не добавляет.
И в meta грубо говоря просто адрес текущей страницы?
Так получается?)
P/S Отметки к примеру мне нравятся не нужны.
В мета-свойстве «og:url», да, просто указываем канонический адрес текущей страницы.
Да, получается так. Только в параметре text для «t.me» необходимо задавать описание страницы, а не URL.