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

Содержание

Простые кнопки Поделиться в соцсетях без сторонних плагинов и скриптов
Html разметка кнопок
CSS оформление кнопок
Где взять ссылки для шаринга (sharelink)?
Внедрение кнопок поделиться в CMS WordPress и MODX
Плавающие красивые кнопки на svg спрайтах
Внедрение Open Graph
Усовершенствование кнопок поделиться для сайта при помощи jQuery

Простые кнопки Поделиться в соцсетях без сторонних плагинов и скриптов

Начнем с html разметки и внешнего вида (css) кнопок.

Html разметка кнопок

Напишем простенькую html разметку:

<ul class="social-icons">
    <li><a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
    <li><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></li>
    <li><a href="#" target="_blank"><i class="fab fa-vk"></i></a></li>
    <li><a href="#" target="_blank"><i class="fab fa-odnoklassniki"></i></a></li>
    <li><a href="#" target="_blank"><i class="fab fa-pinterest-square"></i></a></li>
    <li><a href="#" target="_blank"><i class="fab fa-linkedin"></i></li>
    <li><a href="#" target="_blank"><i class="fab fa-telegram"></i></a></li>
    <li><a href="#" target="_blank"><i class="fas fa-envelope"></i></a></li>
</ul>

Здесь я использую иконки от Font Awesome 5.15 (free). В случае если в вашем шаблоне он не используется, подключите его следующей строчкой:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/brands.min.css" integrity="sha512-apX8rFN/KxJW8rniQbkvzrshQ3KvyEH+4szT3Sno5svdr6E/CP0QE862yEeLBMUnCqLko8QaugGkzvWS7uNfFQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Кто проходит уроки по разработке сайтов на MODX и использует шаблон aranoz вам не нужно подключать font awesome и делать css оформление.

CSS оформление кнопок

Стилизуем немного нашу разметку при помощи CSS:

