Интернет помощник в сети

Уже давно, как я отказался от использования плагина кнопок социальных сетей и решил заменить многие плагины кнопок социальных сетей на код.

Сегодня я расскажу вам, как сделать кнопки социальных сетей без плагинов такие как: плавающая панель кнопок соц. сетей, блок кнопок социальных сетей.

Кнопки социальных сетей без помощи плагинов

Первым представляю плавающую панель социальных кнопок для WordPress на jQuery. Достаточно удобное решение: не нагружает сайт, экономит место, постоянно напоминает о возможности поделиться в соц. сетях.

Ссылки уже закрыты от индексации, а также скорость страницы не изменится.

Установка плавающей панели соц. кнопок на WordPress

Предлагаю скачать скрипт

jQuery скрипт плавающей панели кнопок социальных сетей

Скрипт и значки соц. сетей помещаем в 1 папку вместе.

1. Убедитесь, что у вас на сайте подключен jQuery. Для этого зайдите на сайт, нажмите правой кнопкой мыши по странице и выберите «Исходный код страницы» или комбинацией «Ctrl + U». Далее надо найти строчку со словом «jquery» возможно, в вашем шаблоне установлен, например у меня строка выглядит так «js/jquery/jquery.js?ver=1.8.3», тогда пропускаем шаг, если нет, то устанавливаем на сайт:Стоит установить последнюю версию jQuery, поэтому зайдите на сайт jquery.com и скачайте последнюю версию
   После чего загружаем скрипт в любое место по FTP клиенту FileZilla, затем открываем файл header.php, лучше использовать редактор кода Notepad и добавляем между тегами код:

   <script type='text/javascript' src='http://Путь до файла со скриптом jQuery'></script>

2. Далее устанавливаем скрипт самой плавающей панели кнопок. Загружаем его на сайт, а далее открываем тотже файл header.php и между тегами добавляем код:

   <script type="text/javascript" src="Путь до файла со скриптом js"></script>

3. Далее добавляем функцию, которая будет выводить панель кнопок соц. сетей. Если хотите выводить только в статьях, то добавьте код в файл single.php перед началом статьи, строка выглядит так: <div id=»content»> ( у вас может быть и другой, но находится в верху файла с кодом). Добавляем эту функцию:

   <script type="text/javascript">social(encodeURIComponent('<?php the_permalink() ?>'),encodeURIComponent('<?php the_title(); ?>'))</script>

4. Далее идем в файл стилей и добавляем
   1. #social {
   2. position: fixed;
   3.   z-index: 1000;
   4.   margin-left: -77px;
   5.   padding: 6px 6px 0;
   6.   border: 1px solid #E5E5E5;
   7.   -moz-border-radius: 4px;
   8.   -webkit-border-radius: 4px;
   9.   border-radius: 4px;
   10.   background: #FFF;
   11. }
   12. * html #social {display: none}
   13. #social:hover {
   14.   background: #F6F6F6;
   15.   border: 1px solid #D4D4D4;
   16.   -moz-box-shadow: 0 0 5px #DDD;
   17.   -webkit-box-shadow: 0 0 5px #DDD;
   18.   box-shadow: 0 0 5px #DDD;
   19. }
   20. #social a {
   21.   display: block;
   22.   width: 50px;
   23.   height: 50px;
   24.   margin: 0 0 6px;
   25.   background-color: #F6F6F6;
   26. }
   27. #social img {
   28.   margin: 0 !important;
   29.   padding: 0 !important;
   30.   border: none !important;
   31. }

   Здесь ширина значков предполагается 50х50, если у вас картинки другого размера, то поменяйте это значение

5. Осталось открыть скрипт ( ссылка выше в 1 пункте). Редактируем строчку
   1. var f = ‘http://iglous.ru/’; /* путь к папке с изображениями кнопок */

   Здесь указываем полный путь до файла, т.е. http://вашсайт.ru/wp-content/uploads/sociak.js, к примеру такой путь.

Блок социальных кнопок для WordPress

1 Пример

Заметили? Эти кнопки точь в точь, как в плагине Social Share Buttons, но только без помощи плагина. Поэтому напишу, как заменить плагин Social Share Buttons на код:

