Ставим кнопки социальных сетей вручную, без плагинов

21.07.2013 | Автор Алексей

Социальные сети с каждым днем набирают популярность и сегодня почти каждый сайт предоставляет возможность зайти на свою страничку и добавить ссылку на понравившуюся статью. Такая возможность в значительной мере помогает в продвижении сайта.

Установить кнопки социальных сетей можно 3 способами:

1. Используя плагины. Плюсы — удобство настроек, минусы — большая нагрузка на сайт.
2. С помощью конструкторов различных сервисов. Преимущества и недостатки те же, что и у первого способа, гибкие настройки и увеличение времени загрузки сайта.
3. Самостоятельно добавив код в шаблон WordPress. Самый легкий вариант. Кнопки практически не нагружают сайт, но для их установки потребуются хотя бы начальные знания в html.

О том, как установить кнопки от различных он-лайн сервисов описано в статье Как установить кнопки социальных сетей на сайт.

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

У этого способа есть и минусы. Во-первых, сервис иногда бывает недоступен по разным причинам и тогда кнопки висят на сайте бесполезными картинками и второй, пожалуй, главный недостаток – сторонние скрипты, а также плагины значительно увеличивают время загрузки страницы. Замечу, поисковые системы обращают на это внимание.

Установив кнопки популярного сервиса share.pluso.ru мне стало интересно как сильно они нагружают сайт и я проверил скорость его загрузки по сервису WebPageTest.org.

Скрипт кнопок добавил 3 запроса к базе данных, а общее время загрузки 3 файлов составило в среднем 1 сек. Хорошо это или не очень думаю зависит от каждого конкретного случая.

webpagetest_alexisakov_ru

 

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

Достоинство этого способа в том, что он практически не влияет на время загрузки страницы.

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

Далее я опишу гибкий код, позволяющий разместить блок кнопок под статьей на сайте, либо в сайдбаре, либо в виде вертикальной линейки кнопок в левой части экрана.

 Варианты размещения кнопок социальных сетей на сайте

Кнопки в конце статьи

Чтобы кнопки появились под каждой статьей вставим небольшой код в файл single.php находящийся в корневой директории вашей темы по адресу:

http://ваш_супер_сайт/wp-content/themes/тема_wordpress

после инструкции:

1
<? php  the_content() ?>

добавим такой код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="sociallinks">
<p>Поделитесь статьей </br>
<a title="Добавить в Twitter" class="ang_tw"  href="http://twitter.com/intent/tweet?text=RT @AlexeyVLFF <?php the_title(); ?>: <?php the_permalink(); ?>" target="_blank" rel="nofollow"></a>
<a title="Поделиться в Facebook" class="ang_fb"  href="http://facebook.com/sharer.php?url=<?php the_permalink(); ?>" target="_blank"  rel="nofollow"></a>
<a title="Поделиться в Google +" class="ang_gp" href="http://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow"></a>
<a title="Поделиться ВКонтакте" class="ang_vk" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow"></a>
<a title="Опубликовать в LiveJournal" class="ang_lj" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" target="_blank" rel="nofollow"></a>
</p>
</div>
 
<div class="socialbutton">
<p>Приглашаю присоединиться ко мне в социальных сетях</br>
<a title="Twitter" class="ang_tw" href="http://twitter.com/AlexeyVLFF" target="_blank" rel="nofollow"></a>
<a title="Facebook" class="ang_fb" href="http://www.facebook.com/AlexeyI78" target="_blank" rel="nofollow"></a>
<a title="ВКонтакте" class="ang_vk" href="http://vk.com/ivalexey" target="_blank" rel="nofollow"></a>
<a title="Одноклассники" class="ang_ok" href="#" target="_blank" rel="nofollow"></a>
<a title="Мой мир" class="ang_mm" href="#" target="_blank" rel="nofollow"></a>
<a title="Google +" class="ang_gp" href="#" target="_blank" rel="nofollow"></a>
<a title="Live Journal" class="ang_lj" href="#" target="_blank" rel="nofollow"></a>
</p>
</div>

