Доброго времени суток, уважаемые читатели. Сегодня тема статьи: «Кнопки социальных сетей без плагинов». Есть много сторонних модулей и плагинов, которые позволяют встроить в сайт кнопки «поделиться». Но все они работают либо со сторонних ресурсов, либо так или иначе нагружают Ваш сайт.

кнопки поделится

Что из себя представляет кнопка «поделиться» любой социальной сети?

Кнопка «поделится» — это ссылка, сформированная определённым образом. В ссылку входит специальный удалённый адрес социальной сети, и адрес Вашей страницы, возможно с названием. Просмотреть данную ссылку, можно, наведя на кнопку курсор мышки.

  • Чтобы использовать кнопку, Вам достаточно сформировать необходимым образом, ссылку в коде Вашего сайта.

Вот код ссылок на 6 социальных сетей, сформированный для WordPress:


<span><noindex><nofollow><a rel="nofollow noopener noreferrer" target="blank" href="https://vk.com/share.php?url=<?php the_permalink(); ?>"><img src="http://Ваш_сайт/wp-content/themes/Ваша_тема/images/Ваша_картинка.gif" width="45" height="45" title="Поделиться в Контакте" alt="Поделиться В Контакте"></a></nofollow></noindex></span>
<span><noindex><nofollow><a rel="nofollow noopener noreferrer" target="blank" href="https://connect.ok.ru/offer?url=<?php the_permalink(); ?>"><img src="http://Ваш_сайт/wp-content/themes/Ваша_тема/images/Ваша_картинка.gif" width="45" height="45" title="Поделиться в Одноклассниках" alt="Поделиться В Одноклассниках"></a></nofollow></noindex></span>
<span><noindex><nofollow><a rel="nofollow noopener noreferrer" target="blank" href="https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="http://Ваш_сайт/wp-content/themes/Ваша_тема/images/Ваша_картинка.gif" width="45" height="45" title="Поделиться в Facebook" alt="Поделиться В Facebook"></a></nofollow></noindex></span>
<span><noindex><nofollow><a rel="nofollow noopener noreferrer" target="blank" href="https://twitter.com/intent/tweet?text=<?php the_title(); ?>: <?php the_permalink(); ?>"><img src="http://Ваш_сайт/wp-content/themes/Ваша_тема/images/Ваша_картинка.gif" width="45" height="45" title="Добавить в Twitter" alt="Опубликовать В twitter.com"></a></nofollow></noindex></span>
<span><noindex><nofollow><a rel="nofollow noopener noreferrer" target="blank" href="https://connect.mail.ru/share?share_url=<?php the_title(); ?>: <?php the_permalink(); ?>"><img src="http://Ваш_сайт/wp-content/themes/Ваша_тема/images/Ваша_картинка.gif" width="45" height="45" title="Поделиться в Мой Мир" alt="Поделиться В Мой Мир"></a></nofollow></noindex></span>
<span><noindex><nofollow><a rel="nofollow noopener noreferrer" target="blank" href="https://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>"><img src="http://Ваш_сайт/wp-content/themes/Ваша_тема/images/Ваша_картинка.gif" width="45" height="45" title="Поделиться в LiveJournal" alt="Поделиться В LiveJournal"></a></nofollow></noindex></span>
  • Ссылки обрамлены тегами <noindex> и <nofollow>, чтобы не было их индексации.  
  • В теги <a> заключена картинка.
  • Размер картинки установлен в 45 пикселей.
  • При использовании стилей, можно отформатировать блок для собственных нужд.

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

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

Сегодня мы рассмотрели тему: «Кнопки социальных сетей без плагинов». Научились встраивать кнопки социальных сетей, без дополнительных расширений. Смотрите так же видео по теме.

Надеюсь статья была вам полезна. До встречи в новых статьях.

С уважением, Андрей Бондаренко.


Видео на тему «Как сделать кнопки «поделиться» без плагинов»: