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

Тип статьи:
Основная статья (Basic article)

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

Статья предоставлена пользователем Айтишефом специально для «НаСвязи»

Image

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

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

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

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

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

Image

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

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

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

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

Image

Выполняется это очень просто.
Первое что нужно сделать – это создать HTML код:
 
  1. <ul class="social-icons">
  2.   <li><a class="social-icon-twitter" href="#" title="..." target="_blank" rel="noopener"></a></li>
  3.   <li><a class="social-icon-fb" href="#" title="..." target="_blank" rel="noopener"></a></li>
  4.   <li><a class="social-icon-vk" href="#" title="..." target="_blank" rel="noopener"></a></li>
  5.   <li><a class="social-icon-telegram" href="#" title="..." target="_blank" rel="noopener"></a></li>
  6.   <li><a class="social-icon-youtube" href="#" title="..." target="_blank" rel="noopener"></a></li>
  7. </ul>
 
Второе  – написать стили для их оформления:
 
  1. .social-icons {
  2.   display: flex;
  3.   justify-content: center;
  4.   list-style: none;
  5.   margin-top: 1rem;
  6.   margin-bottom: 1rem;
  7.   padding-left: 0;
  8. }
  9. .social-icons>li {
  10.   margin-left: 0.25rem;
  11.   margin-right: 0.25rem;
  12. }
  13. .social-icons a {
  14.   position: relative;
  15.   background-color: #eee;
  16.   display: block;
  17.   -webkit-user-select: none;
  18.   -moz-user-select: none;
  19.   -ms-user-select: none;
  20.   user-select: none;
  21.   transition: background-color .3s ease-in-out;
  22.   width: 2.5rem;
  23.   height: 2.5rem;
  24.   border-radius: .25rem;
  25. }
  26. .social-icons a:hover {
  27.   background-color: #e0e0e0;
  28. }
  29. .social-icons a::before {
  30.   content: "";
  31.   position: absolute;
  32.   width: 1.2rem;
  33.   height: 1.2rem;
  34.   left: .65rem;
  35.   top: .65rem;
  36.   background: transparent no-repeat center center;
  37.   background-size: 100% 100%;
  38. }
  39. .social-icons .social-icon-twitter::before {
  40.   background-image: url("...");
  41. }
  42. .social-icons .social-icon-fb::before {
  43.   background-image: url("...");
  44. }
  45. .social-icons .social-icon-vk::before {
  46.   background-image: url("...");
  47. }
  48. .social-icons .social-icon-telegram::before {
  49.   background-image: url("...");
  50. }
  51. .social-icons .social-icon-youtube::before {
  52.   background-image: url("...");
  53. }
 
Кнопки «Поделиться» и «Мне нравится»

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

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

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

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

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

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

Image

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

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

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

При этом для разных сетей код микроразметки может отличаться:
 
  1. <!-- для Facebook и ВКонтакте (протокол Open Graph) -->
  2. <meta property="og:title" content="Заголовок поста" />
  3. <meta property="og:description" content="Описание поста" />
  4. <meta property="og:image" content="Ссылка на изображение" />
  5. <meta property="og:url" content="Адрес страницы" />
  6. <meta property="og:site_name" content="Название сайта" />
  7. <!-- для Twitter -->
  8. <meta name="twitter:site" content="Название сайта" />
  9. <meta name="twitter:title" content="Заголовок поста" />
  10. <meta name="twitter:description" content="Описание поста" />
 
Данный код необходимо прописать в разделе <head>.
Полезные инструменты:

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

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

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

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

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

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

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

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

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

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

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

URL+адреса прямого доступа для социальных сетей Twitter, Facebook, ВКонтакте, Telegram имеют следующий вид:
 
  1. https://twitter.com/intent/tweet?text={текст твита}&url={адрес страницы}&via={имя пользователя}
  2. https://www.facebook.com/sharer/sharer.php?u={адрес страницы}
  3. https://vk.com/share.php?url={адрес страницы}
  4. https://t.me/share/url?url={адрес страницы}&text={заголовок страницы}
 
