Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Создаем для блога на WordPress кнопки социальных сетей и закладок Twitter, Vkontakte, Google Buzz, Я.ру, Мой Мир, ЛиРу (Liveinternet), Livejournal, Blogger, Facebook и Friendfeed

Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы поговорим о том, как установить на страницы своего блога кнопки добавления статьи WordPress в популярные социальные сети и сервисы такие как, Twitter, Vkontakte, Google Buzz, Я.ру, Мой Мир, ЛиРу (Liveinternet), Livejournal, Blogger, Facebook и Friendfeed. Естественно, что вы сами сможете выбрать, кнопки на какие именно социальные сети и сервисы вам устанавливать, а я постараюсь подробно рассказать как это сделать в деталях и картинках (ну, в общем, как обычно).

Зачем нужны в WordPress кнопки социальных сетей и сервисов и как они работают

Зачем нужны эти кнопки добавления статьи WordPress в социальные сети и сервисы и почему нужны именно кнопки добавления в социальные сервисы, а не в сервисы социальных закладок, которые можно встретить почти на каждом сайте (Универсальные скрипты, создающие панель с кнопками для добавления статей в популярные сервисы социальных закладок)? Думаю, что этот вопрос излишен, но все же поясню. Тут все дело в перспективности и отдаче, которую можно получить от социальных сервисов и соцзакладок. Так вот, соцзакладки постепенно изживают себя и отдача от постинга анонсов статей в сервисы соцзакладок постепенно и неуклонно снижается.

В то время, как социальные сети и сервисы, такие как Twitter, Vkontakte, Google Buzz, Я.ру, Мой Мир и другие, наоборот, набирают обороты и анонсы ваших статей из WordPress, добавленные читателями в эти сети и сервисы, принесут вам как обратную ссылку на ваш сайт, так и некоторое количество посетителей, которые никогда лишними не будут. У меня, кстати, на днях произошло событие — посещаемость этого блога (KtoNaNovenkogo.ru, если кто не знает, на каком именно сайте он читает эту статью) наконец-то, перевалила за 2000 уникальных посетителей в сутки.

Вернемся к нашим кнопкам социальных сервисов для блога на WordPress. Они ведь нужны не только вам (владельцу WP блога), но и вашим посетителям (читателям), т.к. позволят им в удобной для них форме добавить ссылку на понравившуюся им статью в тот социальные сервис, где они активно общаются. Люди склонны делиться с другими тем интересным, что им удалось найти на просторах интернета.

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

Сама кнопка добавления в какой-либо социальный сервис анонса материала из WordPress будет состоять из картинки этой кнопки и кода (скрипта), с помощью которого будет осуществляться переход на страницу добавления новой записи на сайте этого социального сервиса. Причем, скрипт кнопки добавления статьи из блога на WordPress в социальный сервис будет передавать данные об адресе статьи и о ее названии. Это позволит читателю вашего WP блога не утруждать себя набором текста и копирования ссылок.

Изображения для кнопок социальных сетей и закладок и определения файла из темы WordPress, в который будет вставляться код этих кнопок

Картинки для кнопок добавления статей WP блога в социальные сети и сервисы (Twitter, Vkontakte, Google Buzz, Я.ру, Мой Мир, ЛиРу (Liveinternet), Livejournal, Blogger, Facebook и Friendfeed) вы можете использовать любые (любых размеров и форматов), главное, чтобы было красиво и вписывалось в дизайн вашего блога на WordPress. Можете взять те картинки, которые использую я или же нарисовать (или найти на просторах интернета) свои картинки для кнопок социальных сетей.

или одной картинкой

Далее нам нужно будет определиться, куда именно вы будет вставлять кнопки добавления в социальные сети и сервисы на WP блоге. Очевидно, что это должна быть страница Вордперсс со статьей, на которую, собственно, читатели и будут ссылаться при помощи этих кнопок. Можно разместить кнопки добавления в социальные сети и сервисы сверху или снизу статьи WP блога, а может быть даже и там и там. Главное понять, в какой именно файл нашего блога на WordPress нужно будет вставлять код этих кнопок.

