HTML редактор | ИТ Шеф

<!doctype html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Создание share-ссылок для социальных сетей с помощью JavaScript</title>
  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

html {
      font-family: sans-serif;
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      text-align: left;
      background-color: #fff;
    }

/* social-share */
    .social-share {
      background-color: #f5f5f5;
      text-align: center;
      padding-top: 1rem;
      padding-bottom: 1rem;
    }

.social-share__items {
      display: inline-block;
    }

.social-share__items a {
      text-decoration: none;
      color: #1976d2;
      margin-left: 8px;
      margin-right: 8px;
    }

.social-share__items a:hover {
      color: #0d47a1;
    }
  </style>
</head>

<body>

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

<script>
    document.addEventListener("DOMContentLoaded", () => {
      const createShareHtml = (title, shareData) => {
        let anchorList = [];
        const anchorTemplate = (item) => {
          return `<a href="${item.href}" target="_blank" rel="noopener">${item.title}</a>`;
        }
        const wrapperTemplate = (title, anchorList) => {
          return `<div class="social-share__title">${title}</div><div class="social-share__items">${anchorList.join('')}</div>`
        }
        shareData.forEach(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;
      }
    });
  </script>

</body>

</html>