Главная › Новости

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

Опубликовано: 31.08.2018

Продвижение в социальных сетях - кнопки социальных сетей для сайта

Здравствуйте дорогие читатели блога dmitriydenisov.com . В этой статье речь пойдет о такой актуальной теме, как создание кнопок социальных сетей для сайта на WordPress. Существует огромное количество самых разнообразных плагинов для добавления этих самых кнопок, но в этой статье речь пойдет не о них. Я расскажу о другом методе – создание кнопок социальных сетей для сайта вручную . Преимущество данного метода в том, что вы минимизируете нагрузку на сервер ( Оптимизация блога WordPress для снижения нагрузки на сервер ). При использовании ручного создания кнопок, количество обращений к базе данных минимально, что есть несомненным плюсом со стороны оптимизации сайта. Также вы будете иметь полную власть над внешним видом и функциональностью созданных вами кнопок, что тоже очень важно. Итак, перейдем к делу.

Как установить блок кнопок социальных сетей и закладок на CMS WordPress за 1 минуту

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

Социальные виджеты на сайт / Кнопки, попапы, рекомендованное

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

Для начала давайте разберемся с изображениями для кнопок. Их можно создать как самостоятельно, так и просто скачать с интернета. Мне подошел второй вариант, так как те изображения, которые я нашел в сети, выглядели вполне нормально. Я не стал утруждать себя созданием каждой кнопки по отдельности в программе 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="http://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="http://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="http://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="http://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="http://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=http://dmitriydenisov.com/" rel="nofollow" target="_blank"><img src="http://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="http://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="http://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="http://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

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter