Кнопки соцсетей – отличный способ продвижения сайта. Пользователи смогут сохранить страничку у себя в соцсети, а вы получите естественные ссылки и дополнительный трафик. Поисковые системы благосклонно относятся к таким социальным сигналам и начинают доверять вашему сайту.
- Содержание
- Код кнопок «Поделиться в соцсетях»
- Куда ставить код кнопок соцсетей?
- Готовые наборы иконок соцсетей
Установить на сайт кнопки социальных сетей можно с помощью плагинов и кодов, предлагаемых различными сервисами. Я же предлагаю установить на сайт чистый код кнопок соцсетей.
Часто вместе с плагинами и кодами сервисов на сайт «заплывают» сторонние ссылки. Это мне всегда не нравилось. Плюс ко всему я сторонница минимального использования плагинов, поскольку, как говорят некоторые гуру, они увеличивают нагрузку на сервер. В общем, если можно что-то сделать без плагина – это обязательно нужно сделать.
План наших дальнейших действий таков:
- закачать картинки кнопок на сайт;
- подготовить код кнопочек;
- записать код кнопок в соответствующем месте шаблона.
Код кнопок «Поделиться в соцсетях»
Вот мой код кнопок соцсетей, размещенный на этом сайте. Вам только нужно поставить свои ссылки на картинки и указать свою rss-ленту.
<div> <a rel="nofollow" target="_blank" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>"><img src="https://foxyforex.ru/wp-content/uploads/2015/10/VKcrystal.png" width="80" height="80" title="Поделиться В Контакте"></a> <a rel="nofollow" target="_blank" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&amp;st.s=1&amp;st._surl=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><img src="https://foxyforex.ru/wp-content/uploads/2015/10/ODcrystal.png" width="80" height="80" title="В Одноклассники"></a> <a rel="nofollow" target="_blank" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="https://foxyforex.ru/wp-content/uploads/2015/10/MRcrystal.png" width="80" height="80" title="Поделиться в Mail.ru"></a> <a rel="nofollow" target="_blank" href="https://twitter.com/intent/tweet?text=RT <?php the_title(); ?>: <?php the_permalink(); ?>" title="Добавить в Twitter"><img src="https://foxyforex.ru/wp-content/uploads/2015/10/TWcrystal.png" alt="Опубликовать в.twitter.com" width="80" height="80"></a> <a rel="nofollow" target="_blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="https://foxyforex.ru/wp-content/uploads/2015/10/FBcrystal.png" width="80" height="80" title="Поделиться в Facebook"></a> <a rel="nofollow" target="_blank" href="http://feeds.feedburner.com/foxyforexru"> <img src="https://foxyforex.ru/wp-content/uploads/2015/10/RSScrystal.png" width="80" height="80" title="Подписаться!"></a></div>
Кнопки можно менять местами. Достаточно поменять местами их коды.
Что формирует код кнопки?
<a rel= «nofollow» target=«_blank» href=«http://…»> — ссылка на соцсеть. Свойство target=«blank» открывает ссылку в новом окне, чтобы посетители не уходили с сайта.
<img src=«http://…» width=«80» height=«80» title=«Поделиться в …»> — ссылка на иконку соцсети.
Получить адрес ссылок на иконки можно, загрузив картинки по одной на сайт. Ссылка должна иметь примерно такой вид http://название сайта/wp-content/uploads/…/…/iconka.png (или jpeg).
width=«80» height=«80» – ширина и высота картинки. Картинки квадратные, поэтому пропорцию лучше не менять, но можно вместо 80 поставить, скажем, 30.
Title=«Поделиться в …» – отвечает за всплывающую подсказку.
В таком виде кнопочки у меня выстроились в шаблоне в горизонтальную линию. Они лежат в пределах одного дива. Если вы хотите выстроить их в столбик, то заключите код каждой кнопки в отдельный див. Каждому такому диву нужно присвоить класс sharebuttons и прописать в таблице стилей свойства этого класса.
Код вертикально расположенных кнопок:
<div class="sharebuttons"> Код кнопки 1 </div> <div class="sharebuttons"> Код кнопки 2 </div> <div class="sharebuttons"> Код кнопки 3 </div>
Код для таблицы стиля style.css:
.sharebuttons {
float: left;
margin: 0px 20px 20px 0px;
}Что означают отдельные элементы этого кода?
<div class=»sharebuttons»> — отсылает к правилам форматирования в файле style.css.
float: left – расположение слева. Чтобы было справа напишите float: right
margin: 0px 20px 20px 0px – отступы между кнопками и от кнопочек до элементов снизу. Значения предполагают направления – верх, право, низ, лево. Можно изменить значения своими.
Куда ставить код кнопок соцсетей?
В шаблоне Twenty Eleven нужно открыть в редакторе файл single.php (одна запись).
Если вы хотите, чтобы кнопки соцсетей появились после текста поста и надписи «Запись опубликована автором… в рубрике…», то вставьте код после строки:
<?php get_template_part( 'content-single', get_post_format() ); ?>
Если вы хотите, чтобы кнопки появились перед заголовком статьи, то код можно вставить после строчки:
<?php while ( have_posts() ) : the_post(); ?>
Если у вас другой шаблон, то действовать придется методом научного тыка. Ориентирами послужат слова get title (для вывода заголовка), get content (для вывода поста).
Для того чтобы разместить кнопки соцсетей на главной странице сайта, нужно прописать их код в файл index.php.
Готовые наборы иконок соцсетей
Выкладываю 5 наборов иконок соцсетей. В каждом наборе кнопки Вконтакте, Одноклассники, Мейл.ру, Твиттер, Фейсбук и кнопка подписки RSS. Впрочем, вы можете использовать и любые другие картинки.
«Хрустальные кубики»
«Старинные книги»
«Осенние листочки»
«Иконки для кулинарного сайта»
«Простые кнопочки соцсетей»
Я удалила из архива кнопочки Я.ру, поскольку этот сервис прекратил свою работу, но на скриншотах кнопочка осталась.
Возможно вас еще заинтересует:
- «Как удалить лишние заголовки из шаблона?»
- «Как красиво оформить заголовки на сайте?»
- «Как красиво оформить списки на сайте?»