Одни из них принимают только один параметр, а другие – несколько. При этом необходимо отметить, что значения параметров должны быть закодированы. Т.е. пробелы и некоторые специальные символы должны быть преобразованы в специальные последовательности.

В зависимости от используемого языка или фреймворка кодирования URL может выполняться по-разному.
Например, в PHP его выполнить можно с помощью функции urlencode :
 
  1. $url = urlencode('https://itchief.ru/');
 
В JavaScript кодирование полного URI осуществляется посредством encodeUR, а одного значения параметра через encodeURIComponent:
 
  1. const url = encodeURI('https://itchief.ru/');
 
Следовательно, HTML код ссылок для публикации материала в социальных сетях будут выглядеть следующим образом:
 
  1. <a href="https://twitter.com/intent/tweet?text={текст твита}&url={адрес страницы}&via={имя пользователя}" target="_blank">Поделиться ссылкой в Twitter</a>
  2. <a href="https://www.facebook.com/sharer/sharer.php?u={адрес страницы}" target="_blank">Поделиться ссылкой в Facebook</a>
  3. <a href="https://vk.com/share.php?url={адрес страницы}" target="_blank">Поделиться ссылкой в ВКонтакте</a>
  4. <a href="https://t.me/share/url?url={адрес страницы}&text={заголовок страницы}" target="_blank">Поделиться ссылкой в Telegram</a>
 
Кроме этого, чтобы публикуемая запись был оформлена корректно незабываем добавить на каждую свою страницу мета+теги для социальных сетей.

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

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

На клиенте, т.е. с помощью JavaScript, это можно сделать так:
 
  1. document.addEventListener('DOMContentLoaded', function () {
  2.   const createShareHtml = function (title, shareData) {
  3.     let anchorList = [];
  4.     const anchorTemplate = function (item) {
  5.       return '<a href="' + item.href + '" target="_blank" rel="noopener">' + item.title + '</a>';
  6.     }
  7.     const wrapperTemplate = function (title, anchorList) {
  8.       return '<div class="social-share__title">' + title + '</div><div class="social-share__items">' + anchorList.join('') + '</div>';
  9.     }
  10.     shareData.forEach(function (item) {
  11.       anchorList.push(anchorTemplate(item));
  12.     })
  13.     return wrapperTemplate(title, anchorList);
  14.   }
  15.   const $socialShare = document.querySelector('.social-share');
  16.   if ($socialShare) {
  17.     const url = encodeURIComponent(location.protocol + '//' + location.host + location.pathname);
  18.     const title = encodeURIComponent(document.title);
  19.     const twitterUserName = 'nasvyazi_world';
  20.     const shareData = [{
  21.         title: 'Twitter',
  22.         href: 'https://twitter.com/intent/tweet?text=' + title + '&url=' + url + '&via=' + twitterUserName,
  23.       },
  24.       {
  25.         title: 'Facebook',
  26.         href: 'https://www.facebook.com/sharer/sharer.php?u=' + url,
  27.       },
  28.       {
  29.         title: 'ВКонтакте',
  30.         href: 'https://vk.com/share.php?url=' + url,
  31.       },
  32.       {
  33.         title: 'Telegram',
  34.         href: 'https://t.me/share/url?url=' + url + '&text=' + title,
  35.       }
  36.     ];
  37.     const $html = createShareHtml('Поделиться этим материалом в социальных сетях:', shareData);
  38.     $socialShare.innerHTML = $html;
  39.   }
  40. });
 
Место, в которое они будут помещены на странице в данном случае необходимо разметить посредством создания пустого элемента <div> с классомsocial+share:
 
  1. <div class="social-share"></div
 
Это решение показывает, что самостоятельно создать набор кнопок «Поделиться» без зависимостей довольно просто.

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