Тут нам может помочь материал, описывающий устройство тем (шаблонов) WordPress — Темы оформления для блога на WordPress — установка, из каких файлов (шаблонов) состоят и как работают. Итак, получается, что в WordPress за вывод страниц с содержимым статей отвечает файл под названием SINGLE. Найти этот файл вы сможете в папке с используемой вами темой (шаблоном) для Вордпресс по следующему пути:

/wp-content/themes/название папки с используемой вами темой оформления WordPress/

Но для этого вам нужно будет подключиться к своему WP блогу по протоколу FTP, например, с помощью программы FileZilla (Как получить доступ к сайту по FTP с помощью программы FileZilla). Откройте файл SINGLE на редактирование в удобном для вас редакторе (я пользуюсь Notepad++). Если вы хотите вставить кнопки добавления в социальные сети и сервисы внизу статьи блога на WordPress (как у меня), то вставлять код кнопок социальных сетей для WordPress нужно будет после содержимого статьи, которое выводится с помощью строчки:

 <?php the_content('Читать полностью'); ?>

Сразу после этой строки вы можете вставлять код нужных вам кнопок добавления в социальные сети и сервисы. Если вы хотите разместить некоторые из этих кнопок еще и в верху статьи блога на WordPress, то код этих кнопок нужно будет вставить перед приведенным выше участком кода файла SINGLE, отвечающим за вывод статьи на вебстраницу. Все довольно просто, осталось только узнать, какой именно код нужно использовать для каждой из кнопок добавления в сервисы Twitter, Vkontakte, Google Buzz, Я.ру, Мой Мир, ЛиРу (Liveinternet), Livejournal, Blogger, Facebook и Friendfeed.

Создаем в WordPress кнопку добавления в Twitter заголовка и URL статьи

Начнем с сервиса микроблогинга Twitter. Последнее время он набирает популярность и на данный момент может являться очень серьезным источником трафика и популяризации вашего сайта. Более подробно о работе в Twitter вы можете почитать в этом материале — Что такое Twitter, регистрация, настройка аккаунта и внешнего вида, поиск друзей и начало общения в Твиттере. Классический вариант кода отправки заголовка и адреса статьи в Twitter выглядит так:

<a rel="nofollow" target="_blank"  href="http://twitter.com/home/?status=<?php the_title(); ?> <?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/twitter1.gif"  alt="Добавить в Twitter" /></a>

Атрибут TARGET="_BLANK" я вставил для того, чтобы сайт Твиттера открывалась в другом окне, оставляя страницу вашего WP блога открытой. Если вам это не нужно, то просто уберите этот атрибут из кода.

Атрибут REL="NOFOLLOW" позволяет закрыть от индексации поисковиками внешнюю ссылку, ведущей с вашего WP блога на сайт Твиттера, что поможет избежать утечки Google PageRank (PR) со страниц вашего сайта (Google PageRank (PR) — что это такое и от чего зависит PR, в чем измеряется и как посмотреть PageRank, как PR влияет на положение в поисковой выдаче Google), а так же позволит больше заработать на продаже ссылок с вашего сайта (Заработок на продаже ссылок со своего сайта в постовых и рекламных обзорах).

Изображение для кнопки добавления в Twitter из WordPress вам нужно будет загрузить в папку IMAGES, которая находится в папке с используемой вами темой (шаблоном) Вордпресс, которая находится здесь:

/wp-content/themes/название папки с используемой вами темой (шаблоном) WordPress/images/

Но я, обычно, избавляюсь от лишнего динамического PHP кода, который можно заменить на статичные ссылки, поэтому строку:

src="<?php bloginfo('template_url'); ?>/images/twitter1.gif"

Я заменяю на реальный путь, где лежит нужная картинка для кнопки добавления в Twitter статьи из WordPress:

