Как сделать кнопки поделиться в соц сетях на сайт html

Кнопки «Поделиться в социальных сетях» без сторонних плагинов (Share Social Links)

Простые кнопки поделиться в социальных сетях без использования сторонних плагинов и скриптов, используется прямая ссылка для шеринга. В данном примере взят рабочий код с сайта на CMS WordPress, для статического сайта измените:

— на адрес страницы, которую нужно зашерить,
— замените на заголовок страницы, которой вы делитесь в соцсети,
— замените на название сайта.

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

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

Самый простой и удобный таймер обратного отсчета HTML CSS Javascript Указываем дату окончания работы таймера…

Форма обратной связи с прикреплением файла (attach) Самый простой внешний вид формы обратной связи с…

В общем, из-за санкций против российских компаний возникли некоторые сложности у многих украинских компаний. Допустим,…

Самый простой пример реализации табов на сайте. Код максимально простой и легкий, не нужно никаких…

Кнопки «поделиться» для сайта

Рассмотрим, как добавить социальные кнопки «поделиться» для вашего сайта. Для решения данной задачи мы не будем использовать сторонние сервисы, поэтому наши кнопки «поделиться» не будут оказывать отрицательного влияния на загрузку сайта и будут стабильно работать.

.share-buttons < display: flex; flex-wrap: wrap; >.share-buttons a < margin-bottom: 5px; width: 40px; height: 40px; >.share-buttons a:not(:last-child) < margin-right: 5px; >.share-buttons .facebook < background: url("../img/share-btns.png") no-repeat left top; >.share-buttons .vkontakte < background: url("../img/share-btns.png") no-repeat -168px top; >.share-buttons .ok < background: url("../img/share-btns.png") no-repeat -126px top; >.share-buttons .twitter < background: url("../img/share-btns.png") no-repeat -42px top; >.share-buttons .pinterest < background: url("../img/share-btns.png") no-repeat -210px top; >.share-buttons .mail < background: url("../img/share-btns.png") no-repeat -294px top; >.share-buttons .telegram < background: url("../img/share-btns.png") no-repeat -672px top; >

Так просто можно добавить кнопки «поделиться» на ваш сайт.

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

Важно лишь верно заполнить ссылки, которые позволяют делится контентом текущей страницы.

Поделиться в фейсбук

https://www.facebook.com/sharer.php?u=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Поделиться вконтакте

https://vkontakte.ru/share.php?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Поделиться в ok

https://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ&st.comments=ОПИСАНИЕ

Поделиться в телеграм

https://telegram.me/share/url?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Поделиться в pinterest

https://ru.pinterest.com/pin/create/button/?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Для pinterest необходимо так же добавить изображение записи (страницы)

data-media="АДРЕС_ИЗОБРАЖЕНИЯ"

Поделиться в twitter

https://twitter.com/intent/tweet?text=ТАЙТЛ_СТАТЬИ(ЗАГОЛОВОК). Описание. Ссылка

Поделиться в @Мой мир mail.ru

https://connect.mail.ru/share?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Для @Мой мир необходимо так же добавить изображение записи (страницы).

data-media="АДРЕС_ИЗОБРАЖЕНИЯ"

Используя данные ссылки, вы можете создать виджет абсолютно любого вида и размера. Например, вместо спрайта что мы использовали ранее — можете воспользоваться шрифтовыми иконками fontAwesome:

И далее добавлять необходимые стили.

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

Поделиться в Linkedin

Чтобы поделиться в Linkedin используйте следующий код.

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

Если вам понравилась данная статья, то возможно и ссылки на мессенджеры окажется для вас полезной.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Поделиться с друзьями:

Статьи из данной категории:

JavaScript: Работа с Массивами
Наличие Динамически Добавленного Элемента
Стилизация Input File
Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
Стилизация Скролла
События Формы

Комментарии ( 5 )

16/12/2020, 03:26

Подскажите пожалуйста, как быть, если я пишу сайт на локальном сервере Open Server, какой полный адресс указывать? https://www.facebook.com/sharer.php?u=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ на типо: /roads/road_1.php?

Only to top
22/12/2020, 21:06

А зачем вам указывать локальный адрес? Вы же его не будите расшаривать. Вам нужно указывать глобальный адрес (адрес сайта, который будет на хостинге).

26/12/2020, 02:36

Спасибо! Но, не совсем понял, можете объяснить если не сложно? Или показать хотя бы как пример как записать адресс в моем случае? Ведь домена у меня еще нет. Просто пишется код в open server. И где мне тогда в моем случае взять глобальный адресс?

Кнопки поделиться (share) в социальных сетях

Наверно одно из не мало важных вещей на сайте, это кнопки поделиться в социальных сетях. Почему это важно? Потому что с каждым днем количество сайтов увеличивается и с каждым днем пробиться в топ в поисковиках все сложнее. Если вашими страницами будут делиться в социальных сетях, то поисковики воспринят, что сайт полезный и позиции в выдаче улучшиться!

