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

Кнопки «Поделиться в социальных сетях» без сторонних плагинов (Share Social Links) MODX Revo
В данном уроке сделаем симпатичные кнопки поделиться в социальных сетях без использования сторонних плагинов: с использованием прямых ссылок для шеринга (без скриптов) и ссылок указанных через JS (2 варианта кнопок). И разберем как их подключить к CMS WordPress и MODX Revo.

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

Начнем с 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;
}

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

Блок с кнопками социальных сетей

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

sharelink генератор

 

Копируем 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>

Внедрение 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 кнопки самостоятельно. Устанавливайте, тестируйте и не забывайте делиться с друзьями!

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru