Кнопки Share без плагинов и сервисов

Кнопки Share (поделится в соц. сетях) очень востребованный функционал. Существует множество сервисов и плагинов, но наша задача — обойтись без них.

Реализация кнопок спрайтом

Вставляем в шаблон (оставляем необходимые нам соц.сети)

<div class="share">
<a onClick="window.open('https://vkontakte.ru/share.php?url=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" class="vkontakte"></a>
<a onClick="window.open('https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" class="facebook"></a>
<a onClick="window.open('https://plus.google.com/share?url=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" class="google"></a>
<a onClick="window.open('http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" class="livejournal"></a>
<a onClick="window.open('https://twitter.com/intent/tweet?text=<?php the_title(); ?> <?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" class="twitter"></a>
<a onClick="window.open('https://connect.mail.ru/share?url=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" class="mail"></a>
<a onClick="window.open('http://ok.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" class="odnoklassniki"></a>
<a onClick="window.open('https://ru.pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" class="pinterest"></a>
<a onClick="window.open('https://www.evernote.com/clip.action?url=<?php the_permalink(); ?>&target=blog','sharer','toolbar=0,status=0,width=930,height=500');" href="javascript: void(0)" class="evernote"></a>
<a onClick="window.open('http://www.liveinternet.ru/journal_post.php?action=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=812,height=585');" href="javascript: void(0)" class="liveinternet"></a>
<a onClick="window.open('http://digg.com/submit?url=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=812,height=585');" href="javascript: void(0)" class="digg"></a>
<a onClick="window.open('http://new.spring.me/#!/welcome?url=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=812,height=585');" href="javascript: void(0)" class="spring"></a>
<a href="<?php the_permalink(); ?>" class="bookmark" rel="sidebar"></a>
<a href="mailto:?subject=<?php the_title(); ?>&body=<?php the_permalink(); ?>" class="email"></a>
<a href='javascript:window.print(); void 0;' class="print"></a>
</div>

Стили CSS

/* Поделиться в соц.сетях  */

.share a {
display: inline-block;
vertical-align: inherit;
margin: 5px 0 0 2px;
padding: 0px;
font-size: 0px;
width: 40px;
height: 40px;
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon.png") no-repeat scroll 0px 0px transparent;}

.share a.vkontakte {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon.png") no-repeat scroll -168px 0px transparent;
}
.share a.google {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon.png") no-repeat scroll -252px 0px transparent;
}
.share a.livejournal {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon.png") no-repeat scroll -336px 0px transparent;
}
.share a.twitter {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon.png") no-repeat scroll -42px 0px transparent;
}
.share a.mail {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon.png") no-repeat scroll -294px 0px transparent;
}
.share a.odnoklassniki {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon.png") no-repeat scroll -126px 0px transparent;
}
.share a.pinterest {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon.png") no-repeat scroll -210px 0px transparent;
}
.share a.liveinternet {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon.png") no-repeat scroll -378px 0px transparent;
}
.share a.evernote {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon.png") no-repeat scroll -420px 0px transparent;
}
.share a.bookmark {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon.png") no-repeat scroll -462px 0px transparent;
}
.share a.email {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon.png") no-repeat scroll -504px 0px transparent;
}
.share a.print {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon.png") no-repeat scroll -546px 0px transparent;
}
.share a.digg {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon.png") no-repeat scroll -588px 0px transparent;
}
.share a.spring {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon.png") no-repeat scroll -630px 0px transparent;
}

Технология открытия окон

Надо разобратся в этой технологии. Материал для изучения.

<a onClick="https://opttour.ru/main-rublik/web/scripts-and-jquery/chistaya-zapis-testovaya/','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" class="vkontakte"></a>

<a onClick="https://opttour.ru/main-rublik/web/scripts-and-jquery/chistaya-zapis-testovaya/','sharer','toolbar=0,status=0,width=700,height=400');" href="#__JSNotWork" class="vkontakte"></a>

Реализация иконками FontAwesome

Все тоже самое, что и в варианте со спрайтом, только иконочным шрифтом FontAwesome. В данном примере, я уже выбрал только нужные мне кнопки.

<a id="ss-vkontakte" onClick="window.open('https://vkontakte.ru/share.php?url=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)"><i class="fa fa-vk" aria-hidden="true"></i></a>
<a id="ss-facebook" onClick="window.open('https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a id="ss-google" onClick="window.open('https://plus.google.com/share?url=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a id="ss-twitter" onClick="window.open('https://twitter.com/intent/tweet?text=<?php the_title(); ?> <?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a id="ss-odnoklassniki" onClick="window.open('http://ok.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)"><i class="fa fa-odnoklassniki" aria-hidden="true"></i></a>
<a id="ss-email" href="mailto:?subject=<?php the_title(); ?>&body=<?php the_permalink(); ?>"><i class="fa fa-envelope" aria-hidden="true"></i></a>
<a id="ss-print" href='javascript:window.print(); void 0;'><i class="fa fa-print" aria-hidden="true"></i></a>

Стили CSS (Вместе с панелью)

/* Поделиться в соц.сетях  */

#share-pannel {
    padding: 0px 6px;
    position: absolute;
    top: 100px;
    width: 29px;
    background-color: rgba(17,17,17,0.8);
    color: #fff;
}

/*.share-pannel-open { left: -45px !important; }*/

.share-pannel-left {left: -41px; border-radius: 3px 0 0 3px;}

.share-pannel-right {right: -41px !important;  border-radius: 0 3px 3px 0;}

#share-pannel a {
    display: table;
    margin: 7px 0;
    padding: 3px 2px 1px 2px;
    font-size: 16px;
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
}