*, ::after, ::before {
    box-sizing: border-box;
}
ul.social-icons {
    list-style: none;
    margin: 0;
    padding: 0;
}
.social-icons li {
    display: inline-block;
    margin-right: 15px;
}
.social-icons li a {
    color: #666666 !important;
    text-decoration: none;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.social-icons li i {
    font-size: 14px;
    color: #999999;
}

На выходе должен получиться вот такой минималистичный блок с иконками соц. сетей:

Где взять ссылки для шаринга (sharelink)?

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

Копируем sharelink их и вставляем в нашу Html разметку.

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

Вот перечень актуальных ссылок шаринга на текущий момент:

https://www.facebook.com/sharer/sharer.php?u=https://site.ru
https://twitter.com/intent/tweet?url=https://site.ru&text=
https://pinterest.com/pin/create/button/?url=https://site.ru&media=&description=
https://www.linkedin.com/shareArticle?mini=true&url=https://site.ru
mailto:info@example.com?&subject=&cc=&bcc=&body=https://site.ru%0A
Дополнительно
viber://forward?text=https://site.ru
https://vk.com/share.php?url=https://site.ru
cmd=WidgetSharePreview&st.cmd=WidgetSharePreview&st._aid=ExternalShareWidget_SharePreview&st.title=&st.shareUrl=https://site.ru
https://telegram.me/share/url?url=https://site.ru
https://connect.ok.ru/dk?cmd=WidgetSharePreview&st.cmd=WidgetSharePreview&st._aid=ExternalShareWidget_SharePreview&st.title=&st.shareUrl=https://site.ru

Внедрение кнопок поделиться в CMS WordPress и MODX

Для того чтобы сделать ссылки динамическими нужно добавить в них синтаксис от CMS.

Для CMS WordPress:

<?php the_permalink(); ?> – адрес страницы, которую нужно зашерить,
<?php the_title(); ?> – заголовок страницы, которой вы делитесь в соцсети,

Готовый код:

<ul class="social-icons">
    <li><a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
    <li><a href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>" target="_blank"><i class="fab fa-twitter"></i></a></li>
    <li><a href="https://vk.com/share.php?url=<?php the_permalink(); ?>" target="_blank"><i class="fab fa-vk"></i></a></li>
    <li><a href="https://connect.ok.ru/dk?cmd=WidgetSharePreview&st.cmd=WidgetSharePreview&st._aid=ExternalShareWidget_SharePreview&st.title=<?php the_title(); ?>&st.shareUrl=<?php the_permalink(); ?>" target="_blank"><i class="fab fa-odnoklassniki"></i></a></li>
    <li><a href="https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=&description=<?php the_title(); ?>" target="_blank"><i class="fab fa-pinterest-square"></i></a></li>
    <li><a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>" target="_blank"><i class="fab fa-linkedin"></i></li>
    <li><a href="https://t.me/share/url?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>" target="_blank"><i class="fab fa-telegram"></i></a></li>
    <li><a href="mailto:info@example.com?&subject=&cc=&bcc=&body=<?php the_permalink(); ?>%0A<?php the_title(); ?>" target="_blank"><i class="fas fa-envelope"></i></a></li>
</ul>

Для CMS MODX Revo:

[[~[[*id]]? &scheme=`full`]] – адрес страницы, которую нужно зашерить,
[[*pagetitle]] – заголовок страницы, которой вы делитесь в соц. сети,

Готовый код:

<ul class="social-icons">
    <li><a href="https://www.facebook.com/sharer/sharer.php?u=[[~[[*id]]? &scheme=`full`]]" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
    <li><a href="https://twitter.com/intent/tweet?url=[[~[[*id]]? &scheme=`full`]]&text=[[*pagetitle]]" target="_blank"><i class="fab fa-twitter"></i></a></li>
    <li><a href="https://vk.com/share.php?url=[[~[[*id]]? &scheme=`full`]]" target="_blank"><i class="fab fa-vk"></i></a></li>
    <li><a href="https://connect.ok.ru/dk?cmd=WidgetSharePreview&st.cmd=WidgetSharePreview&st._aid=ExternalShareWidget_SharePreview&st.title=[[*pagetitle]]&st.shareUrl=[[~[[*id]]? &scheme=`full`]]" target="_blank"><i class="fab fa-odnoklassniki"></i></a></li>
    <li><a href="https://pinterest.com/pin/create/button/?url=[[~[[*id]]? &scheme=`full`]]&media=&description=[[*pagetitle]]" target="_blank"><i class="fab fa-pinterest-square"></i></a></li>
    <li><a href="https://www.linkedin.com/shareArticle?mini=true&url=[[~[[*id]]? &scheme=`full`]]" target="_blank"><i class="fab fa-linkedin"></i></li>
    <li><a href="https://t.me/share/url?url=[[~[[*id]]? &scheme=`full`]]&text=[[*pagetitle]]" target="_blank"><i class="fab fa-telegram"></i></a></li>
    <li><a href="mailto:info@example.com?&subject=&cc=&bcc=&body=[[~[[*id]]? &scheme=`full`]]%0A[[*pagetitle]]" target="_blank"><i class="fas fa-envelope"></i></a></li>
</ul>

Плавающие красивые кнопки на svg спрайтах

Усовершенствуем первую версию кнопок, избавимся от font-awesome в пользу SVG спрайтов, раскрасим кнопки.

Обновленная разметка кнопок (под синтаксис modx (fenom), легко адаптируется под wp):

<!--noindex-->
<ul class="social-icons">
	<li><a class="vk-share" title="поделиться во вконтакте" href="https://vk.com/share.php?url={$_modx->makeUrl($_modx->resource.id, '', '', 'full')}" target="_blank" rel="noopener noreferrer"><svg><use xlink:href="img/sprite.svg#vk"></use></svg></a></li>
    <li><a class="tg-share" title="поделиться в телеграм" href="https://t.me/share/url?url={$_modx->makeUrl($_modx->resource.id, '', '', 'full')}&text={$_modx->resource.pagetitle}" target="_blank" rel="noopener noreferrer"><svg><use xlink:href="img/sprite.svg#social-telegram"></use></svg></a></li>
	<li><a class="ok-share" title="поделиться в однокласниках" href="https://connect.ok.ru/dk?cmd=WidgetSharePreview&st.cmd=WidgetSharePreview&st._aid=ExternalShareWidget_SharePreview&st.title={$_modx->resource.pagetitle}&st.shareUrl={$_modx->makeUrl($_modx->resource.id, '', '', 'full')}" target="_blank" rel="noopener noreferrer"><svg><use xlink:href="img/sprite.svg#ok"></use></svg></a></li>
    <li><a class="fb-share" title="поделиться в фейсбуке" href="https://www.facebook.com/sharer/sharer.php?u={$_modx->makeUrl($_modx->resource.id, '', '', 'full')}" target="_blank" rel="noopener noreferrer"><svg><use xlink:href="img/sprite.svg#facebook"></use></svg></a></li>
    <li><a class="tw-share" title="поделиться в твиттер" href="https://twitter.com/intent/tweet?url={$_modx->makeUrl($_modx->resource.id, '', '', 'full')}&text={$_modx->resource.pagetitle}" target="_blank" rel="noopener noreferrer"><svg><use xlink:href="img/sprite.svg#twitter"></use></svg></a></li>
    <li><a class="pn-share" title="поделиться в пинтерест" href="https://pinterest.com/pin/create/button/?url={$_modx->makeUrl($_modx->resource.id, '', '', 'full')}&media=&description={$_modx->resource.pagetitle}" target="_blank" rel="noopener noreferrer"><svg><use xlink:href="img/sprite.svg#pinterest"></use></svg></a></li>
    <li><a class="ln-share" title="поделиться в linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url={$_modx->makeUrl($_modx->resource.id, '', '', 'full')}" target="_blank" rel="noopener noreferrer"><svg><use xlink:href="img/sprite.svg#linkedin"></use></svg></a></li>
    <li><a class="email-share" title="отправить на email" href="mailto:{$_modx->config.emailsender}?&subject=&cc=&bcc=&body={$_modx->makeUrl($_modx->resource.id, '', '', 'full')}%0A{$_modx->resource.pagetitle}" target="_blank" rel="noopener noreferrer"><svg><use xlink:href="img/sprite.svg#menu-email"></use></svg></a></li>
</ul>
<!--/noindex-->

Обычно подключается перед закрытием body.

Обновленный css:

.social-icons{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none;-ms-flex-direction:column!important;flex-direction:column!important;position:fixed;top:50%;margin-top:-156px}
.social-icons li{background:#fff;background:-moz-linear-gradient(-45deg,rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);background:-webkit-linear-gradient(-45deg,rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);background:linear-gradient(135deg,rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#f6f6f6',GradientType=1);width:35px;height:35px;margin-top:2px;margin-bottom:2px}
.social-icons li:hover{background:#fff}
.social-icons li a{display:block;padding:.5rem}
.social-icons li svg{width:20px;height:20px}
.social-icons li a.vk-share svg{fill:#0077FE}
.social-icons li a.tg-share svg{fill:#26A4E5}
.social-icons li a.ok-share svg{fill:#F96900}
.social-icons li a.fb-share svg{fill:#1977F3}
.social-icons li a.tw-share svg{fill:#1C9BF0}
.social-icons li a.pn-share svg{fill:#DF0022}
.social-icons li a.ln-share svg{fill:#0077B7}
.social-icons li a.email-share svg{fill:#F7C600}

Также вам нужно скачать спрайт и закинуть его в директорию img (либо куда угодно, главное в html разметке кнопок указать правильный путь). И подключить мини js скрипт, который расширяет поддержку svg спрайтов.

Скачать спрайт и скрипт

Если все правильно сделали, то получите вот такие кнопки.

Внедрение Open Graph

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

Если у вас CMS WordPress, то внедрить Open Graph легко, для этого достаточно установить и настроить один из SEO плагинов: Rank Math Seo или Yoast SEO.

Если у вас CMS MODX: то внедрить Open Graph разметку, тоже не составит труда. Для этого достаточно установить дополнение SEO Suite, либо вы можете создать всю разметку в ручную используя стандартный функционал.

Усовершенствование кнопок поделиться для сайта при помощи jQuery

Если ваш сайт использует jQuery, то кнопки можно усовершенствовать (скрыть сами shared ссылки соц. сетей в JS), для этого перепишем немного html разметку:

<ul class="social-icons" data-url="<?php the_permalink(); ?>" data-title="<?php the_title(); ?>">
    <li class="facebook"><a class="push" data-id="fb"><i class="fab fa-facebook-f"></i></a></li>
    <li class="twitter"><a class="push" data-id="tw"><i class="fab fa-twitter"></i></a></li>
    <li class="vkontakte"><a class="push" data-id="vk"><i class="fab fa-vk"></i></a></li>
    <li class="ok"><a class="push" data-id="ok"><i class="fab fa-odnoklassniki"></i></a></li>
    <li class="pinterest"><a class="push" data-id="pn"><i class="fab fa-pinterest-square"></i></a></li>
    <li class="linkedin"><a class="push" data-id="ld"><i class="fab fa-linkedin"></i></li>
    <li class="telegram"><a class="push" data-id="tg"><i class="fab fa-telegram"></i></a></li>
    <li class="email"><a class="push" data-id="em"><i class="fas fa-envelope"></i></a></li>
</ul>

Для MODX вместо <?php the_permalink(); ?> и <?php the_title(); ?> пропишите [[~[[*id]]? &scheme=`full`]] и [[*pagetitle]].

Далее создаем js файл share.js со следующим содержимым:

var Shares = {
	title: 'Поделиться',

	init: function() {
		var share = document.querySelectorAll('.social-icons');
		for(var i = 0, l = share.length; i < l; i++) {
			var url = share[i].getAttribute('data-url') || location.href, title = share[i].getAttribute('data-title') || '', 
				desc = share[i].getAttribute('data-desc') || '', el = share[i].querySelectorAll('a');
			for(var a = 0, al = el.length; a < al; a++) {
				var id = el[a].getAttribute('data-id');
				if(id)
					this.addEventListener(el[a], 'click', {id: id, url: url, title: title, desc: desc});
			}
		}
	},

	addEventListener: function(el, eventName, opt) {
		var _this = this, handler = function() {
			_this.share(opt.id, opt.url, opt.title, opt.desc);
		};
		if(el.addEventListener) {
			el.addEventListener(eventName, handler);
		} else {
			el.attachEvent('on' + eventName, function() {
				handler.call(el);
			});
		}
	},

	share: function(id, url, title, desc) {
		url = encodeURIComponent(url);
		desc = encodeURIComponent(desc);
		title = encodeURIComponent(title);
		switch(id) {
			case 'fb':
				this.popupCenter('https://www.facebook.com/sharer/sharer.php?u=' + url, this.title, this.width, this.height);
				break;
			case 'tw':
				var text = title || desc || '';
				if(title.length > 0 && desc.length > 0)
					text = title + ' - ' + desc;
				if(text.length > 0)
					text = '&text=' + text;
				this.popupCenter('https://twitter.com/intent/tweet?url=' + url + text, this.title, this.width, this.height);
				break;
			case 'vk':
				this.popupCenter('https://vk.com/share.php?url=' + url + '&description=' + title + '. ' + desc, this.title, this.width, this.height);
				break;
        	case 'ok':
				this.popupCenter('https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=' + url, this.title, this.width, this.height);
				break;
        	case 'pn':
				this.popupCenter('https://pinterest.com/pin/create/button/?url=' + url, this.title, this.width, this.height);
				break;
        	case 'ld':
				this.popupCenter('https://www.linkedin.com/shareArticle?mini=true&url=' + url, this.title, this.width, this.height);
				break;
        	case 'tg':
				this.popupCenter('https://t.me/share/url?url=' + url, this.title, this.width, this.height);
				break;
        	case 'em':
				this.popupCenter('mailto:info@example.com?&subject=&cc=&bcc=&body=' + url, this.title, this.width, this.height);
				break;
		}
	},

	newTab: function(url) {
		var win = window.open(url, '_blank');
		win.focus();		
	},

	popupCenter: function(url, title, w, h) {
		var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
		var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
		var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
		var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
		var left = ((width / 2) - (w / 2)) + dualScreenLeft;
		var top = ((height / 3) - (h / 3)) + dualScreenTop;
		var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
		if (window.focus) {
				newWindow.focus();
		}
	}
};

jQuery(document).ready(function($) {
  $('.social-icons li a').on('click', function() {
  	var id = $(this).data('id');
  	if(id) {
  		var data = $(this).parent('.social');
  		var url = data.data('url') || location.href, title = data.data('title') || '', desc = data.data('desc') || '';
  		Shares.share(id, url, title, desc);
  	}
  });
});

И подключаем его к шаблону (обязательно после подключения jQuery):

<script src="share.js"></script>

При такой реализации, при наведении на кнопки обычный курсор мыши, давайте сделаем его пальцем (как при наведении на ссылки), для этого в файл CSS добавьте следующую строку:

ul.social-icons li{cursor:pointer}

Внимание! Если выше указанный код не работает (кнопки соц. сетей остаются не активными), тогда попробуйте в скрипту заменить строки:

jQuery(document).ready(function($) {
  $('.social-icons li a').on('click', function() {
  	var id = $(this).data('id');
  	if(id) {
  		var data = $(this).parent('.social-icons');
  		var url = data.data('url') || location.href, title = data.data('title') || '', desc = data.data('desc') || '';
  		Shares.share(id, url, title, desc);
  	}
  });
});

на:

Shares.init();

Так же если хотите то можно раскрасить кнопки и добавить к ним эффекты при наведении, для этого нужно добавить еще немного css, например:

ul.social-icons li{width:21px;height:21px;text-align:center;cursor:pointer}
ul.social-icons li a{font-size:14px;line-height:23px}
.social-icons li i{color:#fff!important}
.facebook,.linkedin{background-color:#4267b2}
.facebook:hover,.linkedin:hover{background-color:#365899}
.twitter,.telegram{background-color:#1da1f2}
.twitter:hover,.telegram:hover{background-color:#1a91da}
.vkontakte{background-color:#5181b8}
.vkontakte:hover{background-color:#5b88bd}
.ok{background-color:#ee8208}
.ok:hover{background-color:#ee7808}
.pinterest{background-color:#DE0022}
.pinterest:hover{background-color:#F76D6D}
.email{background:#ECDC64;background:#ECD874}

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

< xLike — идеальная система лайков для MODX Revo

Виджет Instagram для сайта >