src="http://ktonanovenkogo.ru/image/twitter1.gif"

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

Для меня, код кнопки добавления в Twitter, приведенный выше, оказался не совсем удачным, в силу того, что в Твиттере существует ограничение на длину сообщения в 140 знаков, а заголовки моих статей в купе с очень длинными ссылками на эти статьи запросто перекрывают этот лимит. При добавление моей статьи в Твиттер с помощью этой кнопки получается большой перебор по количеству символов:

У меня, зачастую, одна только ссылка может быть длиннее, чем 140 символов, и получается, что в этом случае, даже если сократить все сообщение, то ссылка все равно не поместится. Получается, что такой вариант кнопки добавления в Twitter для моего WP блога никак не подходит. Специально сокращать заголовки статей и длину ЧПУ ссылки (как, кстати, советуют многие спецы) я не намерен, ибо посещаемость моего WP блога доказывает, что длина заголовков статей и длина адресов этих страниц не ухудшает отношение поисковиков к сайту, а возможно это даже окажется лучшим вариантом.

Можно, конечно же, вместо пермалинка, т.е. URL, созданного с помощью ЧПУ, отправлять в Твиттер оригинальный URL на статью, которую формирует сам WordPress, без активации ЧПУ. Не совсем понятно, что я хотел сказать? Попробуйте тогда почитать об этом в статье Настройка ЧПУ (человеко-понятные url) для WordPress. В этом случае код кнопки добавления в Twitter будет выглядеть так:

<a title="Затвитить пост!" target="_blank" rel="nofollow" href="http://twitter.com/home/?status=<?php the_title(); ?> <?php bloginfo('url'); ?>/?p=<?php the_ID(); ?>"><img src="<?php bloginfo('template_url'); ?>/image/rtwitter.png"></a>

При добавлении статьи в Twitter с помощью такой кнопки, получится такой вид URL:

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

А вместо длинного заголовка статьи я решил, что проще будет отправлять просто фразу, вроде «Рекомендую почитать». Может это и не оптимальный вариант, но в моем случае, наверное, наиболее подходящий. Для того, чтобы реализовать описанное в этом абзаце, вам нужно будет использовать такой код для кнопки добавления в Твиттер:

<a rel="nofollow" target="_blank" href="http://twitter.com/home/?status=<?php echo urlencode( 'Рекомендую почитать: ' ) .
fb_gettinyurl( get_permalink() ); ?>" title="Добавить в Twitter"><img src="<?php bloginfo('template_url'); ?>/images/twitter.gif" alt="Опубликовать в twitter.com" ></a>

В Твиттере добавленное с помощью такой кнопки сообщение будет выглядеть так:

Как видите URL адреса материала моего WP блога оказалась укороченной с помощью сервиса TINYURL, а само сообщение получилось очень коротким и пользователь, в случае необходимости, сможет добавить еще что-нибудь от себя. В общем, выбирайте наиболее вам подходящий вариант, используйте приведенные мною выше картинки или же рисуйте свои, как говорится — выбор за вами.

Кнопка добавления в Friendfeed заголовка и URL статьи из блога на WordPress

С сервисом Friendfeed таких проблем как с Твиттером не возникло, ибо такого жесткого ограничения на количество символов в Френдфиде нет. И мои слишком длинные заголовки и адреса (URL) статьей прекрасно помещаются в сообщениях Friendfeed. Подробнее про Friendfeed вы можете почитать в этой статье — Регистрация, настройка канала и трансляции сообщений в FriendFeed.

Еще раз повторюсь, что для того, чтобы ничего не менять в этом коде (кроме названия файла изображения), вам нужно будет загрузить изображение кнопки добавления в Friendfeed в папку:

/wp-content/themes/название папки с используемой вами темой (шаблоном) WordPress/images/

Если же вы будете использовать другую папку в Вордпресс для хранения картинки кнопки, то пропишите путь до этой папки в теге IMG, как я делал это выше.
Код кнопки добавления в Friendfeed из WordPress с пермалинком (ЧПУ оптимизированным URL) в качестве ссылки на статью будет выглядеть так:

