Кнопки социальных сетей без плагинов

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

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

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

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

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

<span><noindex><nofollow><a rel="nofollow" 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" 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" 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" target="_blank" href="https://twitter.com/intent/tweet?text=<?php the_title(); ?>: <?php the_permalink(); ?>" title="Добавить в Twitter"><img src="http://Ваш_сайт/wp-content/themes/Ваша_тема/images/Ваша_картинка.gif" alt="Опубликовать В twitter.com" width="45" height="45"></a></nofollow></noindex></span>
<span><noindex><nofollow><a rel="nofollow" target="_blank" href="https://www.blogger.com/blog_this.pyra?u=<?php the_permalink(); ?>&n=<?php the_title(); ?>" title="Добавить в Blogger"><img src="http://Ваш_сайт/wp-content/themes/Ваша_тема/images/Ваша_картинка.gif" alt="Поделиться В Blogger" width="45" height="45"></a></nofollow></noindex></span>
<span><noindex><nofollow><a rel="nofollow" target="_blank" href="https://connect.mail.ru/share?share_url=<?php the_permalink(); ?> <?php the_title(); ?>" title="Поделиться в Мой Мир"><img src="http://Ваш_сайт/wp-content/themes/Ваша_тема/images/Ваша_картинка.gif" alt="Поделиться В Мой Мир" width="45" height="45"></a></nofollow></noindex></span>
<span><noindex><nofollow><a rel="nofollow" target="_blank" href="https://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" title="Поделиться в LiveJournal"><img src="http://Ваш_сайт/wp-content/themes/Ваша_тема/images/Ваша_картинка.gif" alt="Поделиться В LiveJournal" width="45" height="45"></a></nofollow></noindex></span>

• Ссылки обрамлены тегами <noindex> и <nofollow>, чтобы не было их индексации.  
• В теги <a> заключена картинка.
• Размер картинки установлен в 45 пикселей.
• При использовании стилей, можно отформатировать блок для собственных нужд.

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

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

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

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

✍

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

Видео на тему "Кнопки социальных сетей без плагинов":