Кнопки соцсетей – отличный способ продвижения сайта. Пользователи смогут сохранить страничку у себя в соцсети, а вы получите естественные ссылки и дополнительный трафик. Поисковые системы благосклонно относятся к таким социальным сигналам и начинают доверять вашему сайту.
Установить на сайт кнопки социальных сетей можно с помощью плагинов и кодов, предлагаемых различными сервисами. Я же предлагаю установить на сайт чистый код кнопок соцсетей.
Часто вместе с плагинами и кодами сервисов на сайт «заплывают» сторонние ссылки. Это мне всегда не нравилось. Плюс ко всему я сторонница минимального использования плагинов, поскольку, как говорят некоторые гуру, они увеличивают нагрузку на сервер. В общем, если можно что-то сделать без плагина – это обязательно нужно сделать.
План наших дальнейших действий таков:
- закачать картинки кнопок на сайт;
- подготовить код кнопочек;
- записать код кнопок в соответствующем месте шаблона.
Код кнопок «Поделиться в соцсетях»
Вот мой код кнопок соцсетей, размещенный на этом сайте. Вам только нужно поставить свои ссылки на картинки и указать свою 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=addSharest.s=1st._surl=<?php the_permalink(); ?>?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>
Кнопки можно менять местами. Достаточно поменять местами их коды.
Как добавить кнопку купить в товар группы ВКонтакте
Что формирует код кнопки?
— ссылка на соцсеть. Свойство target=«blank» открывает ссылку в новом окне, чтобы посетители не уходили с сайта.
— ссылка на иконку соцсети.
Получить адрес ссылок на иконки можно, загрузив картинки по одной на сайт. Ссылка должна иметь примерно такой вид http://название сайта/wp-content/uploads/…/…/iconka.png (или jpeg).
width=«80» height=«80» – ширина и высота картинки. Картинки квадратные, поэтому пропорцию лучше не менять, но можно вместо 80 поставить, скажем, 30.
Title=«Поделиться в …» – отвечает за всплывающую подсказку.
В таком виде кнопочки у меня выстроились в шаблоне в горизонтальную линию. Они лежат в пределах одного дива. Если вы хотите выстроить их в столбик, то заключите код каждой кнопки в отдельный див. Каждому такому диву нужно присвоить класс sharebuttons и прописать в таблице стилей свойства этого класса.
Код вертикально расположенных кнопок:
Код для таблицы стиля style.css:
.sharebuttons
Что означают отдельные элементы этого кода?
float: left – расположение слева. Чтобы было справа напишите float: right
margin: 0px 20px 20px 0px – отступы между кнопками и от кнопочек до элементов снизу. Значения предполагают направления – верх, право, низ, лево. Можно изменить значения своими.
Куда ставить код кнопок соцсетей?
В шаблоне Twenty Eleven нужно открыть в редакторе файл single.php (одна запись).
Если вы хотите, чтобы кнопки соцсетей появились после текста поста и надписи «Запись опубликована
В данном уроке сделаем симпатичные кнопки поделиться в социальных сетях без использования сторонних плагинов: с использованием прямых ссылок для шеринга (без скриптов) и ссылок указанных через JS (2 варианта кнопок). И разберем как их подключить к CMS WordPress и MODX Revo.
Простые кнопки Поделиться в соцсетях без сторонних плагинов и скриптов
Начнем с html разметки и внешнего вида (css) кнопок.
Html разметка кнопок
Напишем простенькую html разметку:
Здесь я использую иконки от Font Awesome 5.15 (free) . В случае если в вашем шаблоне он не используется, подключите его следующей строчкой:
Кто проходит уроки по разработке сайтов на MODX и использует шаблон aranoz вам не нужно подключать font awesome и делать css оформление.
CSS оформление кнопок
Стилизуем немного нашу разметку при помощи CSS:
*, ::after, ::before < box-sizing: border-box; >ul.social-icons < list-style: none; margin: 0; padding: 0; >.social-icons li < display: inline-block; margin-right: 15px; >.social-icons li a < color: #666666 !important; text-decoration: none; -webkit-transition: 0.5s; transition: 0.5s; >.social-icons li i
На выходе должен получиться вот такой минималистичный блок с иконками соц. сетей:
Где взять ссылки для шаринга (sharelink)?
Для того чтобы получить актуальные ссылки для шаринга, можно воспользоваться бесплатным генератором от websiteplanet .
Копируем sharelink их и вставляем в нашу Html разметку.
Там не все ссылки для нашей HTML разметки, остальные можно взять с любых сервисов шаринга, например с usocial.
Вот перечень актуальных ссылок шаринга на текущий момент:
Внедрение кнопок поделиться в CMS WordPress и MODX
Для того чтобы сделать ссылки динамическими нужно добавить в них синтаксис от CMS.
Для CMS WordPress:
– адрес страницы, которую нужно зашерить,
– заголовок страницы, которой вы делитесь в соцсети,
Для CMS MODX Revo:
[[~[[*id]]? data-title=»»>
Далее создаем js файл share.js со следующим содержимым:
И подключаем его к шаблону (обязательно после подключения jQuery):
При такой реализации, при наведении на кнопки обычный курсор мыши, давайте сделаем его пальцем (как при наведении на ссылки), для этого в файл CSS добавьте следующую строку:
ul.social-icons li