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

Здравствуйте дорогие читатели блога 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&amp;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&amp;u=<?php the_permalink(); ?>&amp;n=<?php the_title(); ?>&amp;a=ADD_SERVICE_FLAG&amp;passive=true&amp;alinsu=0&amp;aplinsu=0&amp;alwf=true&amp;hl=ru&amp;skipvpage=true&amp;rm=false&amp;showra=1&amp;fpui=2&amp;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>

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

1. Скопировать изображения и поместить их в папку images в корне своего сайта.
2. Скопировать по порядку в Notepad++ все (ну или понравившиеся вам) кода и заменить пути к картинкам на свои.
3. Поместить все кода кнопок социальных сетей в теги <noindex>Kod</noindex> и добавить в файл single.php.
4. Применить стиль 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