#share-pannel a .fa {display: table-cell; vertical-align: middle;}

#share-pannel a:hover {color: #fff !important;}

#ss-print {background-color: #11AF98;}

#ss-email {background-color: #5F32B0;}

#ss-odnoklassniki {background-color: #F4960F;}

#ss-facebook {background-color: #39579A;}

#ss-vkontakte {background-color: #41658B;}

#ss-google {background-color: #BE3308;}

#ss-twitter {background-color: #00ABF0;}

Фиксированная панель

Если мы хотим сделать фиксированную панель слева или справа на экране, достаточно немного изменить эти стили css:

#share-pannel {position: fixed; top: 40%;}
.share-pannel-left {left: 0;}
.share-pannel-right {right: 0px !important;}

Кнопки «Поделится» в виде плиток

Еще один способ вывести кнопки «Поделится» в виде плиток после статьи

Верстка, вставляем после статьи

<div id="share-block">

<p><strong>Поделится информацией с друзьями</strong></p>

<div><!--
--><a id="ss-vkontakte" onClick="window.open('https://vkontakte.ru/share.php?url=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)"><i class="fa fa-vk" aria-hidden="true"></i></a><!--
--><a id="ss-facebook" onClick="window.open('https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)"><i class="fa fa-facebook" aria-hidden="true"></i></a><!--
--><a id="ss-google" onClick="window.open('https://plus.google.com/share?url=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)"><i class="fa fa-google-plus" aria-hidden="true"></i></a><!--
--><a id="ss-twitter" onClick="window.open('https://twitter.com/intent/tweet?text=<?php the_title(); ?> <?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)"><i class="fa fa-twitter" aria-hidden="true"></i></a><!--
--><a id="ss-odnoklassniki" onClick="window.open('http://ok.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)"><i class="fa fa-odnoklassniki" aria-hidden="true"></i></a><!--
--><a id="ss-email" href="mailto:?subject=<?php the_title(); ?>&body=<?php the_permalink(); ?>"><i class="fa fa-envelope" aria-hidden="true"></i></a><!--
--><a id="ss-print" href='javascript:window.print(); void 0;'><i class="fa fa-print" aria-hidden="true"></i></a><!--
--></div>

</div>

Стили

#share-block {width: 100%;}

#share-block p {text-align: center; border-bottom: 1px solid #0990dd; margin-bottom: 15px;}

#share-block a {
    display: inline-block;
    margin-right: 1.5%;
    margin-bottom: 15px;
    padding: 5px;
    box-sizing: border-box;
    width: 13%;
    line-height: 25px;
    text-align: center;
    color: #fff;
}

#share-block a:last-child {margin-right: 0;}

#share-block a:hover {color: #fff !important;}

Стили для мобильной версии

@media screen and (max-device-width: 800px) { 
#share-block a {width: 22%; margin-right: 4%;}
#share-block a:nth-child(4n) {margin-right: 0px;}   
} 

@media screen and (max-device-width: 480px) and (orientation: portrait) { 
#share-block a {width: 47%; margin-right: 5%;}
#share-block a:nth-child(2n) {margin-right: 0px;}  
}

Цвета кнопок можно взять из предыдущего решения.

Добавление соц. сетей

Добавляю новые соц.сети (Мой мир, LiveJournal), которые таким же образом можно использовать

<a id="ss-mymir" onClick="window.open('http://connect.mail.ru/share?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" >@</a>
<a id="ss-livejournal" onClick="window.open('http://www.livejournal.com/update.bml?url=<?php the_permalink(); ?>;subject=<?php the_title(); ?>;event=<?php the_permalink(); ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" ><i class="fa fa-pencil" aria-hidden="true"></i></a>

В FontAwesome нет иконок этих соц.сетей, поэтому сделал некое подобие

#ss-livejournal {background-color: #00b0ea;}
#ss-mymir {background-color: #2163ad; font-weight: bold; text-decoration: none;}