Социальные кнопки или кнопки социальных сетей для сайта
Социальные сети настолько прочно вошли в жизнь каждого пользователя Интернета, что рассказывать о том, что это такое просто нет смысла. А вот что такое социальные кнопки или как их еще называют кнопки социальных сетей для сайта и зачем они нужны на Вашем сайте – об этом и пойдет речь в этой статье.
Если Вам часто приходится посещать различные сайты и блоги Интернета, а так оно скорее всего и есть, то может быть обращали внимание на кнопки с названиями или символами сайтов социальных сетей. Таких, как Twitter, Facebook, Freandfeed, LiveJournal, В контакте многих других – вот такие:
Или такие:
В общем, они могут быть настолько разными, насколько хватает фантазии их авторам. Зачем они нужны. Нужны социальные кнопки как Вам, то есть хозяину сайта, так и посетителям, зашедшим на Ваш сайт.
Посетителям кнопки социальных сетей дают возможность добавить ссылку на статью, которая им понравилась в ту социальную сеть, в которой есть аккаунт посетителя и где он активно общается с такими же завсегдатаями социальной сети. А так как людям свойственно делиться полезной информацией друг с другом, то ссылка на Ваш сайт может стать доступной многим людям и вполне может быть они станут постоянными посетителями Вашего сайта.
Кроме этого, Вы, как хозяин сайта, получаете анонс страницы сайта в социальной сети и обратную ссылку на Ваш сайт, что никогда лишним не будет. Тем более, что популярные сайты социальных сетей очень уважают поисковые системы и ссылки с этих сайтов очень быстро индексируются.
Так что если я Вас убедил, и Вы хотите сами создать и установить на сайт социальные кнопки, то давайте сделаем это. Немного о функциональных возможностях создаваемых нами кнопок социальных сетей. Так как человек ленив по своей природе, то создаваемая социальная кнопка должна свести к минимуму объем работы по созданию ссылки на страницу Вашего сайта. Поэтому скрипт кнопки откроет стандартную форму социальной сети, позволяющую добавить новую запись в аккаунт пользователя, причем автоматом передаст адрес статьи Вашего сайта и ее название. Естественно, что в таком случае, посетителю сайта не нужно будет набирать текст названия статьи и копировать ссылку на нее.
В какое место страницы сайта будем вставлять социальные кнопки? Да в какое хотите! По моему мнению, самое удачное место – это конец статьи. Вот туда и вставим. И сразу определимся, где в шаблоне WordPress «это самое место». Для этого зайдем в папку шаблона и откроем в html редакторе, например в Dreamweaver, файл single.php в режиме Код. Находим строчку:
<?php the_content (‘Читать далее »’); ?>
или
<?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. Не спешите делать это непосредственно на реальном хостинге. Обкатайте разные варианты на Денвере, он для этого и создан. Успехов!
Как сделать так, что бы они выстроились в ширину, а не одна под другой.
Заключите их в div контейнер к примеру с фиксированной высотой
Попробуйте команду float=»left»
Вставил вышеприведённый код, на фейсбуке и в твиттере не прописывает страницу с которой был переход. Или пустое поле, или вбивать приходится руками адрес страницы, что в корне не удобно. В контакте только нормально прописывает страницу с которой совершен переход 🙁
Все работает! Спасибо!
Помогите, пожалуйста. Какую таблицу стилей надо открывать, где она?
Это файл style.css
Ура у меня тоже получилось кнопочки поставить. Правдо на локалке мучался, завтра перенесу на сайт.
Добавить комментарий