Как поставить кнопку Нравится (Mail.ru, Vkontakte), Лайк (Facebook), Класс (Одноклассники), Retweet (Твиттер) ~ Блог Дмитрия Шахова (Баблоруба): про SEO и не только

пятница, 1 апреля 2011 г.

Как поставить кнопку Нравится (Mail.ru, Vkontakte), Лайк (Facebook), Класс (Одноклассники), Retweet (Твиттер)

Дает ли это траффик? Не знаю, как с одноклассников и майла, но с твиттера и контакта траффик идет. С фейсбука меньше, но тоже есть. А поскольку интернет быстро и активно социализируется, то возникает вопрос, как воткнуть все эти кнопки себе на сайт.

За пример берем сайт paranepara.ru. На нем установлены все пять кнопок. Для установки 4 из них никаких лишних телодвижений совершать не нужно. Для вконтактовской кнопки вам понадобится регистрация в этой сети.

Начнем с простого.

1) I like от Фейсбук (Facebook.com).

Официальный мануал и конструктор тут. Но он нам нафиг не нужен. Берем код

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmysite.ru&layout=button_count&show_faces=false&width=200&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px;" allowTransparency="true"></iframe>

И меняем в нем mysite.ru на ваш урл. Кнопка готова. Если вам нужен другой вид кнопки - воспользуйтесь конструктором по ссылке выше.

2) Нравится от Майл.ру (Мой мир, Mail.ru).

Официальный мануал и конструктор тут. Но он опять нам не нужен. Берем код

<a target="_blank" class="mrc__plugin_like_button" href="http://connect.mail.ru/share?share_url=http%3A%2F%2Fmysite.ru" data-mrc-config="{'type' : 'button', 'width' : '150'}">Нравится</a>
<script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script>

И опять меняем mysite.ru на нужный нам урл.

3) Retweet от Твиттера (Twitter.com)

Тут лучше всего пользоваться сервисом tweetme.com, чем oфициальной кнопкой. Процесс установки описан тут. Но опять же ничего мы по ссылке смотреть не будем, а скопируем код ниже

<script type="text/javascript">tweetmeme_style = 'compact'; tweetmeme_url = 'http://mysite.ru';</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

И снова меняем mysite.ru на свой урл.

4) Класс! от Одноклассников (Odnoklassniki.ru)

Официальное руководство тут. Но оно нам не потребуется, хотя сам процесс несколько сложнее. Сначала между тэгами <head>...</head> надо вставить вот этот код

<link href="http://stg.odnoklassniki.ru/share/odkl_share.css" rel="stylesheet">
<script src="http://stg.odnoklassniki.ru/share/odkl_share.js" type="text/javascript" ></script>

а потом в нужном вам месте уже саму кнопку

<a class="odkl-klass-stat" href="http://mysite.ru/" onclick="ODKL.Share(this);return false;" ><span>0</span></a>

И снова меняем mysite.ru на наш урл. Не забываем добавить в тэг BODY атрибут onload="ODKL.init();"

5) Мне нравится или Одобряю от Вконтакте (Vkontakte.ru)

Здесь самый сложный алгоритм. Все сайты надо регистрировать в самом контакте. Так что авторизуемся в контактике и переходим на страницу виджетов. Тут выбираем "Подключить новый сайт" и добавляем свой сайт. После этого, кнопка ниже будет уже создаваться с вашим кодом API, который нам важен. Чтобы быть уверенным, что все ок, нажмите после создания сайта F5 - у меня был случай, когда код API сгенерился не сразу, а только с перегрузкой страницы.

Подбираем переключателями кнопку и дальше переносим код из поля себе на сайт. Между тэгами <head>...</head> вставляем первые две части кода

<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?23"></script>

<script type="text/javascript">
VK.init({apiId: ТУТ-ВАШ-НОМЕР, onlyWidgets: true});
</script>

Саму кнопку вставляете там, где она вам нужна

<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script>

И в этом коде ничего менять не надо - вконтактик будет брать сайт из своей базы.

Собственно все. Остается один момент для тех, у кого блогспотовский блог и он задается вопросом, как я врезал тэги в текст статьи: вставить HTML-код можно, конвертируя его в этом сервисе.

После установки попросите ваших друзей пролайкать ваши кнопки, чтобы были ненулевые значения. Приятная часть в том, что кнопки майла, фейсбука и ретвита сами подхватят старые лайки, если они были кем-то сделаны по доброй воле до установки кнопок на сайте. У "класса" и вконтакта такого эффекта не обнаружено. Больше всего траффика с кнопочных ссылок идет с вконтакта. На втором месте твиттер, на третьем - фейсбук. В количественном плане быстрее всего набираются лайки фейсбука, потом ретвиты и затем только вконтакт.

Удачной вам социализации своих сайтов!

Совсем забыл про новую возможность в блоггер.ком. Наберите адрес этого блога так: http://bablorub.blogspot.com/view/ Перебирать варианты отображения - с помощью селекта вверху справа. Дальше без комментариев. Я минут пятнадцать игрался. Это теперь работает для всех блогспотовских блогов.

---------------------------------
Подпишись на обновления в блоге одним кликом! Читать на твиттере! :: Реклама в блоге

Раздел: новичкам,сео

Блог Дмитрия Шахова

пятница, 1 апреля 2011 г.

Как поставить кнопку Нравится (Mail.ru, Vkontakte), Лайк (Facebook), Класс (Одноклассники), Retweet (Твиттер)

61 коммент.:

Отправить комментарий

Популярные сообщения

Ярлыки

Архив блога

Советую ознакомиться

Мои книги

Всякий мусор

пятница, 1 апреля 2011 г.