Количество соцсетей в этом скрипте указывается в переменной shareData (в виде массива объектов):
 
  1. const shareData = [
  2.   {
  3.     title: 'Twitter',
  4.     href: `https://twitter.com/intent/tweet?text=${title}&url=${url}&via=${twitterUserName}`
  5.   },
  6.   ...
  7. ];
 
В ключе «title» мы задаём название соцсети, а в «href» – её URL-адрес для публикаций.

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

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

Представленный выше вариант можно стилизовать, например, представив его в виде кнопок с иконками. А также ещё сделать так, чтобы при нажатии на них форма для публикации открывалась не в новой вкладке, а в popup окне. Чтобы провести эти изменения нам нужно будет создать стили и отредактировать JavaScript код.
Готовое решение:
 
Image
 
  1. <style>
  2.   .social-share {
  3.     background-color: #f0f8f3;
  4.     padding-top: 0.5rem;
  5.     padding-bottom: 0.75rem;
  6.   }
  7.   .social-share__title {
  8.     text-align: center;
  9.     font-weight: bold;
  10.     font-size: .875rem;
  11.     margin-bottom: 0.5rem;
  12.   }
  13.   .social-share__items {
  14.     display: flex;
  15.     justify-content: center;
  16.     list-style: none;
  17.     margin-top: 0;
  18.   }
  19.   .social-share__item {
  20.     position: relative;
  21.     background-color: #00832d;
  22.     display: block;
  23.     -webkit-user-select: none;
  24.     -moz-user-select: none;
  25.     -ms-user-select: none;
  26.     user-select: none;
  27.     transition: background-color .3s ease-in-out;
  28.     width: 2.5rem;
  29.     height: 2.5rem;
  30.     margin-left: 0.25rem;
  31.     margin-right: 0.25rem;
  32.     border-radius: .25rem;
  33.   }
  34.   .social-share__item:hover {
  35.     background-color: #006624;
  36.   }
  37.   .social-share__item::before {
  38.     content: "";
  39.     position: absolute;
  40.     width: 1.2rem;
  41.     height: 1.2rem;
  42.     left: .65rem;
  43.     top: .65rem;
  44.     background: transparent no-repeat center center;
  45.     background-size: 100% 100%;
  46.   }
  47.   .social-share__item_twitter::before {
  48.     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");
  49.   }
  50.   .social-share__item_fb::before {
  51.     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");
  52.   }
  53.   .social-share__item_vk::before {
  54.     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");
  55.   }
  56.   .social-share__item_telegram::before {
  57.     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");
  58.   }
  59. </style>
  60.  
  61. <div class="social-share"></div>
  62.  
  63. <script>
  64. document.addEventListener('DOMContentLoaded', function () {
  65.   const createShareHtml = function (title, shareData) {
  66.     let anchorList = [];
  67.     const anchorTemplate = function (item) {
  68.       return '<a href="' + item.href + '" class="social-share__item social-share__item_' + item.name +
  69.         '" title="' + item.title + '" onclick="' + item.onclick + '"></a>';
  70.     }
  71.     const wrapperTemplate = function (title, anchorList) {
  72.       return '<div class="social-share__title">' + title + '</div><div class="social-share__items">' +
  73.         anchorList.join('') + '</div>';
  74.     }
  75.     shareData.forEach(function (item) {
  76.       anchorList.push(anchorTemplate(item));
  77.     })
  78.     return wrapperTemplate(title, anchorList);
  79.   }
  80.   const $socialShare = document.querySelector('.social-share');
  81.   if ($socialShare) {
  82.     const url = encodeURIComponent(location.protocol + '//' + location.host + location.pathname);
  83.     const title = encodeURIComponent(document.title);
  84.     const twitterUserName = 'itchief_ru';
  85.     const shareData = [{
  86.         name: 'twitter',
  87.         title: 'Twitter',
  88.         href: 'https://twitter.com/intent/tweet?text=' + title + '&url=' + url + '&via=' + twitterUserName,
  89.         onclick: 'window.open(this.href, \'Twitter\', \'width=800,height=300,resizable=yes,toolbar=0,status=0\'); return false'
  90.       },
  91.       {
  92.         name: 'fb',
  93.         title: 'Facebook',
  94.         href: 'https://www.facebook.com/sharer/sharer.php?u=' + url,
  95.         onclick: 'window.open(this.href, \'Facebook\', \'width=640,height=436,toolbar=0,status=0\'); return false'
  96.       },
  97.       {
  98.         name: 'vk',
  99.         title: 'ВКонтакте',
  100.         href: 'https://vk.com/share.php?url=' + url,
  101.         onclick: 'window.open(this.href, \'ВКонтакте\', \'width=800,height=300,toolbar=0,status=0\'); return false'
  102.       },
  103.       {
  104.         name: 'telegram',
  105.         title: 'Telegram',
  106.         href: 'https://t.me/share/url?url=' + url + '&title=' + title,
  107.         onclick: 'window.open(this.href, \'Telegram\', \'width=800,height=300,toolbar=0,status=0\'); return false'
  108.       }
  109.     ];
  110.     const $html = createShareHtml('Поделиться этим материалом в социальных сетях:', shareData);
  111.     $socialShare.innerHTML = $html;
  112.   }
  113. });
  114. </script>
 