<a title="Добавить в FriendFeed" target="_blank" rel="nofollow" href="http://www.friendfeed.com/share?title=<?php the_title(); ?> <?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/social-pillows-friendfeed-1.jpg"></a>

Кнопки добавления в Vkontakte, Google Buzz, Я.ру, Мой Мир, ЛиРу (Liveinternet), Livejournal, Blogger, Facebook заголовка и URL статьи из блога на WordPress

Не буду долго говорить о каждом из этих сервисов, а просто приведу код, который нужно будет вставить в WordPress для добавления во все эти социальные сети и сервисы:

1. Код кнопки добавления в сервис ВКонтакте для WordPress:

   <a href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/vkontakte.gif"title="Поделиться ВКонтакте"></a>

2. Код кнопки добавления в сервис Google Buzz:

   <a href="http://www.google.com/reader/link?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&srcURL=http://ktonanovenkogo.ru/" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/google-buzz-compact.gif" title="Добавить в Google Buzz"></a>

3. Код кнопки добавления в Я.ру:

   <a target="_blank" rel="nofollow" href="http://my.ya.ru/posts_add_link.xml?title=<?php the_title(); ?>&URL=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/yru.gif"  title="Поделиться ссылкой на Я.ру" /></a>

4. Код кнопки добавления в сервис Мой Мир (mail.ru):

   <a target="_blank" rel="nofollow" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/moi-mir.gif"  title="Добавить в Мой Мир"></a>

5. Код кнопки добавления в блог на блог-платформе LiveInternet:

   <a href="http://www.liveinternet.ru/journal_post.php?action=l_add&amp;cnurl=<?php the_permalink(); ?>" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/liru.gif" title="Добавить в свой блог на ЛиРу (Liveinternet)"></a>

6. Код кнопки добавления в блог на блог-платформе Livejournal:

   <a target="_blank" rel="nofollow" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" ><img src="<?php bloginfo('template_url'); ?>/images/livejournal.gif" title="Добавить в свой блог на livejournal.com"></a>

7. Код кнопки добавления в блог на Blogger для WordPress:
   <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="<?php bloginfo('template_url'); ?>/images/blogger.gif" title="Добавить в свой блог на Blogger.com"></a>
8. Код кнопки добавления в сервис Facebook:

   <a rel="nofollow" target="blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/facebook.gif"  title="Поделиться ссылкой в FaceBook"></a>

Да, несмотря на то, что последнее время Яндекс тоже перестал учитывать ссылки с атрибутом REL="NOFOLLOW" (так же, как и все остальные поисковые системы), на всякий случай можно заключить код кнопок добавления в социальные сети и сервисы еще и в тег NOINDEX (в этом случае Яндекс не только не будет индексировать эту ссылку, но и вообще будет игнорировать все, что заключено в этом теге). Т.е., например, для одной из кнопок в WordPress это будет выглядеть так:

<noindex><a rel="nofollow" target="blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/facebook.gif"  title="Поделиться ссылкой в FaceBook"></a></noindex>

Так же будет не плохо, если вы для всех кнопок добавления в социальные сети и сервисы, в теге IMG, пропишите размеры картинки этой кнопки. Это можно сделать с помощью атрибутов тега IMG — HEIGHT и WIDTH (Вставляем изображения в текст с помощью тега IMG). Код кнопки добавления в социальные сети и сервисы для WordPress тогда будет выглядеть, например, так:

<noindex><a rel="nofollow" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" target="_blank" title="Опубликовать в своем блоге livejournal.com"><img src="<?php bloginfo('template_url'); ?>/image/livejournal.gif" alt="Опубликовать в своем блоге livejournal.com" width="73" height="18"></a></noindex>