Это можно сделать через файловый браузер в личном кабинете хостинга либо с помощью FTP клиента. Способ работы с файлами на сайте посредством FTP описан в статье Как снять ограничение WordPress на загрузку файлов в 2МБ.

Не забудьте вместо моих ссылок и заглушек href=”#” поставить настоящие ссылки на ваши страницы в соцсетях.

Далее в файл style.css, который находится в той же директории, в самый конец добавим строки:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/*SOCIAL ICONS*/
.social_vertical {position:fixed; margin-top:210px; margin-left: -6px; display:block; z-index:9999999;}
.social_vertical a{text-decoration:none; color:#FFF; width:36px; height:36px; text-indent:-9999px; }
.social_vertical ul{ margin:0;  padding:0; background-color: #dfdfdf; width:38px;}
.social_vertical ul li{ list-style-type:none;}
.social_vertical ul li a { text-decoration:none; color:#FFF; width: 36px; height:36px; display:block; text-indent:-9999px;}
.socialbutton {clear:both;}
.socialbutton a{text-decoration:none; color:#FFF; width:34px; height:36px; display:inline-block; text-indent:-9999px; }

.social_vertical a.ang_vk, .socialbutton a.ang_vk{background:url(images/Social.png);}
.social_vertical a.ang_tw, .socialbutton a.ang_tw{background:url(images/Social.png) 0px -36px;}
.social_vertical a.ang_fb, .socialbutton a.ang_fb{background:url(images/Social.png) 0px -72px;}
.social_vertical a.ang_ok, .socialbutton a.ang_ok{background:url(images/Social.png) 0px -108px;}
.social_vertical a.ang_mm, .socialbutton a.ang_mm{background:url(images/Social.png) 0px -144px;}
.social_vertical a.ang_gp, .socialbutton a.ang_gp{background:url(images/Social.png) 0px -180px;}
.social_vertical a.ang_lj, .socialbutton a.ang_lj{background:url(images/Social.png) 0px -216px;}
 
.social_vertical a.ang_vk:hover, .socialbutton a.ang_vk:hover{background:url(images/Social.png) 36px  0px;}
.social_vertical a.ang_tw:hover, .socialbutton a.ang_tw:hover{background:url(images/Social.png) 36px -36px;}
.social_vertical a.ang_fb:hover, .socialbutton a.ang_fb:hover{background:url(images/Social.png) 36px -72px;}
.social_vertical a.ang_ok:hover, .socialbutton a.ang_ok:hover{background:url(images/Social.png) 36px -108px;}
.social_vertical a.ang_mm:hover, .socialbutton a.ang_mm:hover{background:url(images/Social.png) 36px -144px;}
.social_vertical a.ang_gp:hover, .socialbutton a.ang_gp:hover{background:url(images/Social.png) 36px -180px;}
.social_vertical a.ang_lj:hover, .socialbutton a.ang_lj:hover{background:url(images/Social.png) 36px -216px;}
 
/*SOCIAL LINKS*/
.sociallinks {clear:both;} 
.sociallinks a{text-decoration:none; color:#FFF; width:106px; height:22px; display:inline-block; text-indent:-9999px; }
.sociallinks a.ang_tw{background:url(images/Social_links.png);}
.sociallinks a.ang_fb{background:url(images/Social_links.png) 0px -22px}
.sociallinks a.ang_gp{background:url(images/Social_links.png) 0px -44px}
.sociallinks a.ang_vk{background:url(images/Social_links.png) 0px -66px}
.sociallinks a.ang_lj{background:url(images/Social_links.png)0px -176px;}
 
.sociallinks a.ang_tw:hover{background:url(images/Social_links.png)0px -88px;}
.sociallinks a.ang_fb:hover{background:url(images/Social_links.png)0px -110px;}
.sociallinks a.ang_gp:hover{background:url(images/Social_links.png)0px -132px;}
.sociallinks a.ang_vk:hover{background:url(images/Social_links.png)0px -154px;}
.sociallinks a.ang_lj:hover{background:url(images/Social_links.png)0px -199px;}

Этот код задает оформление кнопок и несмотря на то, что кажется немного большим, он позволяет с легкостью устанавливать кнопки практически в любом месте на сайте.

social_verticalстиль вертикальной линейки кнопок
socialbuttonстиль блока кнопок «Приглашаю присоединиться ко мне в социальных сетях»
sociallinksстиль кнопок «поделитесь статьей»

И наконец, зальем файлы с логотипами самих кнопок (файлы можно скачать по ссылке в конце статьи) в папку /images. Если ее нет, то просто создайте такую в вашей теме WordPress по адресу:

http://ваш_сайт/wp-content/themes/тема_wordpress/images

Собственно это все шаги. Теперь под каждой статьей на сайте появится два блока кнопок.

кнопки социальных сетей размещены под статьей

 

Вертикальная линейка кнопок социальных сетей

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

Для этого в файл header.php сразу же после тега:

1
<body>

добавим следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
<!-- вертикальная линейка кнопок социальных сетей -->
<div class="social_vertical">
  <ul>
    <li><a title="ВКонтакте" class="ang_vk" href="#" target="_blank" rel="nofollow">ВКонтакте</a></li> 
    <li><a title="Твиттер" class="ang_tw" href="#" target="_blank" rel="nofollow">Твиттер</a></li>
    <li><a title="Facebook" class="ang_fb" href="#" target="_blank" rel="nofollow">Facebook</a></li> 
    <li><a title="Одноклассники" class="ang_ok" href="#" target="_blank" rel="nofollow">Одноклассники</a></li>
    <li><a title="Мой мир" class="ang_mm" href="#" target="_blank" rel="nofollow">Мой мир</a></li>
    <li><a title="Google +" class="ang_gp" href="#" target="_blank" rel="nofollow">Google +</a></li>
    <li><a title="Live Journal" class="ang_lj" href="#" target="_blank" rel="nofollow">Live Journal</a></li>
  </ul>
</div>

В результате кнопки окажутся как бы “приклеены” к левому краю экрана.

 

Ставим кнопки в сайдбар

Если вертикальная линейка по каким-то причинам не подходит к стилю сайта или просто не смотрится на нем, то кнопки можно установить в сайдбар.

Для этого необходимо добавить следующий код в самое начало файла sidebar.php:

1
2
3
4
5
6
7
8
9
10
11
<div class="socialbutton">
  <p>Приглашаю присоединиться ко мне в социальных сетях</br>
  <a title="Twitter" class="ang_tw" href="http://twitter.com/AlexeyVLFF" target="_blank" rel="nofollow"></a>
  <a title="Facebook" class="ang_fb" href="http://www.facebook.com/AlexeyI78" target="_blank" rel="nofollow"></a>
  <a title="ВКонтакте" class="ang_vk" href="http://vk.com/ivalexey" target="_blank" rel="nofollow"></a>
  <a title="Одноклассники" class="ang_ok" href="#" target="_blank" rel="nofollow"></a>
  <a title="Мой мир" class="ang_mm" href="#" target="_blank" rel="nofollow"></a>
  <a title="Google +" class="ang_gp" href="#" target="_blank" rel="nofollow"></a>
  <a title="Live Journal" class="ang_lj" href="#" target="_blank" rel="nofollow"></a>
  </p>
</div>

В моей теме файл sidebar.php выглядит так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="sidebar">
 
<!--Кнопки социальных сетей-->  
  <div class="socialbutton">
    <p>Приглашаю присоединиться ко мне в социальных сетях</br>
    <a title="Twitter" class="ang_tw" href="http://twitter.com/AlexeyVLFF" target="_blank" rel="nofollow"></a>
    <a title="Facebook" class="ang_fb" href="http://www.facebook.com/AlexeyI78" target="_blank" rel="nofollow"></a>
    <a title="ВКонтакте" class="ang_vk" href="http://vk.com/ivalexey" target="_blank" rel="nofollow"></a>
    <a title="Одноклассники" class="ang_ok" href="#" target="_blank" rel="nofollow"></a>
    <a title="Мой мир" class="ang_mm" href="#" target="_blank" rel="nofollow"></a>
    <a title="Google +" class="ang_gp" href="#" target="_blank" rel="nofollow"></a>
    <a title="Live Journal" class="ang_lj" href="#" target="_blank" rel="nofollow"></a>
    </p>
  </div>
<!--------------------------->  
 
  <div class="widgets">
    <ul>
      <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar') ) : ?> 
      <?php endif; ?>
    </ul>
  </div>
</div>

 

Описание этого способа часто встречается в интернете и я не стану на нем подробно останавливаться. Единственный недостаток, который был в нем, так это то, что при открытии страницы загружается множество файлов с логотипами кнопок.

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

Чтобы избавиться от этого и уменьшить количество запросов я решил поместить логотипы в два файла, используя технологию спрайтов. Те, кто увлекается компьютерными играми знают, что это такое.
Суть спрайтов в том, что несколько картинок размещаются в одном файле и программа сама выбирает часть с нужным изображением.

Изображение кнопок социальных сетей

Очень похоже на мозайку.

Все логотипы кнопок размещены в двух файлах, в результате вместо загрузки 12 файлов, имеем только два и соответственно всего два запроса к базе данных при загрузке страницы.

 

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

Если возникнут проблемы с установкой кода кнопок, пишите в комментариях, отвечу по мере свободного времени.

На этом все. Желаю успехов.

“Кто ходит в сети по утрам, тот поступает мудро
То здесь сказал, то там сказал, и следующее утро)))”

7 комментариев к “Ставим кнопки социальных сетей вручную, без плагинов”

  • Здравствуйте.

    Скажите пожалуйста, а какой код надо написать, чтобы
    можно было поделиться новостью в Одноклассниках?

    Я пробовал переделывать этот:

    <a title="Поделиться ВКонтакте" class="ang_vk" href="http://vkontakte.ru/share.php?url=» target=»_blank» rel=»nofollow»>
    просто заменял адрес контакта на одноклассников. Но тогда при переходе по ссылке мне пишет:

    «Этой страницы нет на Одноклассниках
    Но есть много других»

  • Алексей:

    Добавил в исходники код для Одноклассников. Смотрите в архиве.

  • Здравствуйте, Алексей! У меня к Вам два вопроса: можно ли убрать белый фон у кнопок, т.е. чтобы они былы как бы раздельно каждая?; что можно сделать, чтобы при заходе на фэйсбук он не выдавал 500 ошибку? Я использую вариант кнопок вертикально слева на экране.

  • К предыдущему посту добавлю, что пока всё испытываю на дэнвере.

  • Алексей:

    Чтобы убрать белый фон, измените или удалите свойство «background-color: #dfdfdf;» в файле style.css:

    .social_vertical ul{ margin:0; padding:0; background-color: #dfdfdf; …

    По поводу 500 ошибки, сложно ответить не глядя.
    Как вариант, проверьте работу js-скриптов. Какой-то из них обрабатывает html-теги, имена классов…, используемые в коде кнопок. Сервер генерирует 500 ошибку, если скрипт долгое время не отвечает.

  • Игорь:

    А можно ли прямо вставлять в виджет код и в Пользовательские стили CSS соответственно?

  • Алексей:

    Конечно, код открыт. Только предварительно сохраните файлы WordPress которые изменяете, чтобы, в случае чего, быстро все восстановить.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>