Кнопки share

Пример: See the Pen Share buttons by Aleksandrs (@CoolS2) on CodePen.0 И так, 6 топовых социальных сетей, которые обычно ставят себе на сайт. Так же не большая анимация, которая возможно привлечет внимание.

Разбор кода

HTML Создадим блок, в котором будут наши ссылки, каждой ссылке пропишем путь в соц. сеть вместе с параметрами (для теста, вместо параметров, я указал в квадратных скобках, что за параметр нужно вставлять, к примеру где [link], нужно указать ссылку на страницу, который будут делиться) Внутри каждой ссылки добавим картинку (логотип соц. сети), в примере я использовал фонт Font Awesome

CSS Задаем фиксированную ширину и высоту, добавляем обводку и при наводке мышкой, делаем ее синего цвета. Саму анимацию поддергивания я честно спер с глубин интернета. (На данный момент реализовано столько всего и так грамотно, что зачем изобретать велосипед?

Есть готовая пачка анимаций, которой можно бесплатно пользоваться.

 a < text-decoration: none; >.share-buttons < max-width: 300px; margin:0 auto; >.share-block < display: inline-block; background: #fff; width: 30px; height: 30px; margin-bottom: 16px; border: 1px solid #ccc; text-align: center; transition: 0.5s; >.share-block:hover < animation: share-animation 0.82s cubic-bezier(.36,.07,.19,.97) both; border-color: #0c7fd7; >.share-block i < font-size: 12px; position: relative; top: 5px; >.share-block span < display: block; position: relative; top: -9px; font-size: 10px; line-height: 1; >.share-buttons .facebook < color: #3b5998; >.share-buttons .vk < color: #5E82A8; >.share-buttons .linkedin < color: #0976b4; >.share-buttons .pinterest < color: #cc2127; >.share-buttons .google < color: #d73925; >.share-buttons .twitter < color: #55acee; >@keyframes share-animation < 10%, 90% < transform: translate3d(-1px, 0, 0); >20%, 80% < transform: translate3d(2px, 0, 0); >30%, 50%, 70% < transform: translate3d(-4px, 0, 0); >40%, 60% < transform: translate3d(4px, 0, 0); >>

JavaScript Тут javascript не обязателен, так как все важное у нас в ссылке, яваскриптом мы задаем размеры нашему попапу.

 Share = < me : function(el)< Share.popup(el.href); return false; >, popup: function(url) < window.open(url,'','toolbar=0,status=0,width=626,height=436'); >>;

Вот и все дела! Если у вас есть вопросы или можете поделиться вариантом получше, пишите в комментариях! Так же можете почитать «Как скрыть блок при клике за его пределами?»

Читать:

Как подобрать чашу для мультиварки по размеру

Добавить на сайт кнопки поделиться в соц сетях без плагинов и скриптов — возможно ли?

Всем привет! Есть сайт на wordpress, хочу добавить в определенное место кнопки поделиться в соц сетях (вконтакте,фейсбук, инстаграм) не задействуя плагины или скрипты. Или без подключения скриптов не обойтись? Подскажите оптимальный вариант

 " target="_blank" rel="nofollow"> " target="_blank" rel="nofollow">

п.с. для фейсбука и контакта нашли, для инстаграмма ссылку на группу

Вопрос задан более трёх лет назад
15127 просмотров

Комментировать
Решения вопроса 2

Руководитель департамента profitcentr.com

Конечно возможно. Всё возможно если захотеть!
А берёшь просто разбираешь URL там же всё легко.
Вот я делал кому то:

function decodsocial($text)< $conv = array ( "%D0%B0", "%D0%B1", "%D0%B2", "%D0%B3", "%D0%B4", "%D0%B5", "%D1%91", "%D0%B6", "%D0%B7", "%D0%B8", "%D0%B9", "%D0%BA", "%D0%BB", "%D0%BC", "%D0%BD", "%D0%BE", "%D0%BF", "%D1%80", "%D1%81", "%D1%82", "%D1%83", "%D1%84", "%D1%85", "%D1%86", "%D1%87", "%D1%88", "%D1%89", "%D1%8A", "%D1%8B", "%D1%8C", "%D1%8D", "%D1%8E", "%D1%8F", "%D0%90", "%D0%91", "%D0%92", "%D0%93", "%D0%94", "%D0%95", "%D0%81", "%D0%96", "%D0%97", "%D0%98", "%D0%99", "%D0%9A", "%D0%9B", "%D0%9C", "%D0%9D", "%D0%9E", "%D0%9F", "%D0%A0", "%D0%A1", "%D0%A2", "%D0%A3", "%D0%A4", "%D0%A5", "%D0%A6", "%D0%A7", "%D0%A8", "%D0%A9", "%D0%AA", "%D0%AB", "%D0%AC", "%D0%AD", "%D0%AE", "%D0%AF" ); $ssil = urlencode("http://".$_SERVER['HTTP_HOST']."/?r=$user"); $titles = decodsocial("Партнёрская программа ".$_SERVER['HTTP_HOST'].""); $mytitle= "Поделится своей рефссылкой в";

  Livjournal" href="http://www.livejournal.com/update.bml?subject=&event=" target="_blank"> Vk" href="http://vk.com/share.php?url=&title=&description=&image=" target="_blank"> Twitter" href="http://twitter.com/intent/tweet?status= " target="_blank"> Mail" href="http://connect.mail.ru/share?url=&title=&description=&imageurl=" target="_blank"> Facebook" href="http://www.facebook.com/sharer/sharer.php?src=sp&u=&t==&description&picture" target="_blank"> Odnoklassniki" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st._surl=" target="_blank"> Events.Webmoney" href="//events.webmoney.ru/sharer.aspx?url=" target="_blank">

.social_ico a .social_ico #jj .social_ico #fb .social_ico #tw .social_ico #mail .social_ico #ok .social_ico #vk .social_ico

вот картинка спрайтовая
таким же макаром и картинку добавляй посмотри какой у них там атрибут в урле отвечает за картинку и подставляй за вместо него свою переменную в которой будет нужная картинка указана.
P.s. function decodsocial возможно не понадобиться если используешь utf-8. Я её использовал чтобы передать "Партнёрская программа" с сайта кодировкой 1251.=( Если зависимую от урлов надо ссыль постить, то /?r=$user заменяй на $_SERVER["REQUEST_URI"]

Ответ написан более трёх лет назад
Комментировать
Нравится 9 Комментировать

27cm

TODO: Написать статус

Вы взяли и в тупую ко всем сервисам сделали ссылки на sharer.php?url= , вот почти нигде и не работает. Гуглите правильную ссылку для каждого сервиса отдельно по запросу вроде "vkontakte share link".

Ссылка для вконтакта:
http://vk.com/share.php?url=

В инстаграме разве можно делиться ссылками?

Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
Ответы на вопрос 3
Ответ написан более трёх лет назад
Нравится 3 1 комментарий

TMGLUK

Самый подходящий вариант
xmoonlight @xmoonlight
https://sitecoder.blogspot.com
precosts.com - КОД СОЦ. КНОПОК из исходного кода страницы - копирните отсюда.
Ответ написан более трёх лет назад
Нравится 1 2 комментария
ligisayan @ligisayan Автор вопроса
xmoonlight не понял - вы что-то рекламируете?
xmoonlight @xmoonlight
ligisayan: нет там кнопки стоят - код возьмите оттуда.

OKrasnov

Ответ написан более трёх лет назад
Нравится 1 6 комментариев
ligisayan @ligisayan Автор вопроса

BizDirect

Чтобы делились именно соответствующей страницей, а не лого, как у xmoonlight )), вам без JS не обойтись.

