Ставим кнопки соцсетей в WordPress шаблон без плагинов и сервисов

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

Бывает так, что мы не успеваем изучить материал до конца, и, чтобы вернуться к нему позже, мы его себе куда-нибудь сохраняем (в закладки или соцсети, например). Так вот, бывает часто так, что блок кнопок стоит далеко в конце длинной статьи, и он не виден читателю в текущий момент, поскольку человек ещё не дочитал материал. Мы же с помощью специального кода сделаем так, чтобы блок находился в поле зрения всё время и скроллился вместе со статьёй.

Код социальных «кнопок-прилипал»

Давайте разберём код социальной кнопки для Фейсбука. Остальные можно будет сделать по аналогии.

<!-- SocialButtons -->
<span style="display:scroll;position:fixed;bottom:280px;left:50px;">
<noindex><a target="blank" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src=" http://site.ru/f.png" width="50" height="50" title="Рассказать на Фейсбук" alt="Опубликовать в Фейсбук"></a></noindex></span>
<!-- SocialButtons -->

Подпись <!-- SocialButtons --> позволяет визуально определить, где в коде страницы находится наш блок кнопок. Пока в блоке мы разместили только одну кнопку, но потом кода будет значительно больше.
В тэге <span> c атрибутами находятся стили. Их мы будем прописывать для каждой кнопки. Запись display:scroll; position:fixed означает, что кнопка «прилипнет» к экрану и не будет прятаться вместе с уже прочитанным текстом в процессе скроллинга (прокрутки) страницы.

Показатели bottom и left определяют положение кнопки относительно нижнего и левого края экрана. В нашем случае, она будет находиться слева от поста. Если нужно поместить её справа, просто замените “left” на “right”. Как вы уже заметили, значения данных показателей задаются в пикселях, и вы можете менять их как угодно, пока не найдёте наиболее оптимальную позицию в своём шаблоне. Заметим, что в вышеприведённом примере отступ кнопки от нижней границы экрана составляет 280 пикселей.

Если же мы хотим поставить под этой кнопкой ещё одну, то от 280 нам нужно отнять 50 или чуть больше (50 – это высота кнопки). Получится, что у следующей кнопки bottom будет уже не 280, а максимум 230 (если больше, то картинки будут наезжать друг на друга). Таким образом, данное значение должно меняться с каждой новой кнопкой.
Тегом <noindex> и атрибутом rel=”nofollow” мы закрываем ссылки, которые прячутся в кнопках, от индексации поисковиками.

В теге <a> атрибут target=”blank” отвечает за открытие окна с предложением поделиться в новой вкладке. Это важно, поскольку пользователь, возможно, ещё захочет вернуться на страницу сайта, которую он читал.
В атрибут href= вписывается непосредственно код ссылки, которая будет отвечать за вывод диалогового окна соцсети при нажатии на кнопку. Для каждой из них этот код будет своим. Запись <?php the_permalink(); ?> (не нужна только для кнопки подписки на фидбернер) позволяет отобразить в открывшейся странице соцсети ссылку на наш материал и его название, например:

В теге <img> прописан путь к картинке-кнопке, которую вы захотите поставить, а также её параметры (длина, ширина, тайтл, атрибут alt).

Таким образом, мы получаем общую схему составления кода кнопки соцсети:


<span style="display:scroll;position:fixed;bottom:{значение};left:{значение};">
<noindex><a target="blank" rel="nofollow" href="{ссылка на соцсеть}=<?php the_permalink(); ?>"> <img src="{ссылка на картинку кнопки}" width="{значение}" height="{значение}" title="{Поделиться, рассказать на …}" alt="{Поделиться, рассказать на …}"></a></noindex></span>


Что касается значения ссылок для разных социалок, то они должны быть такими:

• Для Фейсбука: onclick=”window.open(‘https://plusone.google.com/_/+1/confirm?hl=ru&url= http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>”
• Для Твиттера: http://twitter.com/intent/tweet?text=RT @Ваш логин в Твиттере <?php the_permalink(); ?>
• Для подписки на фид блога: http://feeds.feedburner.com/Название_вашего_фида
• Для mail.ru: http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>
• Для Вконтакте: https://vk.com/share.php?url=<?php the_permalink(); ?>
• Для закладок Яндекса: http://zakladki.yandex.ru/newlink.xml?url=<?php the_permalink() ?>&name=<?php the_title(); ?>&descr=<?php the_excerpt(); ?>
• Для Одноклассников: http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>&title=<?php the_title(); ?>

Куда поставить кнопки соцсетей в шаблоне WordPress

Как правило, блок ставится на страницы с отдельными постами, новостями. Можно поставить его и на статические страницы. На разделы или главную проставлять лишние внешние ссылки не стоит, хотя можете попробовать и посмотреть на эффект. Только тесты и эксперименты могут показать реальное положение дел.

За отдельную публикацию отвечает файл single.php, расположенный в папке с вашей темой. В нём и нужно будет разместить созданный вами код. Куда его ставить – дело ваше, всё равно кнопки встанут на то место, которое вы указали в атрибутах bottom и left. Желательно, конечно, поместить данный код в конце, где-нибудь после вывода футера. Это необходимо, чтобы кнопки соцсетей выводились позже основного контента, если у пользователя медленный Интернет. Первым всегда должен грузиться полезный пользователю материал, и уже потом – кнопки «поделиться» и прочее.

Почему лучше внедрять свой код кнопок на сайт

Как мы уже говорили выше, плагины – самый лёгкий способ сделать кнопочный блок. Однако, мы дорожим скоростью загрузки сайта, и стараемся минимизировать количество плагинов. Так, если взять два сайта, то при прочих равных условиях их качества, один будет стоять в выдаче выше другого. И всё почему? Потому что у одного загрузка происходит быстрее, чем у другого.

Ещё один способ – это сторонние сервисы. Поставить их очень легко и быстро, однако эти сервисы иногда «виснут», и на сайте отображается нечто непонятное вместо кнопок.

К тому же, в сервисах и плагинах могут быть лишние ссылки на разработчиков, которые не нужны нам.
Таким образом, свой код – лучший выход. Главное – делать его чистым, аккуратным, без лишнего мусора и ошибок.