Код всех тех кнопок, что вы будете добавлять в файл SINGLE (/wp-content/themes/название папки с используемой вами темой оформления WordPress/) вы можете заключить в контейнер из открывающего и закрывающего тегов DIV, прописав для этого контейнера класс. Затем, можно в файле каскадных таблиц стилей STYLE.CSS вашего WP блога (который лежит там же, где и файл SINGLE) прописать для этого класса ряд свойств, которые, например, помогут выровнять блок с кнопками добавления в социальные сервисы (сети) относительно других элементов дизайна WordPress блога.

Для добавления некоторых, из рассмотренных выше кнопок социальных сетей, можно использовать специально предназначенные для этого плагины WordPress или же вставлять скрипт уже готовых кнопок социальных сетей и сервисов с расширенным функционалом. Правда, WP плагины и скрипты кнопок будут создавать дополнительную нагрузку на сервер, при загрузке страниц вашего WP блога, поэтому рассмотренный выше способ создания кнопок для добавления в социальные сети и сервисы является оптимальным с точки зрения снижения нагрузки WordPress на сервер хостинга. WP плагины и скрипты кнопок добавления в социальные сети и сети и сервисы, я тоже буду рассматривать в последующих статьях. Может быть, кому-то такой способ добавления кнопок покажется лучшим.

У Евгения Попова вышел новый видекурс Все Технические Моменты Онлайн Бизнеса в Видеоформате, который стоит того, чтобы с ним ознакомиться.

Вы так же можете ознакомиться с другими статьями на тему продвижения сайта:

• Продвижение сайтов (SEO и SMO)
  • Как добавить сайт в поисковые системы
  • Как добавить сайт в каталоги Яндекс, Google (DMOZ) и др.
  • Бесплатные обратные ссылки
  • Продвижение в социальных медиа (SMO)
    • Постинг в сервисы социальных закладок
    • Кросспостинг в блоги на бесплатных блог-платформах
    • Кнопки социальных сетей для сайта
    • Привлечение посетителей на сайт с социальных медиа
    • Favicon - сделайте сайт более заметным
  • Что такое ТИЦ, PageRank, Alexa Rank и как их нарастить
  • Поисковая оптимизация сайтов (SEO)
    • Как работают поисковые системы
    • Поисковое продвижение сайта в Google
    • Что такое трастовость и авторитетность сайта
    • Внутренняя оптимизация контента сайта
    • Внутренняя оптимизация сайта
    • Подбор и выделение ключевых слов, проверка тошноты страницы, убираем дубли
    • Оптимальная частота употребления ключевых слов и длина текста
    • Внутренняя перелинковка под низкочастотные поисковые запросы
    • Улучшаем индексацию сайта через правильный robots.txt
    • Оптимальные файлы robots.txt для Joomla, WordPress и SMF
    • Влияние факторов поисковой оптимизации на продвижение
    • Самостоятельное продвижение сайта

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

• Twitter и FriendFeed — Часть 2 — Регистрация, настройка канала и трансляции сообщений в FriendFeed, настройка автоматического добавления в Twitter заголовков новых статей вашего сайта
• Google +1 и Мне нравится (like button) от Вконтакте и Facebook — как добавить кнопки на свой сайт
• Яндекс кнопка (блок) Поделиться и другие кнопки социальных сетей для сайта
• Создание карты сайта для блога на WordPress с помощью плагинов Google XML Sitemaps и Sitemap Generator — Часть 1 – Установка и настройка WP плагина Google XML Sitemaps в Вордпресс
• Счетчики посещений (посещаемости) LiveInternet, Mail.ru, Google Analytics, HotLog, SpyLog, Rambler, Я.Метрика — установка и работа со статистикой — Часть 1 — LiveInternet (LI) и Mail.ru
• Оптимизация блога на WordPress для снижения его нагрузки на сервер хостинг-провайдера — Часть 3 — Снижение потребляемой памяти при создании страниц, плагин WPLANG Lite
• Facebook — регистрация в социальной сети фейсбук на русском, создание и вход на свою страницу, оптимизации страницы и ее раскрутка