ligisayan @ligisayan Автор вопроса
Андрей Бердов посмотрите внимательно решение Андрей - там реализация без скриптов

VELIK505

Андрей Бердов: как это нельзя без js? Если вы имеите ввиду допустим каждая статья отдельная страница и как той или иной делиться? Да очень просто $ssil = urlencode("http://".$_SERVER['HTTP_HOST']."/?r=$user"); это просто я рефку постил а если надо зависимую от страниц то ведь ?r=$user можно заменить на и проблема решена=) ligisayan: понял?

ligisayan @ligisayan Автор вопроса
Андрей я-то да, спасибо. еще вчера отметил решением! )

Aison

насчёт "поделится от яндекс" я бы не стал ими пользоваться

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

". стилизация иконок в блоке Поделиться не предусмотрена. ", ". опцию data-bare, при указании которой перестают подключаться все CSS-стили. "

Вообще-то немного странно звучат эти фразы.
Поясню, почему:
- в вашем блоке присутствует несколько избыточная информация, так как выбирая, к примеру, всего 5 кнопок, остальные все равно грузятся, так как почти весь код вместе с иконками (которые svg) и "стилями" находится внутри основного скрипта (его размер, к сведению 87Кб);
- компания, которая требует оптимизации кода от индексируемых ей сайтов, предлагает код, половина которого, в случае неполного выбора, просто не будет работать. Страница, набирающая подобных блоков даже 5-10 штук, уже увеличивается на 1 Мб, не считая времени на выполнение 1Мб-го кода! А предлагая отключать все стили, Вы вынуждаете подключать свои, что дополнительно увеличивает код!;
- SVG - это векторный формат, который в вашем случае описан прямо в скрипте, не имеет рамок, может быть после описания окрашен в любой цвет и оформлен "как душа пожелает" в любой момент при его вызове.;

Вы, конечно, имеете полное право выступать в качестве законодателей, но странно, что где-то свобода действий предполагается вами, а где-то нет.

"Если уж делать, то делать хорошо!" - разве не ваш девиз?

автор под ником: drawline