Кнопки поделиться только html

Элементарные социальные share-кнопки

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

HTML

Share = < vkontakte: function(purl, ptitle, pimg, text) < url = 'http://vkontakte.ru/share.php?'; url += 'url=' + encodeURIComponent(purl); url += '&title=' + encodeURIComponent(ptitle); url += '&description=' + encodeURIComponent(text); url += '&image=' + encodeURIComponent(pimg); url += '&noparse=true'; Share.popup(url); >, odnoklassniki: function(purl, text) < url = 'http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1'; url += '&st.comments=' + encodeURIComponent(text); url += '&st._surl=' + encodeURIComponent(purl); Share.popup(url); >, facebook: function(purl, ptitle, pimg, text) < url = 'http://www.facebook.com/sharer.php?s=100'; url += '&p[title]=' + encodeURIComponent(ptitle); url += '&p[summary]=' + encodeURIComponent(text); url += '&p[url]=' + encodeURIComponent(purl); url += '&p[images][0]=' + encodeURIComponent(pimg); Share.popup(url); >, twitter: function(purl, ptitle) < url = 'http://twitter.com/share?'; url += 'text=' + encodeURIComponent(ptitle); url += '&url=' + encodeURIComponent(purl); url += '&counturl=' + encodeURIComponent(purl); Share.popup(url); >, mailru: function(purl, ptitle, pimg, text) < url = 'http://connect.mail.ru/share?'; url += 'url=' + encodeURIComponent(purl); url += '&title=' + encodeURIComponent(ptitle); url += '&description=' + encodeURIComponent(text); url += '&imageurl=' + encodeURIComponent(pimg); Share.popup(url) >, popup: function(url) < window.open(url,'','toolbar=0,status=0,width=626,height=436'); >>; 

Счетчик шаринга

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

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

 popup: function(url,soc) < window.open(url,'','toolbar=0,status=0,width=626,height=436'); $.post('/social/share', , function (data)<>); > 

В моем случае принимающий скрипт достает с URL айдишник записи, заносит в табличку запись и/или увеличивает счетчик на 1 для конкретной социальной сети.

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

Источник

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

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

.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.

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

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

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

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

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

Источник

Как добавить кнопки «Поделиться» на страницу

Что делаем: подключаем к сайту кнопки, чтобы читатели могли быстро поделиться статьей в соцсетях.

Время: 3 минуты.

С чем работаем: HTML-страница.

Что понадобится: блок «Поделиться» у Яндекса.

1. Выбираем нужные соцсети

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

2. Настраиваем внешний вид блока

Можно выбрать только иконки, иконки и меню (полезно, когда иконок много) и иконки маленького размера. На работоспособность сервиса это никак не повлияет.

3. Получаем код

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

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

Лайфхаки

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

Обычно, когда в соцсетях шерят сайты или статьи, на главную картинку для соцсетей попадает первая большая картинка на странице. Иногда это соответствует вашей задумке, а иногда нет — например, в соцсети уйдет ваш логотип или какая-то малозначительная картинка. Поэтому стоит сделать отдельную картинку для соцсетей и приложить ее к разметке OpenGraph, чтобы ваша статья всегда выглядела роскошно.

Источник

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

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

Постановка задачи

Без использования графики сделать кнопки «Поделиться ссылкой» для Хабра, которые максимально похожи на оригинальные.

Оригинал:

Картинка была специально обведена рамкой, чтобы не сливалась с дизайном самого Хабра.

Используемые технологии

border-radius, background: linear-gradient, box-shadow, text-shadow, transition 

Разбор кнопок по слоям

1. Рамка обводки закрашена линейным градиентом
2. Сама кнопка закрашена немного другим, но тоже линейным градиентом
3. Имеется блик, который также можно сделать div-ом
4. Некоторые буквы имеют тень

Схема:

Небольшое допущение картинки

Вы спросите меня: А как же можно сделать кнопку «Поделиться ссылкой в Twittere» без изображения?
Все очень просто, мы не будем использовать никакие сторонние изображения. Так как изображение логотипа Twittera — это небольшое изображение, примерно 11×11 пикселей, то мы его преобразуем в base64 и вставим прямо в css. Таким образом в нашем файле стилей css не будет обращения к изображению и мы экономим 1 get запрос к веб-серверу.

Единственный минус (проклятье всех верстальщиков): Internet Explorer плохо дружит с этим…

Альтернативное решение

Также можно было бы тут использовать html5 canvas, но я отбросил это решение, так как это было бы намного сложнее, чем сейчас уже есть.

Создание Градиентной обводки и основного градиента

Для создания градиента в обводке и самом блоке было принято решение создавать div размером 19×19 пикселей и заполнять его линейным градиентом. Далее в нем создавать div размером 17×17 пикселей, и с помощью отступов создавать видимость обводки.
Пример одного такого блока:

Решение

Вот, что смог сделать я, используя данные технологии и решения. Получилось очень даже похоже:

Исходный код

Html

Css

