Как сделать кнопки поделиться в Телеграм и Viber

Как сделать кнопку поделиться в Вайбере

Для того, чтоб сделать кнопку «поделиться в Вайбере» вам не нужно подключать сторонних скриптов или использовать какие-то сервисы. Достаточно просто вставить код, который я привел ниже, в место, где вы хотите разместить кнопку шаринга в Viber.

<a id="share_viber">Кнопка поделиться в Viber</a>
    <script>
    var buttonID = "share_viber";
    var text = "Текст сообщения: ";
    document.getElementById(buttonID).setAttribute('href', "viber://forward?text=" + encodeURIComponent(text + " " + window.location.href));
    </script>

var buttonID — это id по которому скрипт будет обращаться к вашей кнопке или ссылке (в нашем случае ссылке), его можно заменить на любое значение, var text — Текст, который будет отправлен вместе со ссылкой получателю.

С помощью encodeURIComponent(window.location.href) мы отправляем именно тот url (ту страницу), на которой находимся в данный момент.

Итак, с Вайбером разобрались, переходим к Telegram.

Как сделать кнопку поделиться в Телеграме с помощью js

Самый простой способ сделать кнопку шаринга в Telegram с помощью js:

<a id="share_telegram">Поделиться в Телеграм</a>

<script>
    var telegrambuttonID = "share_telegram";
        document.getElementById(telegrambuttonID).setAttribute('href', "https://telegram.me/share/url?url=" + encodeURIComponent(window.location.href));
    </script>

Данный код нужно просто вставить в то место, в котором нужно вывести кнопку share в Телеграм.

telegrambuttonID — это id по которому скрипт будет обращаться к вашей ссылке или кнопке.

encodeURIComponent(window.location.href) — это URL вашей страницы (на которой находимся в данный момент).

Сделать кнопку расшарить в Телеграм без использования js

Также можно сделать кнопку «Поделиться в Телеграм» и без использования js.

<a href="https://telegram.me/share/url?url=Заменить на Ваш URL
поста&amp;text=ЗАМЕНИТЬ НА ВАШ ТЕКСТ>Поделиться в Телеграм</a>

Если же нужно добавить ссылку на лендинг или только на одну страницу сайта, то вам нужно будет только заменить кусок кода «ЗАМЕНИТЬ НА ВАШ ТЕКСТ» на текст, который будет приходить получателю вместе со ссылкой на ваш сайт, а «Заменить на Ваш URL поста» — на адрес вашей страницы.

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

Добавить кнопку «Поделиться в Telegram» на сайт с помощью php и html

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

Для того, чтоб получить полный URL страницы, на которой мы сейчас находимся можно использовать $_SERVER[‘HTTPS’] . Полный пример кода:

<?php $url = ((!empty($_SERVER['HTTPS'])) ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
echo $url; ?>

И тогда наш код кнопки шаринга в Телеграм превращается в вот такую конструкцию:

<a href="https://telegram.me/share/url?url=<?php $url = ((!empty($_SERVER['HTTPS'])) ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; echo $url; ?>&amp;text=ЗАМЕНИТЬ НА ВАШ ТЕКСТ>Поделиться в Телеграм</a>

Вариант с использованием JS кажется более изящным 🙂
Но выбирать вам.

Также можно использовать различные сервисы для генерации кнопок шаринга, но вариант без использования сторонних скриптов более предпочтителен, так как он не сильно грузит сайт. А, как мы все знаем, в последнее время Гугл очень сильно обращает внимание на скорость загрузки станицы.

Теперь вы можете стилизовать свои кнопки шаринга под любой дизайн сайта и использовать в своих проектах.

Если у вас остались вопросы, то пишите об этом в комментариях. До новых встреч!