Сайт дня (как попасть): SEO копирайтинг - наше слово, ваша прибыль!
Дорогие друзья, сегодня я расскажу о том, как добавить кнопки социальных сервисов в конце статей. Причем кнопки будут добавлены не в виде стандартных скриптов, а в виде картинок, что имеет ряд плюсов.
Наверняка вы заметили, что в последнее время многие социальные сервисы (Google Buzz, Вконтакте, Мой Мир и т.д.) ввели свои кнопки, чтобы пользователи могли делиться интересными материалами.
На мой взгляд, сейчас в рунете происходит переход от кнопок социальных закладок на кнопки социальных сервисов. Причины этого - социальные сервисы намного более перспективны в плане посещаемости, там огромный потенциал трафика.
Еще одной причиной является то, что большинство сервисов социальных закладок попали под фильтр яндекса, в результате чего у большинства из них в индексе осталось либо несколько страниц, либо 0. В свое время сервисы закладок были очень эффективны, но, к сожалению, сейчас эффект от них намного снизился.
Для чего нужны кнопки социальных сервисов в конце статей? Ответ прост - чтобы дать возможность вашим посетителям делиться понравившимися материалами вашего сайта в социальных сервисах. Это позволит не только бесплатно получать внешние ссылки на ваш ресурс, но и дополнительных посетителей. Посмотрите на англоязычный интернет - там продвижение в социальных сервисах давно стало неотъемлемой частью развития сайта и увеличения посещаемости.
Итак, решено ставить кнопки социалок. Каждый сервис предоставляет готовые коды скриптов. Но использование скриптов имеет два ощутимых минуса.
1. Чем больше скриптов на странице - тем медленнее она загружается. Бывают случаи, когда какой-либо скрипт подтормаживает, что еще больше затягивает скорость загрузки страницы.
Как известно, Google уже официально заявил, что теперь скорость загрузки сайта является важным фактором ранжирования сайта в результатах поиска. Простыми словами - при прочих равных условиях выше будут позиции того сайта, который быстрее загружается. Кстати, вы можете получить хорошие скидки на быстрый и качественный хостинг Fastvps.ru, которым я пользуюсь, подробнее здесь.
2. К сожалению, у социальных сервисов нет стандарта в размерах кнопок (хотя бы по высоте). Если вы добавите несколько кнопок в виде кодов стандартных скриптов, то увидите, что выглядят они аляповато - одни выше, другие ниже, одни пухленькие, другие тощие 🙂 . Меня, как свободного художника, это очень и очень огорчает.
Одним из плюсов скриптов является то, что можно сделать отображение счетчика добавления материала в тот или иной сервис, но я думаю, в этом особой необходимости нет. Мне хватает кнопки в начале постов с количеством ретвитов. Чтобы поставить такую кнопку, почитайте пост 6 сервисов кнопок retweet.
Пару недель назад я стал созревать для того, чтобы усовершенствовать участок с кнопками в конце постов на Shakin.ru. Предпочитаю делать такие вещи на вдохновении. До «рестайлинга» нижняя часть всех статей блога выглядела вот так:
В прошедшую субботу ко мне пришло Ее Величество Вдохновение. Причем пришло рано утром, на два часа раньше того времени, когда я обычно просыпаюсь - в 8 утра (при этом я лег спать в 3 ночи, так как увлекся работой по продвижению одного англоязычного сайта). Это вдохновение было именно для создания кнопок добавления в социальные сервисы.Звучит маниакально, но я проснулся с горящими глазами и страстным желанием сделать красивые и удобные кнопки 🙂 . Через четыре часа работы все было готово. После генеральной приборки этот хаос стал выглядеть вот так:
🔥 Кстати! Я провожу платный курс по продвижению англоязычных сайтов SEO Шаолинь seoshaolin.com. Для читателей блога я делаю хорошую скидку. По прокомоду "блог" тариф Про стоит не 50, а 40 тыс. рублей. Тариф Лайт не 25, а 20 тыс. рублей. Тариф Команда не 75, а 60 тыс. рублей. Пишите мне в Telegram @mikeshakin.
Кнопки добавления в социальные сервисы мне пришлось обтачивать напильником в Фотошопе - они не совпадали по высоте, а некоторых и не было (пришлось рисовать кнопку Твиттера, Вконтакте и ЖЖ на основе их логотипов). Кнопку 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="https://twitter.com/intent/tweet?text=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="https://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="https://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="https://www.google.com/reader/link?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&srcURL=https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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.
Оригинальный фотоблог урбаниста.
Десерт на сегодня - потрясающая собака из Майами, которая классно катается на скейтборде и занимается серфингом:
Подпишитесь на рассылку блога с полезными материалами по SEO
Меня зовут Михаил Шакин, я автор этого блога, занимаюсь SEO с 2006 года. Вы можете заказать у меня
Спасибо! Делал раньше только для твиттера, теперь знаю как для остальных замутить 🙂
а не много кнопок? может хватит твиттера и контакта, а то весь блог в кнопках будет))
Хорошо написано. Кстати у себя на блоге хотел написать на подобную тему, но немного позже, а Михаил уже тут как тут ).
Спасибо, Михаил. У меня один вопрос: Как вы изменяете описание статьи, которое высвечивается про добавлении Вконтакте? У меня он обрывается, например так:
"Cегодня я расскажу о том, как добавить кнопки социальных сервисов в конце статей. Причем кнопки будут добавлены не в виде стандартных скриптов, а в виде"
А у вас хорошее описание до конца:
"Cегодня я расскажу о том, как добавить кнопки социальных сервисов в конце статей. Причем кнопки будут добавлены не в виде стандартных скриптов, а в виде картинок, что имеет ряд плюсов."
Еще раз спасибо.
А как же RSS ссылка на подписку через FeedBurner в конце статьи?
Кстати говоря, в плагине SocialGrid для WP есть некоторое количество иконок, вот тут скрин https://wordpress.org/extend/plugins/socialgrid/screenshots/
О! Спасибо большое за кнопки! Скоро приму на вооружение на своих сайтах!
Спасибо за мануал., очень полезный, нужно будет разобраться когда-то и себе поставить на сайт.
Другое дело что движок джумловский и там все немного не так, но разобраться можно.
Михаил, ты не мог-бы написать статью как сделать красивое отображение Rss рассылки. Как добавить туда рекламные блоки (не особо важно) . Как сделать активными ссылки. В общем чтобы новости в RSS ленте были похожи как на shakin.ru 😉 .
Есть много подписчиков, но тот вариант, на что сейчас похожа рассылка меня вообще не устраивает.
Искал в инете как правильно сделать нигде не пишут, а тема, я думаю, полезная. Из всех подписок через feed твоя самая наилучшая, значит допиливал напильником наверно 🙂 но как?
Заранее спасибо!
Спасибо, за полезный совет. Уже добавил себе в блог. Думаю за социальными сервисами большое будущее, поэтому нужно быть первыми в этом направлении.
Спасибо, Михаил! Сейчас попробую осуществить у сеья на блоге...
Всем пожалуйста!
Дэн Гамбург, думаю, 6 кнопок - в самый раз.
garryson, я просто после публикации статьи щелкаю по кнопке добавления вконтакте, и ссылка на статью с картинкой там публикуется.
Akhe, для подписки на RSS у меня есть форма подписки по e-mail, думаю, кнопка не нужна.
Александр, спасибо, взял на заметку.
Александр, просто 12 лишних ссылок на каждой странице не нужны.
stilusmen, RSS я не дорабатывал, просто поставил плагин RSS Footer.
Офигеть! Вконтакте интегрирует с огромной скоростью!
Спасибо!!! Теперь буду делать так же!!!!
Только сегодня искал в поисковике подробную статью на эту тему. Но так ничего путнего и не нашел. И тут зашел на любимый shakin.ru и весьма обрадовался. Уже установил некоторые кнопки у себя на блоге.
Огромное Вам спасибо.
И немножко не по теме - вижу у Вас новая защита от ботов, не подскажите что за плагин?
Спасибо огромное, Михаил. Обязательно возьму на вооружение.
А в ЖЖ вставляется просто url ?
Не, ну так не бывает)) Я только подумаю о чем-то - и у тебя в блоге нахожу ответ на свой вопрос)))
Вот только поиск установила по твоей инструкции и следующимb в плане как раз эти злополучные кнопки стояли, уже и плагины подыскиват ь начала, а тут подробный мануал!
Михаил, спасибо огромное! @}-.-'-
6 кнопок да нормально, я имел ввиду 12 кнопок. Ещё хотел бы покритиковать систему комментирования. Коммент появился через полгода (долго очень))), я думал что спам-фильтр не прошёл)
Спасибо за кнопочки, очень нужная вещь. Правда они у меня почему-то в белой рамке отображаются!
Михаил, а что скажете насчет сервиса AddThis?
Мне кажется сервис удобный. Единственное - нет кнопок ВКонтакте.
Спасиибо Михаил:) Код "завернут" в <noindex> - он вроде бы как уже не воспринимается не Яшей не Гуглом?
Кстати, а нагрузка на базу данных сильно возрастает? (Из-за обращений <?php the_title(); ?> и т.д.)
В Google Buzz ссылка идёт на Reader 🙂
Скажите, пожалуйста, а на Joomla такое можно замутить?
Спасибо!
Теперь осталось замерить эффективность каждой кнопки 🙂
Я вот одно не могу понять и кто бы дал ответ, почему, например, тот же самый код, что у вас у меня постить в социалки с ошибками...
или корявостями..
а у вас, что в фейсбук, что Вконтакт - лепота:((((
Не знаете в чем причина???
Спасибо Вам!
Я забрала про ЖЖ, только переделала под себя немного 🙂 - у меня не блог
Спасиибо Михаил:) Код "завернут" в <noindex> - он вроде бы как уже не воспринимается не Яшей не Гуглом?
Krasnagor, я так понимаю, что это скрипт, зачем его индексировать =)
Блин жалко что нет рекламы - я б потыкала 🙂
у вас интересно и полезно
Лена, на всякий случай пусть будет завернут 🙂
RE:актив, значит, где-то ошибка. Проверьте еще раз, код брал рабочий с этого блога.
Спасибо вам Михаил за отличный пост и урок. Сегодня целый день разбирался как вы это все сделали и вот сейчас все сделал.
Отлично, спасибо.
Кстати, квадратная иконка Контакта есть на их сайте
Спасибо передал для себя под адсманаджер под джумлу
Вот вопрос :
<?php bloginfo('template_url'); ?>
что сие код делает?
После прочтения поста загорелся идеей поставить себе такое чудо...
Но пошел другим путем, взял готовый плагин добавления в закладки (тот, который мне проще было поковырять с моим слабым знанием php) и добавил в него бобра, мемори, контак, майл, жж и русского мистера вонга.
Из огромных плюсов
- плагин умеет добавлять в другие закладки
- добявлять ссылки либо в пост, либо на везде либо как уму скажешь
- ставит ссылки в rss, что тоже не плохо
- не нужно каждый раз ковырять тему, активировал и забыл
С подпиской на блоги еще не заморачивался и не знаю стоит ли сие дело времени, ибо я не великий программист.
AlexSims, данный код возвращает путь (адрес) до папки с используемой темой. Например не надо писать полный адрес картинки, а достаточно <?php bloginfo('template_url'); ?>/images/1.gif
хорошая статья, замутил такую же штуку себе на сайт под Joomla, правда пришлось погемороиться с поиском переменных, но все завершилось удачно ))
пришлось правда отказаться от buzz, почему то он портил мне шаблон ((
как замучу второй блог себе, опубликую в него код кнопок
Благодарю за хорошую статью. Поменял себе полностью блок на новый. Правда немножко жалко старую иконку для твиттера, уж очень хороша была.
Здравствуйте, Михаил. Я - новичек в раскрутке сайтов.
Скажите, пожалуйста, как вставить кнопки в шаблон сайтов ДЛЕ?
Михаил, спасибо конечно большое, но если ни в single.php ни в index.php) нету строчки
<?php the_content(''); ?>
то что делать?вставлял в разные места, но или выше поста или ниже поста, а не так как хочется...
Вот спасибо, так спасибо!
Отличный пост, полезная функция.
Пусть Ее Величество Вдохновение не забывает дорогу к Вам!
Спасибо, Михаил!
Взял идейку у Вас. Конечно, кнопочки свои нарисовал, подходящие под дизайн, в общем, теперь красота... )))
Правда, один нюанс! У Вас кнопка "Buzz this" ведёт на добавление в ридер, для себя я изменил адрес на правильный google.com/buzz/post?url=
А у Вас почему-то google.com/reader/link?url=
Спасибо за очень толковую статью. Себя отношу к чайникам, но поставить кнопки, после изучения данной статьи смог. И все, что интересно, работает!
Спасибо большое за кнопки и за разжеванную статью )) Даже я осилила! 🙂 Еще бы хотелось кнопочку и код на Я.ру 😉
Большое спасибо за полезные практичные статьи. Давно читаю Ваш блог и многое применяю из того, что Вы пишите. Причем понятным языком, без заумных слов, но про сложные темы. Желаю успехов! Ждем новые интересные статьи!
Помогите сделать такие кнопки и для блогспот
Ольга, Jade, Инна, по блогспоту, DLE и Я.ру надо будет подумать.
Светлана, спасибо за добрые слова!
Gnuser, оба варианта работают, можно использовать любой.
SPaWN, странно. А что у Вас вместо этого кода?
Михаил, спасибо большое, но если ни в single.php ни в index.php) нету строчки
<?php the_content(''); ?>
то что делать? У меня ВордПресс.
Алярма! Подскажите как вставить в Drupal?
(на офф пожалуйста не посылайте, там сообщество какое то забитое - ничего не вытянешь.. 🙁 )
а как поставить эти кнопочки на самописный сайт?
Спасибо большое.
Только на блогспот бы еще вставить и кнопочку Мир тесен!
Еще раз благодарю!
AmiGator , будь добр подскажи как joomla сделать, какие переменные ставить
Спасибо Михайл! сделал, все арбайтн!
один вопрос. как можно без плагина с помощью кодинга выводить похожие статьи в конце поста?
если у Вас на блоге где-то это было описано киньте ссыль пожалуйста, ато искал но не нашел=(
Хочу обратиться к автору статьи:
Скажите, а как разместить кнопки "retweet" и "buzz this",которые в начале статьи, так, чтобы они были, как у Вас - горизонтально, одна под другой?
Отличный мануал для новичков, но и для профи отпала нужда лазить по всем соц. сервисам и ирать коды. Я, кстатии, написал плагин для добавления таких вот кнопок, кому интересно, тут можно скачать comphobby.ru/2010/08/05/185/
Спасибо большое, но пришлось чутка доработать, чтобы кнопки получились универсальные.
<a rel="nofollow" href="https://vkontakte.ru/" onclick="window.open('https://vkontakte.ru/share.php?url='+(location.href)+' ');return false;" title="Поделиться ВКонтакте">
<img src="свой адрес/images/vkontakte.gif" width="84" height="18" title="Поделиться ВКонтакте"></a>
Все остальные по аналогии.
Большое спасибо за урок!
Долго мучалась (наверно, руки кривые), но у меня всё получилось!
Михаил Оч полезно, но нехватает архива с набором кнопочек
Спаисибо.
Воспользовался вашими картинками для своего блога 🙂
Михаил, себе я тоже установил, все работает, за что Вам большое человеческое спасибо! Возник один вопрос: Возможно ли добавить к этому набору кнопку добавления в маил блог? Как это реализовать?
Спасибо большое заранее!
Вопрос по кнопке добавления в твиттер, которая находится у Вас в начале поста: Она тоже сделана ручками, или это какой-то плагин Вордпрес? Хочу себе такую же. Если плагин - скиньте название или ссылку на него пожалуйста.
Скажите, а как добавить кнопки без PHP ? ...сайты на юкозе
Спасибо Вам за Ваш труд.
Я воспользовался советом и всё получилось.
Только вот одно но... У меня проблема схожая с
(4. garryson 28 апреля 2010 в 5:07 pm).
Только в моём случае при добавление поста на соц.сервисы вообще нет описания поста...
Как мне быть? Что изменить? Что я пропустил?
За ранее благодарен!
Супер. Спасибо за наводку.У меня раньше крутился плагин, который выводил кнопки на постинг в закладках - но что то толку от него не было. Вчера нашел этот материал - прикрутил к своей странице - и как итог - 18 переходов во вконтакт и 6 переходов в мой мир. Вроде как мало. НО! Переходов на мой блог с вконтакта больше 200, с моего мира больше 50! И это меньше чем за 8 часов - вчера ночью это делал... посмотрю статистику за сутки, уверен что будет больше.
Тем более что на моем блоге veselaya-karusel.ru как раз та категория посетителей, которые и живут в социалках.
щё раз спасибо!
А как добавть кнопку "добавить в одноклассники" ?
Вот уж истинный талант! Читаю статью, зевнула так смачно, во весь рот, и натыкаюсь на фразу: "По кусочкам код каждой кнопки давать не буду, а то вижу, что некоторые из вас начинают зевать и скучать . "
Вот на сколько человек тонко чувствует аудиторию))
В кодах кнопок, тег noindex не валиден, это мелочь, но лучше все-таки делать ноуиндекс валидным.
<!--noindex-->код<!--/noindex-->
А как добавить эти кнопки в Joomla? искал в инете, ничего вразумительного. Только нашел плагин, а он добавляет сразу на все страницы. если кто знает напишите плиз!
Давно не мог разобраться с картинками, все текстом делал.
Спасибо огромное.
Но вот какой вопрос возник, ссылка добавляется как ссылка, а можно сделать так чтобы она была текстовой?
Мне кажется, что если добавлять текстовую ссылку, то она будет более интересно смотреться на страничке.
Только что забацал себе твои кнопочки. Класс.
Я пользуюсь Гугл + , You Tube , Фейсбук, и Мел ру и Твиттер, хочу на Ю-Тюбе устроить расширение кнопка + , что бы переносить видиоролики музыкальные на другие сайты