Создаем социальные кнопки для веб-сайта без плагинов
2013-05-16Доброго времени суток, дорогие читатели!
Сегодня я хочу рассказать о том, для чего вашему сайту или блогу нужны социальные кнопки и как их создать.
О назначении социальных кнопок вы, скорее всего, уже знаете: сейчас они присутствуют на большинстве сайтов и вы их наверняка замечали. Обычно они представляют собой квадратики со значками соответствующих им социальных сетей или кнопочки с надписями “Поделиться”, “Рассказать друзьям”, “Нравится” и тому подобными.
Как правило, располагаются кнопки социальных сетей в конце статьи, призывая посетителя поделиться ссылкой на понравившийся материал со своими друзьями. При нажатии на социальную кнопку появляется окошко, предлагающее разместить ссылку на статью в соответствующей социальной сети. Если пользователь уже авторизован в данной социалке, то поля с адресом ссылки и названием статьи будут уже заполнены, что очень удобно для читателя.
Иногда социальные кнопки также дублируются в боковой колонке веб-сайта.
Для владельца сайта наличие кнопок социальных сетей означает дополнительную и весьма эффективную возможность привлечения новых посетителей. Щелкая по ним, читатель не только создает новые ссылки на ваш ресурс, но и информирует своих друзей по соцсети о том, что статья понравилась ему, поскольку представляет собой достаточную ценность. Возможно, им станет любопытно, и они тоже заглянут к вам в гости.
Заманчивая возможность для увеличения посещаемости сайта, не так ли? Думаю, именно она и вызвала желание создать социальные кнопки на вашем сайте или блоге, приведя на странички моих заметок.
Приступим же к делу.
Чтобы добавить на сайт, работающий на движке WordPress кнопки социальных сетей, существуют специальные плагины и сервисы, но я предлагаю все сделать вручную, тем более, это не так уж сложно. Кроме того, чем меньше плагинов вы используете – тем выше скорость загрузки веб-сайта, а это – ценный фактор.
Для создания соцкнопок нам понадобятся… сами кнопки, точнее сказать, картинки с изображенными на них логотипами социальных сетей. Такие картинки вы можете самостоятельно найти в интернете, выбрав подходящий дизайн и размер или воспользоваться набором картинок-иконок, как у меня (ссылка на скачивание архива – в конце статьи). Изображения нужно подогнать одну к другой по ширине или высоте (в зависимости от того, как вы будете располагать их – вертикально или горизонтально) и поместить их в одну папку, например, в папке с вашей темой оформления сайта открываем папку с картинками img и создаем в ней папку socialbuttons. Тогда путь к изображениям кнопок будет такой:
|
1 |
<img src="<?php bloginfo('template_url'); ?>/img/socialbuttons/название кнопки1.png"> |
Этот путь мы будем подставлять в код для выведения и правильной работы социальных кнопок на страницах сайта. Каждая кнопочка – это картинка со ссылкой, открывающей диалоговое окошко определенной социальной сети.
Ниже я привожу код ссылок для кнопок наиболее популярных социалок с уже прописанным путем к папке с изображениями.
Кнопка Вконтакте:
|
1 |
<a onclick="window.open('http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>', 'vkontakte', 'width=626, height=436'); return false;" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/img/socialbuttons/vkontakte.png" width="21" height="21" title="Поделиться с друзьями ВКонтакте" alt="Поделиться с друзьями ВКонтакте"></a> |
Кнопка Одноклассники:
|
1 |
<a onclick="window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>', 'odkl', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/img/socialbuttons/odkl.png" width="21" height="21" title="Поделиться с друзьями в Одноклассниках" alt="Поделиться с друзьями в Одноклассниках"></a> |
Кнопка Facebook
|
1 |
<a onclick="window.open('http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>', 'facebook', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/img/socialbuttons/facebook.png" width="21" height="21" title="Поделиться с друзьями в Facebook" alt="Поделиться с друзьями в Facebook"></a> |
Кнопка Мой Мир Mail.ru
|
1 |
<a onclick="window.open('http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>', 'mmir', 'width=626, height=436'); return false;" rel="nofollow" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/img/socialbuttons/mailmir.png" width="21" height="21" title="Поделиться с друзьями Моего Мира на Mail.ru" alt="Поделиться с друзьями Моего Мира на Mail.ru"></a> |
Кнопка Я.ру
|
1 |
<a onclick="window.open('http://wow.ya.ru/posts_share_link.xml?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>', 'yaru', 'width=626, height=436'); return false;" rel="nofollow" href="http://wow.ya.ru/posts_share_link.xml?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ?>/img/socialbuttons/yaru.png" width="28" height="21" title="Поделиться с друзьями на Я.ру" alt="Поделиться с друзьями на Я.ру"></a> |
Кнопка Livejournal.com (ЖЖ)
|
1 |
<a onclick="window.open('http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>', 'lj', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" title="Рассказать в своем блоге livejournal.com"><img src="<?php bloginfo('template_url'); ?>/img/socialbuttons/livejournal.png" alt="Рассказать в своем блоге livejournal.com" width="21" height="21"></a> |
Кнопка Tweeter
|
1 |
<a rel="nofollow" target="_blank" href="http://twitter.com/home/?status=<?php the_title(); ?> <?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/img/socialbuttons/twitter.png" title="Добавить в Twitter" alt="Добавить в Twitter" /></a> |
Используя эти коды не забудьте удостовериться в правильности указания пути папки с изображениями соцсетей, a также размеров картинок width и height . В примере указаны размеры используемых мною кнопок. Атрибуты alt и title можете поменять на свои.
Кнопки социальных сетей удобно вставлять на страницы, расположив вышеупомянутые ссылки внутри отдельного блока или таблицы.
Например, так:
|
1 2 3 4 5 6 7 8 |
<div class="socbuttons"> <ccылка 1> <ccылка 2> <ccылка 3> <ccылка 4> <ccылка 5> <ccылка 6> </div> |
Можно присвоить этому блоку класс socbuttons для которого описать расположение и внешний вид на странице с помощью стилей или указать необходимые параметры здесь же, например:
|
1 |
<div class="socbuttons" align="center"> |
Сам блок div или таблицу table вставляете в то самое место шаблона страницы, где хотите видеть социальные кнопки.
Загрузить архив с маленькими иконками соцсетей можно по ссылке: socialbuttons.zip
Вот и все. Надеюсь, у меня получилось понятно объяснить и в знак благодарности вы понажимаете соцкнопочки, расположенные ниже этой статьи.
Спасибо за внимание.
