Красивые кнопки “поделиться в социальных сетях”

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

При необходимости необходимо подключить jQuery через файл functions.php:

function my_jquery() {
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_jquery' );

function my_jquery() {

wp_deregister_script( 'jquery' );

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');

wp_enqueue_script( 'jquery' );

}

add_action( 'wp_enqueue_scripts', 'my_jquery' );

Теперь необходимо вставить HTML основу кнопок в необходимое место шаблона

<div id="share">
<div class="like">Понравилось? Поделитесь с друзьями!</div>
<div class="social" data-url="<?php the_permalink(); ?>" data-title="<?php the_title(); ?>">
	<a class="push facebook" data-id="fb"><i class="fa fa-facebook"></i> Facebook</a>
	<a class="push twitter" data-id="tw"><i class="fa fa-twitter"></i> Twitter</a>
	<a class="push vkontakte" data-id="vk"><i class="fa fa-vk"></i> Вконтакте</a>
	<a class="push google" data-id="gp"><i class="fa fa-google-plus"></i> Google+</a>
	<a class="push ok" data-id="ok"><i class="fa fa-odnoklassniki"></i> OK</a>
</div>
</div>

<div class="like">Понравилось? Поделитесь с друзьями!</div>

<div class="social" data-url="<?php the_permalink(); ?>" data-title="<?php the_title(); ?>">

<a class="push facebook" data-id="fb"><i class="fa fa-facebook"></i> Facebook</a>

<a class="push twitter" data-id="tw"><i class="fa fa-twitter"></i> Twitter</a>

<a class="push vkontakte" data-id="vk"><i class="fa fa-vk"></i> Вконтакте</a>

<a class="push google" data-id="gp"><i class="fa fa-google-plus"></i> Google+</a>

</div>

В style.css добавим следующий код:

#share {
	width:100%;
	border:1px solid #eaeaea;
	margin: 0 auto;
	background:#fff;
	text-align:center;
}
.like {
	font-size: 16px;
	font-weight: 700;
	line-height: 50px;
}
.push {
	display: inline-block;
	width: 17%;
	min-width: 100px;
	line-height: 40px;
	margin: 5px 2px 20px 2px;
	font-size: 15px;
	text-align: center;
	color:#fff;
	cursor: pointer;
}
 
.facebook {background-color:#3b5998;}
.facebook:hover {background-color:#2d4373; color:#fff;}
.google {background-color:#dd4b39;}
.google:hover {background-color:#c23321; color:#fff;}
.twitter {background-color:#55acee;}
.twitter:hover {background-color:#2795e9; color:#fff;}
.vkontakte {background-color:#587ea3;}
.vkontakte:hover {background-color:#466482; color:#fff;}
.ok {background-color:#ee8208;}
.ok:hover {background-color:#ee7808; color:#fff;}

#share {

width:100%;

border:1px solid #eaeaea;

margin: 0 auto;

background:#fff;

text-align:center;

}

.like {

font-size: 16px;

font-weight: 700;

line-height: 50px;

}

.push {

display: inline-block;

width: 17%;

min-width: 100px;

line-height: 40px;

margin: 5px 2px 20px 2px;

font-size: 15px;

text-align: center;

color:#fff;

cursor: pointer;

}

.facebook {background-color:#3b5998;}

.facebook:hover {background-color:#2d4373; color:#fff;}

.google {background-color:#dd4b39;}

.google:hover {background-color:#c23321; color:#fff;}

.twitter {background-color:#55acee;}

.twitter:hover {background-color:#2795e9; color:#fff;}

.vkontakte {background-color:#587ea3;}

.vkontakte:hover {background-color:#466482; color:#fff;}

.ok {background-color:#ee8208;}

.ok:hover {background-color:#ee7808; color:#fff;}

Создаём файл share.js и копируем в него следующий код:

var Shares = {
	title: 'РџРѕРґРµР»РёС‚СЊСЃСЏ',
	width: 600,
	height: 400,

	init: function() {
		var share = document.querySelectorAll('.social');
		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 'vk':
				this.popupCenter('https://vk.com/share.php?url=' + url + '&description=' + title + '. ' + desc, 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 'gp':
				this.popupCenter('https://plus.google.com/share?url=' + url, 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;
		};
	},

	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();
		}
	}
};

$('.social 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);
	}
});

var Shares = {

title: 'РџРѕРґРµР»РёС‚СЊСЃСЏ',

width: 600,

height: 400,

init: function() {

var share = document.querySelectorAll('.social');

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 'vk':

this.popupCenter('https://vk.com/share.php?url=' + url + '&description=' + title + '. ' + desc, 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 'gp':

this.popupCenter('https://plus.google.com/share?url=' + url, 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;

};

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();

}

};

$('.social 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);

}

});

На очереди заключительный шаг — подключение обработчика share.js Кидаем файл в папку .js вашей темы (там где остальные у вас находятся) и прописываем к нему дорогу в футере:

<script defer src="https://good-webmaster/wp-content/themes/goodthemes/design/js/share.js"></script>

1	<script defer src="https://good-webmaster/wp-content/themes/goodthemes/design/js/share.js"></script>

Проверяем! На некоторых сайтах бывает выскакивает не то что ожидали. Тогда в файле share.js нужно заменить это:

$('.social 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);
	}
});

$('.social 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);

}

});

на это:

Shares.init();

1	Shares.init();

Готово!

Автор публикации

не в сети 2 дня

GOOD WEBMASTER

В наличии любые плагины и темы последних версий от компании AIT THEMES

Поддержать проект монетой можно так: https://money.yandex.ru/to/410012768487959

Комментарии: 6Публикации: 262Регистрация: 17-12-2017

Метки

Социальные кнопки

Меню

Красивые кнопки “поделиться в социальных сетях”

Автор публикации

GOOD WEBMASTER

Метки

Добавить комментарий Отменить ответ