Социальные сети настолько прочно вошли в жизнь каждого пользователя Интернета, что рассказывать о том, что это такое просто нет смысла. А вот что такое социальные кнопки или как их еще называют кнопки социальных сетей для сайта и зачем они нужны на Вашем сайте – об этом и пойдет речь в этой статье.

Если Вам часто приходится посещать различные сайты и блоги Интернета, а так оно скорее всего и есть, то может быть обращали внимание на кнопки с названиями или символами сайтов социальных сетей. Таких, как Twitter, Facebook, Freandfeed, LiveJournal, В контакте многих других – вот такие:

Или такие:

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

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

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

Так что если я Вас убедил, и Вы хотите сами создать и установить на сайт социальные кнопки, то давайте сделаем это. Немного о функциональных возможностях создаваемых нами кнопок социальных сетей. Так как человек ленив по своей природе, то создаваемая социальная кнопка должна свести к минимуму объем работы по созданию ссылки на страницу Вашего сайта. Поэтому скрипт кнопки откроет стандартную форму социальной сети, позволяющую добавить новую запись в аккаунт пользователя, причем автоматом передаст адрес статьи Вашего сайта и ее название. Естественно, что в таком случае, посетителю сайта не нужно будет набирать текст названия статьи и копировать ссылку на нее.

В какое место страницы сайта будем вставлять социальные кнопки? Да в какое хотите! По моему мнению, самое удачное место – это конец статьи. Вот туда и вставим. И сразу определимся, где в шаблоне WordPress «это самое место». Для этого зайдем в папку шаблона и откроем в html редакторе, например в Dreamweaver, файл single.php в режиме Код. Находим строчку:

<?php the_content (‘Читать далее &raquo;’); ?>

или

<?php the_content (‘Читать полностью’); ?>

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

Социальная кнопка сети Twitter

<a rel=»nofollow» title=»Добавить в Twitter» target=»_blank» href=»http://twitter.com/home/?status=<?php the_title (); ?> <?php the_permalink (); ?>»><img src=»http://ваш сайт/wp-content/themes/ваша тема/images/twit1.png» alt=»Добавить в Twitter» /></a>

Что мы видим.

• Тег rel=»nofollow» – позволяет скрыт ссылку от индексации поисковыми системами
• Тег title — позволяет видеть надпись «Добавить в Twitter» при наведении на кнопку курсора
• Тег target=»_blank» – позволяет открыть форму добавления в другой вкладке браузера
• Адрес и скрипт социальной сети
• Вставка картинки социальной кнопки. Если Вы разместили картинки кнопок в папке imagesтемы Вашего сайта.
• Тег alt – позволяет видеть соответствующую надпись, пока грузится картинка в браузере

Если Вы будете ставит на свой сайт эту кнопку, то само собой разумеется, вместо ваш сайтпоставьте адрес Вашего сайта, вместо ваша тема – имя активной темы (шаблона), ну и не забудьте правильно прописать название Вашей картинки и ее формат

А вот и коды других социальных кнопок:

Социальная кнопка сети FaceBook

<a rel=»nofollow» title=»Поделиться ссылкой в FaceBook» target=»_blank» href=»http://www.facebook.com/sharer.php?u=<?php the_permalink (); ?>»><img src=»http://ваш сайт/wp-content/themes/ваша тема/images/face.png» alt=»Поделиться ссылкой в FaceBook»></a>

Социальная кнопка сети FriendFeed

<a rel=»nofollow» title=»Добавить в FriendFeed» target=»_blank» href=»http://www.friendfeed.com/share?title=<?php the_title (); ?> <?php the_permalink (); ?>»><img src=»http://ваш сайт/wp-content/themes/ваша тема/images/freand.png» alt=»Добавить в FriendFeed» /></a>

Социальная кнопка сети Livejournal

<a rel=»nofollow» title=»Добавить в свой блог на livejournal.com target=»_blank» href=»http://www.livejournal.com/update.bml?event=<?php the_permalink (); ?>&subject=<?php the_title (); ?>» ><img src=»http://ваш сайт/wp-content/themes/ваша тема/images/live.png» alt=»Добавить в livejournal» /></a>

Социальная кнопка сети ВКонтакте

<a rel=»nofollow» title=»Поделиться ВКонтакте» target=»_blank» href=»http://vkontakte.ru/share.php?url=<?php the_permalink (); ?>» ><img src=»http://ваш сайт/wp-content/themes/ваша тема/images/kont.png» alt=»Добавить в ВКонтакте » /></a>

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

<div class=«knopka»> код кнопки 1 код кнопки 2 код кнопки 3 и.т.д. </div>

Этот код нужно вставить в код файла single.php. Куда вставлять – Вы уже знаете. Затем открываем в редакторе Dreamweaver или любом другом таблицу стилей Вашей темы, в конце таблицы добавляем вот такой код:

.knopka { width: ширина контейнера px; height: высота картинки px; }

Естественно со своими значениями ширины и высоты контейнера. Вот, пожалуй, и все о том, как создавать кнопки социальных сетей для сайта на WordPress. Не спешите делать это непосредственно на реальном хостинге. Обкатайте разные варианты на Денвере, он для этого и создан. Успехов!