
Здравствуйте дорогие читатели блога dmitriydenisov.com. В этой статье речь пойдет о такой актуальной теме, как создание кнопок социальных сетей для сайта на WordPress. Существует огромное количество самых разнообразных плагинов для добавления этих самых кнопок, но в этой статье речь пойдет не о них. Я расскажу о другом методе – создание кнопок социальных сетей для сайта вручную. Преимущество данного метода в том, что вы минимизируете нагрузку на сервер (Оптимизация блога WordPress для снижения нагрузки на сервер). При использовании ручного создания кнопок, количество обращений к базе данных минимально, что есть несомненным плюсом со стороны оптимизации сайта. Также вы будете иметь полную власть над внешним видом и функциональностью созданных вами кнопок, что тоже очень важно. Итак, перейдем к делу.
Создание кнопок социальных сетей на своем сайте есть одним из очень важных шагов в продвижении своего сайта. Он позволяет получать внешние ссылки на внутренние станицы вашего сайта абсолютно бесплатно. А как вы знаете, чем больше внешних ссылок – тем лучше. Они, как известно, очень сильно влияют на выдачу в поисковых системах поэтому, как вы уже, наверное, заметили, на большинстве популярных сайтов присутствуют кнопки социальных сетей.
В данный момент в мире очень быстро развиваются социальные сети, такие как ВКонтакте, FaceBook, Twitter, FriendFeed и многие другие поэтому, создав кнопки социальных сетей на своем сайте, вы получите не только внешние ссылки, но и целевых посетителей. К сожалению, с социальной сетью Twitter у меня возникли проблемы, потому установка кнопки добавления в Twitter рассматриваться в этой статье не будет. При большом желании можно поэкспериментировать и найти материалы в сети. К счастью в интернете еще много статей на эту тему. На этом я заканчиваю вступительный текст и перехожу к основной части данной статьи.
Создание кнопок социальных сетей и закладок для сайта на WordPress
Для начала давайте разберемся с изображениями для кнопок. Их можно создать как самостоятельно, так и просто скачать с интернета. Мне подошел второй вариант, так как те изображения, которые я нашел в сети, выглядели вполне нормально. Я не стал утруждать себя созданием каждой кнопки по отдельности в программе PhotoShop, что и вам советую. Поэтому привожу пример изображений, которые использую у себя на блоге.
Ниже я буду приводить примеры кодов кнопок социальных сервисов, которые использую сам. Для большего удобства я советую вам создать в корне сайта папку images и поместить туда все изображения, которые вы будете использовать. Если вы это сделаете, то сэкономите много времени, прописывая пути к картинкам вручную. За вас это сделал я. Для быстрой работы скопируйте в Notepad++ все необходимые вам кода кнопок социальных сетей и нажмите Ctrl+F для вызова поиска.
Затем перейдите во вкладку «Заменить», в поле «Что искать введите dmitriydenisov.com, а в поле «Заменить на» пропишите адрес своего сайта, после чего нажмите «Заменить все». Так вы избежите ручной замены путей к картинкам и ускорите свою работу.
И последнее, что стоит упомянуть, это файл, в который будет добавляться код социальных сетей. Так как за вывод заметок в WordPress отвечает файл single.php, то в него мы и будем добавлять наш код. Для этого открываем на редактирование файл single.php и где-то в конце, например, после кода
<?php edit_post_link('Редактировать', '<p class="edit">', '</p>'); ?>
добавляем код кнопок наших социальных сетей. Итак, переходим к самому коду.
1. Код кнопки добавления в Я.ру:
<noindex><a target="_blank" rel="nofollow" href="http://my.ya.ru/posts_add_link.xml?title=<?php the_title(); ?>&URL=<?php the_permalink(); ?>"><img src="https://archive.dmitriydenisov.com/images/yru.gif" title="Поделиться ссылкой на Я.ру" width="16" height="16"></a></noindex>
Немного опишу то, что здесь есть.
- Теги <noindex> и атрибут rel=»nofollow» — запрещают индексацию ссылок, что очень полезно для продвижения своего сайта, так как исключает утечку Google PageRank.
- Атрибут target=»_blank» — способствует открытию сервиса социальной сети в другом окне, оставляя ваш сайт открытым, что очень удобно.
- img src – путь к изображению кнопки социальной сети.
- Атрибуты width и height – размеры изображения. Ширина и высота соответственно.
- Title – текст, который будет отображаться при наведении курсора мышки на кнопку.
2. Код кнопки добавления в блог на блог-платформе LiveInternet:
<a href="http://www.liveinternet.ru/journal_post.php?action=l_add&cnurl=<?php the_permalink(); ?>" target="_blank"><img src="https://archive.dmitriydenisov.com/images/liru.gif" title="Добавить в свой блог на ЛиРу (Liveinternet)" width="16" height="16"></a>
3. Код кнопки добавления в блог на Blogger:
<a target="_blank" rel="nofollow" href="http://www.blogger.com/blog_this.pyra?t&u=<?php the_permalink(); ?>&n=<?php the_title(); ?>&a=ADD_SERVICE_FLAG&passive=true&alinsu=0&aplinsu=0&alwf=true&hl=ru&skipvpage=true&rm=false&showra=1&fpui=2&naui=8"><img src="https://archive.dmitriydenisov.com/images/blogger.jpg" title="Добавить в свой блог на Blogger.com" width="16" height="16"></a>
(Приведенный выше код может некорректно отображаться в некоторых браузерах, поэтому я рекомендую использовать браузер Mozilla Firefox, который всегда отображает все как надо. Все же я не стал изменять код и привожу его в исходном виде для удобства копирования и установки на свой сайт.)
4. Код кнопки социальной сети ВКонтакте:
<a href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow"><img src="https://archive.dmitriydenisov.com/images/vkontakte.gif"title="Поделиться ВКонтакте" width="84" height="18"></a>
5. Код кнопки социальной сети Facebook:
<a rel="nofollow" target="blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="https://archive.dmitriydenisov.com/images/facebook.gif" title="Поделиться ссылкой в FaceBook" width="73" height="18"></a>
6. Код кнопки Google Buzz:
<a href="http://www.google.com/reader/link?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&srcURL=https://archive.dmitriydenisov.com/" rel="nofollow" target="_blank"><img src="https://archive.dmitriydenisov.com/images/google-buzz-compact.gif" title="Добавить в Google Buzz" width="73" height="18"></a>
7. Код кнопки добавления в сервис Мой Мир:
<a target="_blank" rel="nofollow" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="https://archive.dmitriydenisov.com/images/moi-mir.gif" title="Добавить в Мой Мир" width="86" height="18"></a>
8. Код кнопки добавления в блог Livejournal:
<a target="_blank" rel="nofollow" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" ><img src="https://archive.dmitriydenisov.com/images/livejournal.gif" title="Добавить в свой блог на livejournal.com" width="73" height="18"></a>
9. Код кнопки социальной сети FriendFeed:
<a title="Добавить в FriendFeed" target="_blank" rel="nofollow" href="http://www.friendfeed.com/share?title=<?php the_title(); ?> <?php the_permalink(); ?>"><img src="https://archive.dmitriydenisov.com/images/friendfeed-logo.jpg" width="50" height="14"></a>
Приведенные выше кода расположены в том же порядке, что и у меня. Если вам понравились кнопки социальных сетей, которые вы видите у меня на сайте внизу каждой статьи, и вы хотите такие же, то вам нужно сделать следующее. Теперь повторюсь и по порядку.
- Скопировать изображения и поместить их в папку images в корне своего сайта.
- Скопировать по порядку в Notepad++ все (ну или понравившиеся вам) кода и заменить пути к картинкам на свои.
- Поместить все кода кнопок социальных сетей в теги <noindex>Kod</noindex> и добавить в файл single.php.
- Применить стиль css. Для этого открываем на редактирование файл стилей вашей темы style.css и где-то в конце добавляем новый стиль:
.add_to_service {
color:#333;
font-family:tahoma !important;
font-size:24px !important;
font-weight:normal !important;
line-height:40px !important;
}
Где по порядку идут цвет, семейство, размер и толщина шрифта, а также высота той области, в которой находится текст.
В итоге у вас должно получиться примерно так:
<noindex>
<div class="add_to_service">
Спасибо Вам за добавление этой статьи в
<Кода ваших сервисов социальных закладок>
</div>
</noindex>
На этом я заканчиваю эту статью. Чтобы не пропустить появления новых материалов на блоге, вы можете подписаться на рассылку в пункте «Подписка«. Если же у вас появились вопросы относительно данной статьи – пишите в комментариях.
Удачи вам! Встретимся на страницах блога dmitriydenisov.com
Спасибо за статью.
Есть вопрос. В «моем мире» есть кнопка «Нравится» (адрес – api.mail.ru/sites/plugins/share/), код которой немного другой, чем «добавить в мир».
Там для передачи используется параметр rel, и я никак не могу добавить nofollow. Может кто подскажет, как отредактировать код и вставить туда Nofollow?
А вы можете такую же статью написать, только для uCoz?