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

В этом примере представлено подключение большинства социальных сетей

FaceBook, VK, OK, Twitter, Google Plus, Tumblr, Whatsapp, Telegram, Viber, Skype, Pinterest, Яндекс.Коллекции, LiveJournal, МойМир, Blogger, Delicious, Digg, Reddit, Evernote, Linkedin, Pocket, Qzone, Renren, Weibo, Surfingbird, TencentWeibo/

 

HTML код самих социальных кнопок, которые потребуется добавить в нужное место сайта

Для вывода иконок социальных сетей можно использовать иконки Font Awesome, предварительно подключив их на свой сайт.

<div id="share">
    <div class="entry-social social" data-url="URL страницы" data-title="Заголовок">
        <a class="push facebook" data-id="fb" title="facebook"><i class="fa fa-facebook"></i></a>
        <a class="push vkontakte" data-id="vk" title="vkontakte"><i class="fa fa-vk"></i></a>
        <a class="push twitter" data-id="tw" title="twitter"><i class="fa fa-twitter"></i></a>
        <a class="push tumblr" data-id="tumblr" title="tumblr"><i class="fa fa-tumblr"></i></a>
        <a class="push whatsapp" data-id="whatsapp" title="whatsapp"><i class="fa fa-whatsapp"></i></a>
    </div>
</div>

JavaScript

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


var Shares = {
	title: 'Поделиться',
	width: 800,
	height: 800,
	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': // FaceBook
				this.popupCenter('https://www.facebook.com/sharer/sharer.php?u=' + url, this.title, this.width, this.height);
				break;
			case 'vk': // Vkontakte
				this.popupCenter('https://vk.com/share.php?url=' + url + '&description=' + title + '. ' + desc, this.title, this.width, this.height);
				break;
			case 'tw': // Twitter
				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': // Google Plus
				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;
			case 'tumblr': // Tumblr
			    this.popupCenter('https://www.tumblr.com/share/link?url=' + url, this.title, this.width, this.height);
			    break;
			case 'whatsapp': // Whatsapp
			    this.popupCenter('https://api.whatsapp.com/send?text=' + url, this.title, this.width, this.height);
			    break;
			case 'telegram': // Telegram
			    this.popupCenter('https://telegram.me/share/url?url=' + url, this.title, this.width, this.height);
			    break;
			case 'viber': // Viber
				this.popupCenter('viber://forward?text=' + url, this.title, this.width, this.height);
				break;
			case 'skype': // Skype
			    this.popupCenter('https://web.skype.com/share?url=' + url, this.title, this.width, this.height);
			    break;
			
			case 'pin': // Pinterest
				this.popupCenter('https://pinterest.com/pin/create/button/?url=' + url, this.title, this.width, this.height);
				break;     
			case 'yacollections': // Яндекс.Коллекции
			    this.popupCenter('https://yandex.ru/collections/share/?url=' + url, this.title, this.width, this.height);
			    break;
			    
			case 'livejournal': // LiveJournal
			    this.popupCenter('https://www.livejournal.com/update.bml?subject=' + url, this.title, this.width, this.height);
			    break;
			case 'mailconnect': // МойМир
			    this.popupCenter('https://connect.mail.ru/share?url=' + url, this.title, this.width, this.height);
			    break;
			case 'blogger': // Blogger
			    this.popupCenter('https://www.blogger.com/blog-this.g?u=' + url, this.title, this.width, this.height);
			    break; 
			case 'delicious': // Delicious
			    this.popupCenter('https://www.delicious.com/save?v=5&noui&jump=close&url=' + url, this.title, this.width, this.height);
			    break;
			case 'digg': // Digg
			    this.popupCenter('https://digg.com/submit?url=' + url, this.title, this.width, this.height);
			    break; 
			case 'reddit': // Reddit
			    this.popupCenter('https://www.reddit.com/submit?url=' + url, this.title, this.width, this.height);
			    break; 
			case 'evernote': // Evernote
			    this.popupCenter('https://www.evernote.com/clip.action?title='+ title +'&url=' + url, this.title, this.width, this.height);
			    break; 
			case 'linkedin': // Linkedin
			    this.popupCenter('https://www.linkedin.com/shareArticle?mini=true&url='+ url +'&title=' + title, this.title, this.width, this.height);
			    break; 
			case 'pocket': // Pocket
			    this.popupCenter('https://getpocket.com/save?url='+ url +'&title=' + title, this.title, this.width, this.height);
			    break; 
			case 'qzone': // Qzone
			    this.popupCenter('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+ url +'&title=' + title, this.title, this.width, this.height);
			    break; 
			case 'renren': // Renren
			    this.popupCenter('http://widget.renren.com/dialog/share?resourceUrl='+ url +'&srcUrl='+ url +'&title=' + title, this.title, this.width, this.height);
			    break;
			case 'weibo': // Weibo
			    this.popupCenter('http://service.weibo.com/share/share.php?type=3&url='+ url +'&title=' + title, this.title, this.width, this.height);
			    break;
			case 'surfingbird': // Surfingbird
			    this.popupCenter('https://surfingbird.ru/share?url='+ url +'&title=' + title, this.title, this.width, this.height);
			    break;
			case 'tencentweibo': // TencentWeibo
			    this.popupCenter('http://share.v.t.qq.com/index.php?c=share&a=index&url='+ url +'&title=' + title, 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 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);
		}
	});
});