Кнопки социальных сетей для сайта | Как создать свой сайт

Социальные кнопки или кнопки социальных сетей для сайта

Апр-28-2011 Автор: VeryOldMan

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

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

кнопки социальных сетей для сайта

Или такие:

кнопки социальных сетей для сайта

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

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

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

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

В какое место страницы сайта будем вставлять социальные кнопки? Да в какое хотите! По моему мнению, самое удачное место – это конец статьи. Вот туда и вставим. И сразу определимся, где в шаблоне 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. Не спешите делать это непосредственно на реальном хостинге. Обкатайте разные варианты на Денвере, он для этого и создан. Успехов!






8 комментариев
  1. Дмитрий Пишет,

    Как сделать так, что бы они выстроились в ширину, а не одна под другой.

  2. fStrange Пишет,

    Заключите их в div контейнер к примеру с фиксированной высотой

  3. Алена Пишет,

    Попробуйте команду float=»left»

  4. Влад Киевский Пишет,

    Вставил вышеприведённый код, на фейсбуке и в твиттере не прописывает страницу с которой был переход. Или пустое поле, или вбивать приходится руками адрес страницы, что в корне не удобно. В контакте только нормально прописывает страницу с которой совершен переход 🙁

  5. Хирург Пишет,

    Все работает! Спасибо!

  6. Scary Пишет,

    Помогите, пожалуйста. Какую таблицу стилей надо открывать, где она?

  7. VeryOldMan Пишет,

    Это файл style.css

  8. Юрий Пишет,

    Ура у меня тоже получилось кнопочки поставить. Правдо на локалке мучался, завтра перенесу на сайт.

Добавить комментарий