Социальные кнопки - поделится

Маленький скрипт Социальные кнопки - поделится очень легко добавить на страницу социальные кнопки для сайтов на DLE.

Вывод описания для поста формируется из первых 75 символов полной новости.

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

            <div id="share">
				<div class="like">Понравилось? Поделитесь с друзьями!</div>
				<div class="social" data-url="{full-link}" data-title="{title}" data-desc="{full-story limit="75"}">
					<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>
                    <a target="_blank" href="https://3p3x.adj.st/?adjust_t=u783g1_kw9yml&amp;adjust_fallback=https%3A%2F%2Fwww.viber.com%2F%3Futm_source%3DPartner%26utm_medium%3DSharebutton%26utm_campaign%3DDefualt&amp;adjust_campaign=Sharebutton&amp;adjust_deeplink=viber%3A%2F%2Fforward%3Ftext%3D{full-link}" class="push viber"><i></i></a>
                    <a target="_blank" href="https://telegram.me/share/url?url={full-link}" class="push telegram"><i></i></a>
				</div>
			</div>

            <style>
                #share {width:100%;margin: 5px auto;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;}
                .push i {display:inline-block; width:24px; height:24px; margin:5px; background: url(/uploads/socknopki-v2.png) 0px -1px no-repeat;}
                .push.twitter i {background-position:-112px -1px;}
                .push.facebook i {background-position:-28px -1px;}
                .push.google i {background-position:-197px -1px;}
                .push.ok i {background-position:-56px -1px;}
                .push.telegram i {background-position:-140px -1px;}
                .push.skype i {background-position:-168px -1px;}
                .push.viber i {background-position:-225px -1px;}
                
                .facebook {background:#3b5998;}
                .google {background:#dd4b39;}
                .twitter {background:#55acee;}
                .vkontakte {background:#587ea3;}
                .ok {background:#ee8208;}                
                .skype {background:#00ccff;}
                .viber {background:#663399;}
                .telegram {background:#6699ff;}
                
                .push:hover {opacity:.8;}
         	</style>

<script defer src="{THEME}/js/socknopki.js"></script>

2.Подключить скрипт отдельным файлом загрузив его а папку шаблона в /js/

3. Вставить в main.tpl такой код (код без сжатия), перед "</body>"

<script defer src="{THEME}/js/socknopki.js"></script>

Скачать файл socknopki.rar ^{[1.21 Kb] (cкачиваний: 34)}  

3.1. Или просто вставить скрипт в код страницы:

<script type="text/jаvascript"> 
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); } });
</script> 

3.2 Спрайт соцкнопок:

4. (<i class="fa fa-google-plus"></i>) Заменить на свою иконку или рисунок