Как добавить кнопки социальных сервисов на свой блог
Сайт дня (как попасть): SEO копирайтинг - наше слово, ваша прибыль!
Дорогие друзья, сегодня я расскажу о том, как добавить кнопки социальных сервисов в конце статей. Причем кнопки будут добавлены не в виде стандартных скриптов, а в виде картинок, что имеет ряд плюсов.
Наверняка вы заметили, что в последнее время многие социальные сервисы (Google Buzz, Вконтакте, Мой Мир и т.д.) ввели свои кнопки, чтобы пользователи могли делиться интересными материалами.
На мой взгляд, сейчас в рунете происходит переход от кнопок социальных закладок на кнопки социальных сервисов. Причины этого - социальные сервисы намного более перспективны в плане посещаемости, там огромный потенциал трафика.
Еще одной причиной является то, что большинство сервисов социальных закладок попали под фильтр яндекса, в результате чего у большинства из них в индексе осталось либо несколько страниц, либо 0. В свое время сервисы закладок были очень эффективны, но, к сожалению, сейчас эффект от них намного снизился.
Для чего нужны кнопки социальных сервисов в конце статей? Ответ прост - чтобы дать возможность вашим посетителям делиться понравившимися материалами вашего сайта в социальных сервисах. Это позволит не только бесплатно получать внешние ссылки на ваш ресурс, но и дополнительных посетителей. Посмотрите на англоязычный интернет - там продвижение в социальных сервисах давно стало неотъемлемой частью развития сайта и увеличения посещаемости.
Итак, решено ставить кнопки социалок. Каждый сервис предоставляет готовые коды скриптов. Но использование скриптов имеет два ощутимых минуса.
1. Чем больше скриптов на странице - тем медленнее она загружается. Бывают случаи, когда какой-либо скрипт подтормаживает, что еще больше затягивает скорость загрузки страницы.
Как известно, Google уже официально заявил, что теперь скорость загрузки сайта является важным фактором ранжирования сайта в результатах поиска. Простыми словами - при прочих равных условиях выше будут позиции того сайта, который быстрее загружается. Кстати, вы можете получить хорошие скидки на быстрый и качественный хостинг Fastvps.ru, которым я пользуюсь, подробнее здесь.
2. К сожалению, у социальных сервисов нет стандарта в размерах кнопок (хотя бы по высоте). Если вы добавите несколько кнопок в виде кодов стандартных скриптов, то увидите, что выглядят они аляповато - одни выше, другие ниже, одни пухленькие, другие тощие 
. Меня, как свободного художника, это очень и очень огорчает.
Одним из плюсов скриптов является то, что можно сделать отображение счетчика добавления материала в тот или иной сервис, но я думаю, в этом особой необходимости нет. Мне хватает кнопки в начале постов с количеством ретвитов. Чтобы поставить такую кнопку, почитайте пост 6 сервисов кнопок retweet.
Пару недель назад я стал созревать для того, чтобы усовершенствовать участок с кнопками в конце постов на Shakin.ru. Предпочитаю делать такие вещи на вдохновении. До «рестайлинга» нижняя часть всех статей блога выглядела вот так:
В прошедшую субботу ко мне пришло Ее Величество Вдохновение. Причем пришло рано утром, на два часа раньше того времени, когда я обычно просыпаюсь - в 8 утра (при этом я лег спать в 3 ночи, так как увлекся работой по продвижению одного англоязычного сайта). Это вдохновение было именно для создания кнопок добавления в социальные сервисы.Звучит маниакально, но я проснулся с горящими глазами и страстным желанием сделать красивые и удобные кнопки . Через четыре часа работы все было готово. После генеральной приборки этот хаос стал выглядеть вот так:
Кнопки добавления в социальные сервисы мне пришлось обтачивать напильником в Фотошопе - они не совпадали по высоте, а некоторых и не было (пришлось рисовать кнопку Твиттера, Вконтакте и ЖЖ на основе их логотипов). Кнопку Google Buzz тоже пришлось переделать, так как четырехцветный овал находился справа от кнопки, что мне не подходило.
Я пришел к выводу, что высота кнопок должна быть 18 пикселей. Вы можете использовать мои кнопки либо нарисовать свои, загрузив их на свой хостинг. Если у вас блог Wordpress, то загрузите картинки с кнопками в папку wp-content/themes/ваша_тема/images.
Теперь дело осталось за малым - сделать так, чтобы при нажатии на кнопку осуществлялось добавление вашего материала в тот или иной социальный сервис. Приведу готовые примеры кодов со своего блога. Для открытия php файлов используйте стандартный блокнот (или продвинутый блокнот, например, Notepad++).
Эти коды добавляются в файле single.php (в некоторых темах его нет, тогда используйте файл index.php) в папке с темой вашего блога wp-content/themes/ваша_тема/ после этого участка:
<?php the_content(''); ?>
Cсылку @shakinru в коде кнопки Твиттера замените на свою.
Кнопка добавления в Twitter:
<noindex><a rel="nofollow" target="_blank" href="http://twitter.com/home?status=RT @shakinru <?php the_title(); ?>: <?php the_permalink(); ?>" title="Добавить в Twitter"><img src="<?php bloginfo('template_url'); ?>/images/twitter.gif" alt="Опубликовать в twitter.com" width="78" height="18"></a></noindex>
Кнопка добавления в ВКонтакте:
<noindex><a href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/vkontakte.gif" width="84" height="18" title="Поделиться ВКонтакте"></a></noindex>
Кнопка добавления в Facebook:
<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" width="73" height="18" title="Поделиться в Facebook"></a></noindex>
Кнопка добавления в Google Buzz:
<noindex><a href="http://www.google.com/reader/link?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&srcURL=http://shakin.ru/" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/google-buzz-compact.gif" width="73" height="18" title="Добавить в Google Buzz"></a></noindex>
Кнопка добавления в Мой Мир:
<noindex><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" width="86" height="18" title="Поделиться В Моем Мире"></a></noindex>
Кнопка добавления в Livejournal:
<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'); ?>/images/livejournal.gif" alt="Опубликовать в своем блоге livejournal.com" width="73" height="18"></a></noindex>
Данные коды кнопок лучше добавлять так:
<div class="buttons">
коды кнопок
</div>
Это позволит легко задать нужный стиль оформления всему блоку с кнопками через файл стилей style.css.
Красота! Кнопки добавления в социальные сервисы готовы. Но для максимального эффекта мало дать возможность читателям добавлять ваши материалы, нужно дать ссылки на ваши профили в этих сервисах, чтобы ваши посетители при желании могли легко к вам присоединиться. Это увеличит активную аудиторию ваших читателей.
Поэтому добавим кнопки на свои профили в социальных сервисах. Идем в Google, набираем запрос «social icons» и скачиваем понравившийся набор иконок социальных сервисов.
Так как понравившиеся мне наборы не содержали иконок ВКонтакте и ЖЖ, то я сделал их в Фотошопе на основе других иконок и логотипов этих сервисов. Когда будете искать нужные логотипы, то советую искать их в формате PNG - у этого формата отличная поддержка прозрачности, что избавит вас от чистки логотипа от фона. Для поиска логотипов в формате PNG наберите запрос вида «livejournal logo png» в Google Картинках.
Затем загружаем иконки в папку wp-content/themes/ваша_тема/images. Я выбрал иконки размером 32х32 пикселя.
По кусочкам код каждой кнопки давать не буду, а то вижу, что некоторые из вас начинают зевать и скучать . Приведу код сразу всех кнопок, ведущие на профили в социальных сервисах. Не забудьте поменять ссылки с моих профилей на свои.
<div class="buttons">
Приглашаю присоединиться ко мне в следующих сервисах:<br>
<noindex><a href="http://twitter.com/shakinru" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/twitter-32.png" title="Присоединиться в Твиттере" width="32" height="32"></a></noindex>
<noindex><a href="http://vkontakte.ru/id80770238" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/vkontakte-32.png" title="Присоединиться ВКонтакте" width="32" height="32"></a></noindex>
<noindex><a href="http://www.facebook.com/profile.php?id=100000550459738" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/facebook-32.png" title="Присоединиться в Facebook" width="32" height="32"></a></noindex>
<noindex><a href="http://www.google.com/profiles/116781296520179206529" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/google-buzz-32.png" title="Присоединиться в Google Buzz" width="32" height="32"></a></noindex>
<noindex><a href="http://friendfeed.com/shakinru" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/friendfeed-32.png" title="Присоединиться во FriendFeed" width="32" height="32"></a></noindex>
<noindex><a href="http://shakinru.livejournal.com/" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/livejournal-32.png" title="Присоединиться в Livejournal" width="32" height="32"></a></noindex>
</div>
По аналогии добавить такие кнопки можно и на другие движки, только нужно узнать, какой код выводит адрес страницы (как в Wordpress - <?php the_permalink(); ?>).
Приглашаю вас присоединиться ко мне в социальных сервисах:
Желаю Вам хорошего и плодотворного дня!
Постовой (как попасть): Психологические тесты для детей.
Любителям графики пригодятся кисти Photoshop.
Оригинальный фотоблог урбаниста.
Десерт на сегодня - потрясающая собака из Майами, которая классно катается на скейтборде и занимается серфингом:
Спасибо Вам за добавление этой статьи в:Мои группы:
↑ Как поставить такие же кнопки на свой сайт ↑
Комментариев: 57
1.
28 апреля 2010 в 4:37 pm
Спасибо! Делал раньше только для твиттера, теперь знаю как для остальных замутить
2.
28 апреля 2010 в 4:47 pm
а не много кнопок? может хватит твиттера и контакта, а то весь блог в кнопках будет))
3.
28 апреля 2010 в 4:51 pm
Хорошо написано. Кстати у себя на блоге хотел написать на подобную тему, но немного позже, а Михаил уже тут как тут ).
4.
28 апреля 2010 в 5:07 pm
Спасибо, Михаил. У меня один вопрос: Как вы изменяете описание статьи, которое высвечивается про добавлении Вконтакте? У меня он обрывается, например так:
"Cегодня я расскажу о том, как добавить кнопки социальных сервисов в конце статей. Причем кнопки будут добавлены не в виде стандартных скриптов, а в виде"
А у вас хорошее описание до конца:
"Cегодня я расскажу о том, как добавить кнопки социальных сервисов в конце статей. Причем кнопки будут добавлены не в виде стандартных скриптов, а в виде картинок, что имеет ряд плюсов."
Еще раз спасибо.
5.
28 апреля 2010 в 5:52 pm
А как же RSS ссылка на подписку через FeedBurner в конце статьи?
6.
28 апреля 2010 в 5:58 pm
Кстати говоря, в плагине SocialGrid для WP есть некоторое количество иконок, вот тут скрин http://wordpress.org/extend/plugins/socialgrid/screenshots/
7.
28 апреля 2010 в 8:08 pm
О! Спасибо большое за кнопки! Скоро приму на вооружение на своих сайтах!
8.
28 апреля 2010 в 8:13 pm
Спасибо за мануал., очень полезный, нужно будет разобраться когда-то и себе поставить на сайт.
Другое дело что движок джумловский и там все немного не так, но разобраться можно.
Михаил, ты не мог-бы написать статью как сделать красивое отображение Rss рассылки. Как добавить туда рекламные блоки (не особо важно) . Как сделать активными ссылки. В общем чтобы новости в RSS ленте были похожи как на shakin.ru
.
но как?
Есть много подписчиков, но тот вариант, на что сейчас похожа рассылка меня вообще не устраивает.
Искал в инете как правильно сделать нигде не пишут, а тема, я думаю, полезная. Из всех подписок через feed твоя самая наилучшая, значит допиливал напильником наверно
Заранее спасибо!
9.
28 апреля 2010 в 8:47 pm
Спасибо, за полезный совет. Уже добавил себе в блог. Думаю за социальными сервисами большое будущее, поэтому нужно быть первыми в этом направлении.
10.
28 апреля 2010 в 8:59 pm
Спасибо, Михаил! Сейчас попробую осуществить у сеья на блоге...
11.
28 апреля 2010 в 9:50 pm
Всем пожалуйста!
Дэн Гамбург, думаю, 6 кнопок - в самый раз.
garryson, я просто после публикации статьи щелкаю по кнопке добавления вконтакте, и ссылка на статью с картинкой там публикуется.
Akhe, для подписки на RSS у меня есть форма подписки по e-mail, думаю, кнопка не нужна.
Александр, спасибо, взял на заметку.
Александр, просто 12 лишних ссылок на каждой странице не нужны.
stilusmen, RSS я не дорабатывал, просто поставил плагин RSS Footer.
12.
28 апреля 2010 в 9:51 pm
Офигеть! Вконтакте интегрирует с огромной скоростью!
13.
28 апреля 2010 в 10:05 pm
Спасибо!!! Теперь буду делать так же!!!!
14.
28 апреля 2010 в 10:19 pm
Только сегодня искал в поисковике подробную статью на эту тему. Но так ничего путнего и не нашел. И тут зашел на любимый shakin.ru и весьма обрадовался. Уже установил некоторые кнопки у себя на блоге.
Огромное Вам спасибо.
И немножко не по теме - вижу у Вас новая защита от ботов, не подскажите что за плагин?
15.
28 апреля 2010 в 11:09 pm
Спасибо огромное, Михаил. Обязательно возьму на вооружение.
А в ЖЖ вставляется просто url ?
16.
29 апреля 2010 в 12:33 am
Не, ну так не бывает)) Я только подумаю о чем-то - и у тебя в блоге нахожу ответ на свой вопрос)))
Вот только поиск установила по твоей инструкции и следующимb в плане как раз эти злополучные кнопки стояли, уже и плагины подыскиват ь начала, а тут подробный мануал!
Михаил, спасибо огромное! @}-.-'-
17.
29 апреля 2010 в 1:34 am
6 кнопок да нормально, я имел ввиду 12 кнопок. Ещё хотел бы покритиковать систему комментирования. Коммент появился через полгода (долго очень))), я думал что спам-фильтр не прошёл)
18.
29 апреля 2010 в 3:20 am
Спасибо за кнопочки, очень нужная вещь. Правда они у меня почему-то в белой рамке отображаются!
19.
29 апреля 2010 в 11:49 am
Михаил, а что скажете насчет сервиса AddThis?
Мне кажется сервис удобный. Единственное - нет кнопок ВКонтакте.
20.
29 апреля 2010 в 12:31 pm
Спасиибо Михаил:) Код "завернут" в <noindex> - он вроде бы как уже не воспринимается не Яшей не Гуглом?
21.
29 апреля 2010 в 2:22 pm
Кстати, а нагрузка на базу данных сильно возрастает? (Из-за обращений <?php the_title(); ?> и т.д.)
22.
29 апреля 2010 в 5:20 pm
В Google Buzz ссылка идёт на Reader
23.
29 апреля 2010 в 6:57 pm
Скажите, пожалуйста, а на Joomla такое можно замутить?
Спасибо!
24.
30 апреля 2010 в 12:23 am
Теперь осталось замерить эффективность каждой кнопки
25.
03 мая 2010 в 10:31 pm
Я вот одно не могу понять и кто бы дал ответ, почему, например, тот же самый код, что у вас у меня постить в социалки с ошибками...
или корявостями..
а у вас, что в фейсбук, что Вконтакт - лепота:((((
Не знаете в чем причина???
26.
04 мая 2010 в 1:14 pm
Спасибо Вам!
- у меня не блог
Я забрала про ЖЖ, только переделала под себя немного
Спасиибо Михаил:) Код "завернут" в <noindex> - он вроде бы как уже не воспринимается не Яшей не Гуглом?
Krasnagor, я так понимаю, что это скрипт, зачем его индексировать =)
Блин жалко что нет рекламы - я б потыкала
у вас интересно и полезно
27.
06 мая 2010 в 9:41 pm
Лена, на всякий случай пусть будет завернут
RE:актив, значит, где-то ошибка. Проверьте еще раз, код брал рабочий с этого блога.
28.
07 мая 2010 в 11:16 pm
Спасибо вам Михаил за отличный пост и урок. Сегодня целый день разбирался как вы это все сделали и вот сейчас все сделал.
29.
08 мая 2010 в 1:21 am
Отлично, спасибо.
Кстати, квадратная иконка Контакта есть на их сайте
30.
09 мая 2010 в 9:34 am
Спасибо передал для себя под адсманаджер под джумлу
Вот вопрос :
<?php bloginfo('template_url'); ?>
что сие код делает?
31.
20 мая 2010 в 7:38 pm
После прочтения поста загорелся идеей поставить себе такое чудо...
Но пошел другим путем, взял готовый плагин добавления в закладки (тот, который мне проще было поковырять с моим слабым знанием php) и добавил в него бобра, мемори, контак, майл, жж и русского мистера вонга.
Из огромных плюсов
- плагин умеет добавлять в другие закладки
- добявлять ссылки либо в пост, либо на везде либо как уму скажешь
- ставит ссылки в rss, что тоже не плохо
- не нужно каждый раз ковырять тему, активировал и забыл
С подпиской на блоги еще не заморачивался и не знаю стоит ли сие дело времени, ибо я не великий программист.
32.
23 мая 2010 в 2:28 am
AlexSims, данный код возвращает путь (адрес) до папки с используемой темой. Например не надо писать полный адрес картинки, а достаточно <?php bloginfo('template_url'); ?>/images/1.gif
33.
23 мая 2010 в 2:30 am
хорошая статья, замутил такую же штуку себе на сайт под Joomla, правда пришлось погемороиться с поиском переменных, но все завершилось удачно ))
пришлось правда отказаться от buzz, почему то он портил мне шаблон ((
как замучу второй блог себе, опубликую в него код кнопок
34.
26 мая 2010 в 2:43 am
Благодарю за хорошую статью. Поменял себе полностью блок на новый. Правда немножко жалко старую иконку для твиттера, уж очень хороша была.
35.
28 мая 2010 в 2:13 am
Здравствуйте, Михаил. Я - новичек в раскрутке сайтов.
Скажите, пожалуйста, как вставить кнопки в шаблон сайтов ДЛЕ?
36.
07 июня 2010 в 2:34 am
Михаил, спасибо конечно большое, но если ни в single.php ни в index.php) нету строчки
<?php the_content(''); ?>
то что делать?вставлял в разные места, но или выше поста или ниже поста, а не так как хочется...
37.
08 июня 2010 в 4:02 pm
Вот спасибо, так спасибо!
Отличный пост, полезная функция.
Пусть Ее Величество Вдохновение не забывает дорогу к Вам!
38.
11 июня 2010 в 3:26 am
Спасибо, Михаил!
Взял идейку у Вас. Конечно, кнопочки свои нарисовал, подходящие под дизайн, в общем, теперь красота... )))
Правда, один нюанс! У Вас кнопка "Buzz this" ведёт на добавление в ридер, для себя я изменил адрес на правильный google.com/buzz/post?url=
А у Вас почему-то google.com/reader/link?url=
39.
14 июня 2010 в 11:29 am
Спасибо за очень толковую статью. Себя отношу к чайникам, но поставить кнопки, после изучения данной статьи смог. И все, что интересно, работает!
40.
04 июля 2010 в 1:54 pm
Спасибо большое за кнопки и за разжеванную статью )) Даже я осилила!
Еще бы хотелось кнопочку и код на Я.ру 
41.
07 июля 2010 в 4:52 am
Большое спасибо за полезные практичные статьи. Давно читаю Ваш блог и многое применяю из того, что Вы пишите. Причем понятным языком, без заумных слов, но про сложные темы. Желаю успехов! Ждем новые интересные статьи!
42.
09 июля 2010 в 5:23 pm
Помогите сделать такие кнопки и для блогспот
43.
10 июля 2010 в 2:39 am
Ольга, Jade, Инна, по блогспоту, DLE и Я.ру надо будет подумать.
Светлана, спасибо за добрые слова!
Gnuser, оба варианта работают, можно использовать любой.
SPaWN, странно. А что у Вас вместо этого кода?
44.
11 июля 2010 в 7:56 pm
Михаил, спасибо большое, но если ни в single.php ни в index.php) нету строчки
<?php the_content(''); ?>
то что делать? У меня ВордПресс.
45.
26 июля 2010 в 7:46 pm
Алярма! Подскажите как вставить в Drupal?
)
(на офф пожалуйста не посылайте, там сообщество какое то забитое - ничего не вытянешь..
46.
30 июля 2010 в 7:03 pm
а как поставить эти кнопочки на самописный сайт?
47.
31 июля 2010 в 8:13 am
Спасибо большое.
Только на блогспот бы еще вставить и кнопочку Мир тесен!
Еще раз благодарю!
48.
01 августа 2010 в 8:05 pm
AmiGator , будь добр подскажи как joomla сделать, какие переменные ставить
49.
03 августа 2010 в 2:57 pm
Спасибо Михайл! сделал, все арбайтн!
один вопрос. как можно без плагина с помощью кодинга выводить похожие статьи в конце поста?
если у Вас на блоге где-то это было описано киньте ссыль пожалуйста, ато искал но не нашел=(
50.
04 августа 2010 в 1:09 am
Хочу обратиться к автору статьи:
Скажите, а как разместить кнопки "retweet" и "buzz this",которые в начале статьи, так, чтобы они были, как у Вас - горизонтально, одна под другой?
51.
06 августа 2010 в 3:54 am
Отличный мануал для новичков, но и для профи отпала нужда лазить по всем соц. сервисам и ирать коды. Я, кстатии, написал плагин для добавления таких вот кнопок, кому интересно, тут можно скачать comphobby.ru/2010/08/05/185/
52.
06 августа 2010 в 3:34 pm
Спасибо большое, но пришлось чутка доработать, чтобы кнопки получились универсальные.
<a rel="nofollow" href="http://vkontakte.ru/" onclick="window.open('http://vkontakte.ru/share.php?url='+(location.href)+' ');return false;" title="Поделиться ВКонтакте">
<img src="свой адрес/images/vkontakte.gif" width="84" height="18" title="Поделиться ВКонтакте"></a>
Все остальные по аналогии.
53.
09 августа 2010 в 6:28 pm
Большое спасибо за урок!
Долго мучалась (наверно, руки кривые), но у меня всё получилось!
54.
18 августа 2010 в 4:20 am
Михаил Оч полезно, но нехватает архива с набором кнопочек
55.
18 августа 2010 в 2:58 pm
Спаисибо.
Воспользовался вашими картинками для своего блога
56.
20 августа 2010 в 10:57 am
Михаил, себе я тоже установил, все работает, за что Вам большое человеческое спасибо! Возник один вопрос: Возможно ли добавить к этому набору кнопку добавления в маил блог? Как это реализовать?
Спасибо большое заранее!
57.
21 августа 2010 в 1:34 pm
Вопрос по кнопке добавления в твиттер, которая находится у Вас в начале поста: Она тоже сделана ручками, или это какой-то плагин Вордпрес? Хочу себе такую же. Если плагин - скиньте название или ссылку на него пожалуйста.