В свой время долго искал подобное решение для кнопок поделиться, чтобы избавиться от внешних скриптов, которые сильно замедляют скорость сайта в мобильной версии. Данное решение помогло улучшить показатели, но скрипт, есть скрипт.
Сегодня я решил отказаться от его и убрать с единственной страницы на которой он был, а эту запись делаю, как заметку, чтобы долго потом не искать в случае необходимости.
Вроде как сайты у меня на друпал, значит и подключение опишу к друпалу.
Всё стандарт.
Html
<div id="share">
<div class="like">Расскажите о нашей базе друзьям!</div>
<div class="social" data-url="<?php echo 'https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];?>" data-title="Рыболовная база у Вадима в Бармино">
<a class="push facebook" data-id="fb"><i class="fa fa-facebook"></i> Facebook</a>
<a class="push vkontakte" data-id="vk"><i class="fa fa-vk"></i> Вконтакте</a>
<a class="push ok" data-id="ok"><i class="fa fa-odnoklassniki"></i> OK</a>
<a class="push twitter" data-id="tw"><i class="fa fa-twitter"></i> Twitter</a>
<a class="push viber" data-id="viber"><i class="fa fa-phone"></i> Viber </a>
</div>
</div>
Css вставьте в свой файл
#share {width:100%;margin: 0 auto;background:#fff;text-align:center;}.like {font-size: 16px;font-weight: 700;padding-top: 10px;margin-bottom: 10px;}.push {display: inline-block;min-width: 100px;margin: 5px 2px 10px 2px;font-size: 15px;text-align: center;color: #fff;cursor: pointer;padding: 5px;}.facebook {background-color:#3b5998;}.facebook:hover {background-color:#2d4373;color:#fff;text-decoration: none;}.google {background-color:#dd4b39;}.google:hover {background-color:#c23321;color:#fff;text-decoration: none;}.pinterest {background-color:#bd081c;}.pinterest:hover {background-color:#881f12;color:#fff;text-decoration: none;}.viber {background-color:#665cac;}.viber:hover {background-color:#881f12;color:#fff;text-decoration: none;}.twitter {background-color:#55acee;}.twitter:hover {background-color:#2795e9;color:#fff;text-decoration: none;}.vkontakte {background-color:#587ea3;}.vkontakte:hover {background-color:#466482;color:#fff;text-decoration: none;}.ok {background-color:#ee8208;}.ok:hover {background-color: #a05f20;color:#fff;text-decoration: none;}
Скрипт. Если у вас уже в вашей теме подключены свои скрипты через файл тема.info то вставьте файл туда. Если нет, создайте и подключите.
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':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'viber':this.popupCenter('viber://forward?text='+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();}}};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);}});});