.share < background-color:#fff; >.share a < opacity: 0.5; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; -khtml-transition: all 0.6s ease; -ms-transition: all 0.6s ease; transition: all 0.6s ease; overflow:hidden; vertical-align:top; width: 19px; height: 19px; display:inline-block; border-radius:3px; text-decoration:none; >.share a:hover < opacity: 1; >.blick < width: 15px; height: 1px; background-color:#fff; margin:1px auto -1px auto; opacity: 0.5; border-radius: 3px 3px 9px 9px; >.tw < background-image: linear-gradient(bottom, #2f7eb6, #47adda); background-image: -moz-linear-gradient(bottom, #2f7eb6, #47adda); background-image: -o-linear-gradient(bottom, #2f7eb6, #47adda); background-image: -webkit-linear-gradient(bottom, #2f7eb6, #47adda); background-image: -ms-linear-gradient(bottom, #2f7eb6, #47adda); >.tw-gradient < background-image: linear-gradient(bottom, #388fce, #48aedb); background-image: -moz-linear-gradient(bottom, #388fce, #48aedb); background-image: -o-linear-gradient(bottom, #388fce, #48aedb); background-image: -webkit-linear-gradient(bottom, #388fce, #48aedb); background-image: -ms-linear-gradient(bottom, #388fce, #48aedb); border-radius:3px; width: 17px; height: 17px; margin:1px; >.tw-logo < background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAALCAYAAABLcGxfAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAACsSURBVHjalJHBCgFRFIa/0WSLnaUnsJSFB7D3CkrJnndQys4jWAgr76JmJdlI9kqfzTWNYdT8dTvde/7vP6dupFJGlVC7QJTr9YEEOANTYAyAinpQ12oj3GP15qd2agrMwuNdXakTv9VTicP4JvAE6sCoYP1TdqVOSC/SMfhSAHX/Bxj+Alrq5od5q0Z5YKAu1WvG+FAXajUTmgI1da4m6iVMameN7xOV/enXAESQMWIcyuGSAAAAAElFTkSuQmCC"); background-repeat:no-repeat; background-color: none; width: 12px; height: 11px; margin: 3px auto 0px auto; >.vk < background-image: linear-gradient(bottom, #3f6186, #6191bc); background-image: -moz-linear-gradient(bottom, #3f6186, #6191bc); background-image: -o-linear-gradient(bottom, #3f6186, #6191bc); background-image: -webkit-linear-gradient(bottom, #3f6186, #6191bc); background-image: -ms-linear-gradient(bottom, #3f6186, #6191bc); >.vk-gradient < background-image: linear-gradient(bottom, #456891, #5a87af); background-image: -moz-linear-gradient(bottom, #456891, #5a87af); background-image: -o-linear-gradient(bottom, #456891, #5a87af); background-image: -webkit-linear-gradient(bottom, #456891, #5a87af); background-image: -ms-linear-gradient(bottom, #456891, #5a87af); border-radius:3px; width: 17px; height: 17px; margin:1px; >.vk-logo < width:11px; height:11px; background-color: #fff; border-radius: 2px; margin: 3px auto 0px auto; overflow:hidden; box-shadow: 0px 1px 1px #666; >.vk-text < text-shadow:inset 0px 1px 1px #444; color: #496e92; padding:0px; font-size:10px; font-family:Arial; display:block; margin: -1px 0px 0px 2px; >.fb < background-image: linear-gradient(bottom, #3f5e9e, #5174bb); background-image: -moz-linear-gradient(bottom, #3f5e9e, #5174bb); background-image: -o-linear-gradient(bottom, #3f5e9e, #5174bb); background-image: -webkit-linear-gradient(bottom, #3f5e9e, #5174bb); background-image: -ms-linear-gradient(bottom, #3f5e9e, #5174bb); >.fb-gradient < background-image: linear-gradient(bottom, #4a68a8, #6087c0); background-image: -moz-linear-gradient(bottom, #4a68a8, #6087c0); background-image: -o-linear-gradient(bottom, #4a68a8, #6087c0); background-image: -webkit-linear-gradient(bottom, #4a68a8, #6087c0); background-image: -ms-linear-gradient(bottom, #4a68a8, #6087c0); border-radius:3px; width: 17px; height: 17px; margin:1px; >.fb-logo < margin: 0px auto 0px 6px; overflow:hidden; color:#fff; font-size:13px; font-family:Arial; font-weight:bold; text-shadow:0px 1px 1px #444; >.gp < background-image: linear-gradient(bottom, #bf3924, #e65a37); background-image: -moz-linear-gradient(bottom, #bf3924, #e65a37); background-image: -o-linear-gradient(bottom, #bf3924, #e65a37); background-image: -webkit-linear-gradient(bottom, #bf3924, #e65a37); background-image: -ms-linear-gradient(bottom, #bf3924, #e65a37); >.gp-gradient < background-image: linear-gradient(bottom, #cd3f28, #da5235); background-image: -moz-linear-gradient(bottom, #cd3f28, #da5235); background-image: -o-linear-gradient(bottom, #cd3f28, #da5235); background-image: -webkit-linear-gradient(bottom, #cd3f28, #da5235); background-image: -ms-linear-gradient(bottom, #cd3f28, #da5235); border-radius:3px; width: 17px; height: 17px; margin:1px; >.gp-logo

Источник