1. Давайте для начала определимся какие нам нужны кнопки соц. сетей. Я представлю коды для вывода каждой из кнопок популярных соц. сетей, а вы выберите те, которые вам нужны и просто добавите их в файл, об этом чуть ниже.

Рекомендация: на мой взгляд, прежде чем добавлять доп. ссылки на сайт ( считается, что закрытые ссылки тоже оказывают некое влияние), поэтому сделайте перелинковку сайта WordPress, примером может служить вывод похожих статей с картинкой  в WordPress, а также сделайте карту сайта WordPress с плагином. Чтобы ускорить индексацию сайта сделайте кросспостинг статей.

Добавляем кнопку Twitter

<a rel="nofollow" target="_blank" href="http://twitter.com/home/?status=<?php the_title(); ?> <?php the_permalink(); ?>"> <img src="адрес вашей картинки" /></a>

Добавляем кнопку Facebook

<a rel="nofollow" target="blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="адрес вашей картинки"></a>

Добавляем кнопку Вконтакте

<a href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow"><img src="адрес вашей картинки"/></a>

Добавляем кнопку Я.ру

<a target="_blank" rel="nofollow" href="http://my.ya.ru/posts_add_link.xml?title=<?php the_title(); ?>&URL=<?php the_permalink(); ?>"><img src="адрес вашей картинки"/></a>

Добавляем кнопку Мой Мир

<a target="_blank" rel="nofollow" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="адрес вашей картинки"></a>

Добавляем кнопку LiveInternet

<a href="http://www.liveinternet.ru/journal_post.php?action=l_add&amp;cnurl=<?php the_permalink(); ?>" target="_blank"><img src="адрес вашей картинки"></a>

Добавляем кнопку Livejournal

<a target="_blank" rel="nofollow" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" ><img src="адрес вашей картинки"></a>

Добавляем кнопку Google Buzz

<a href="http://www.google.com/reader/link?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&srcURL=http://адрес вашего сайта.ru/" rel="nofollow" target="_blank"><img src="адрес вашей картинки"></a>

Добавляем кнопку подписки на RSS Feedburner

<a href="http://feeds.feedburner.com/имя фида" rel="nofollow" target="_blank"><img src="адрес вашей картинки" alt="Подписаться по RSS" title="Подписаться на RSS" width="32" height="32"></a>

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

Для красоты можно еще прописать перед ссылками на соц. сети такую строчку:

При этом, при наведении на запись она будет увеличиваться.

<center><div>Понравилась статья? Поделитесь ею с друзьями!</div></center>

Добавляем стиль, css:

И напоследок еще один вид панель кнопок социальных сетей:

Установка

Вставлять данный код надо в виджет «Текст», если хотите поменять вид кнопки, то зайдите на страницу Twitter Вконтакте Google

Изменение:

Чтобы изменить цвет фона, найдите #eff3fa и замените на свой цвет.

Чтобы выбрать с какой стороны будет отображаться панель, найдите в самом начале left:100px; — отображение по левой стороне, чтобы отобразить по правому краю замените left на right

Чтобы изменить отступ от края найдите left:100px; и измените значение на ваше.

Чтобы панель поднять выше/ниже к странице найдите bottom:49%; измените на ваше, чем больше значение, тем выше к началу, чем меньше, тем ниже будет отображаться панель.

<style>
#pageshare {position:fixed; bottom:49%; left:100px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Поделиться с друзьями">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="https://twitter.com/share" class="twitter-share-button" data-via="Iglousru" data-lang="ru" data-count="none">Твитнуть</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "custom", text: "<img src="http://vk.com/images/vk32.png?1" />"}));
--></script></div>
<br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://iglous.ru/knopki-socialnyx-setej-bez-plaginov-plavayushhaya-panel-knopok-socialnyx-setej" target="blank"><font color="black">[Узнать]<font></font></font></a></div></div>

Чтобы заработала кнопка Вконтакте необходимо в файл header.php между тегамидобавить кодили тот, который будет указан у вас при выборе ( выводятся два кода, первый и нужно добавить в файл header.php).

На этом у меня все, подписывайтесь на блог, ведь дальше будет интереснее!