Создание соцкнопок посредством PHP

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

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

Например, на PHP это можно сделать так:
 
  1. // заголовок для блока "Поделиться"
  2. $shareTitle = 'Поделиться этим материалом в социальных сетях:';
  3. // url страницы
  4. $url = urlencode((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'] . explode('?', $_SERVER['REQUEST_URI'], 2)[0]);
  5. // имя пользователя в Twitter
  6. $twitterUserName = urlencode('itchief_ru');
  7. // title страницы
  8. $title = urlencode('...');
  9. // share данные
  10. $shareData = [
  11.   'twitter' => [
  12.     'title' => 'Twitter',
  13.     'href' => 'https://twitter.com/intent/tweet?text=' . $title . '&url=' . $url . '.&via=' . $twitterUserName,
  14.     'onclick' => 'window.open(this.href, \'Twitter\', \'width=800,height=300,resizable=yes,toolbar=0,status=0\'); return false'
  15.   ],
  16.   'fb' => [
  17.     'title' => 'Facebook',
  18.     'href' => 'https://www.facebook.com/sharer/sharer.php?u=' . $url,
  19.     'onclick' => 'window.open(this.href, \'Facebook\', \'width=640,height=436,toolbar=0,status=0\'); return false'
  20.   ],
  21.   'vk' => [
  22.     'title' => 'ВКонтакте',
  23.     'href' => 'https://vk.com/share.php?url=' . $url,
  24.     'onclick' => 'window.open(this.href, \'ВКонтакте\', \'width=800,height=300,toolbar=0,status=0\'); return false'
  25.   ],
  26.   'telegram' => [
  27.     'title' => 'Telegram',
  28.     'href' => 'https://t.me/share/url?url=' . $url . '&title=' . $title,
  29.     'onclick' => 'window.open(this.href, \'Telegram\', \'width=800,height=300,toolbar=0,status=0\'); return false'
  30.   ]
  31. ];
  32. $anchorList = [];
  33. foreach ($shareData as $key => $value) {
  34.   $anchorList[] = '<a href="' . $value['href'] . '" class="social-share__item social-share__item_' . $key . '" title="' . $value['title'] . '" onclick="' . $value['onclick'] . '"></a>';
  35. }
  36. $anchors = implode($anchorList);
  37. $html = '<div class="social-share__title">' . $shareTitle . '</div><div class="social-share__items">' . $anchors . '</div>';
  38. echo '<div class="social-share">' . $html . '</div>';
 
 
 
 
 
—
12:34
254
Скиталец Incognito 1285
Скиталец Incognito 1285
Поделиться статьёй
No comments yet. Be the first to add a comment!
Loading...