Список ссылок для кнопок «поделиться» для популярных соцсетей и месседжеров.
Помните, что необходимо изменить <URL> на имя Вашей переменной в PHP, JS или где там...
Примерно так:
http://www.facebook.com/sharer.php?u=https://inverser.pro
Соцсети:
Facebook:
http://www.facebook.com/sharer.php?u=<URL>
VK:
http://vk.com/share.php?url=<URL>
OK (одноклассники):
https://connect.ok.ru/offer?url=<URL>
Приложения для сообщений (месседжеры):
Telegram:
https://t.me/share/url?url=<URL>
Viber:
viber://forward?text=<URL>
Whatsapp:
whatsapp://send?text=<URL>
Например, можно использовать такой HTML код:
<div>Поделиться</div>
<div class="cp in mpI" title="Facebook" onclick="window.open('http://www.facebook.com/sharer.php?u=<URL>')"><svg viewBox="0 0 60 60" width="30px" class="svg-fb"><use xlink:href="/social_and_messeenger_icons.svg#fb"></use></svg></div>
<div class="cp in mpI" title="Одноклассники" onclick="window.open('https://connect.ok.ru/offer?url=<URL>')"><svg viewBox="0 0 94 94" width="30px" class="svg-ok"><use xlink:href="/social_and_messeenger_icons.svg#ok"></use></svg></div>
<div class="cp in mpI" title="Вконтакте" onclick="window.open('http://vk.com/share.php?url=<URL>')"><svg viewBox="0 0 94 94" width="30px" class="svg-vk"><use xlink:href="/social_and_messeenger_icons.svg#vk"></use></svg></div>
<div class="cp in mpI" title="Телеграм" onclick="window.open('https://t.me/share/url?url=<URL>')"><svg viewBox="0 0 300 300" width="30px" class="svg-tg"><use xlink:href="/social_and_messeenger_icons.svg#tg"></use></svg></div>
<div class="cp in mpI" title="Viber" onclick="location.href='viber://forward?text=<URL>'"><svg viewBox="0 0 504 504" width="30px" class="svg-vi"><use xlink:href="/social_and_messeenger_icons.svg#vi"></use></svg></div>
<div class="cp in mpI" title="Whatsapp" onclick="location.href='whatsapp://send?text=<URL>'"><svg viewBox="0 0 512 512" width="30px" class="svg-wa"><use xlink:href="/social_and_messeenger_icons.svg#wa"></use></svg></div>Скачать сам SVG файл
Стили:
.svg-fb{fill:#3A559F}
.svg-vk{fill:#45668E}
.svg-wa{fill:#00A859}
.svg-vi{fill:#7D51A0}
.svg-ok{fill:#F7931E}
.svg-tg{fill:#fff;background:#0088CC;border-radius:3px;padding:3px}
Получится вот такое:
