В последнее время стало модным ставить на блоги кнопки "Нравится", "Поделиться", "Класс!", "Рекомендую" и т.п. Такие кнопки имеют определенное преимущество над другими кнопками с логотипами социальных сетей, описанными в предыдущем посте, они позволяют также оценить отношение посетителей Вашего блога к тому, что Вы пишете. Если есть много "нравится" - значит информация нужна и полезна людям, значит есть ради чего работать.
Как выглядят такие кнопки - смотрите в конце этой статьи, можете также попробовать на них понажимать 🙂
Теперь об установке таких кнопок. Я опишу, как установить такие кнопки, как у меня на блоге. Но их внешний вид или названия кнопок могут быть и другими - выбрать вариант для себя можно будет на сайтах самих социальных сетей в разделах "Разработчикам".
В контакте: "Мне нравится, это интересно"
Чтобы данная кнопка корректно отображалась на сайте, сначала необходимо подключить сайт к системе "В контакте" и получить API-код. Это можно сделать здесь: http://vkontakte.ru/editapp?act=create&site=1.
В форме выберите тип "Сайт", укажите адрес и название сайта и нажать на кнопку "Подключить сайт". В результате Вы получите API-код (или ID приложении). Не забудьте нажать кнопку "Сохранить изменения".
После этого переходите сюда http://vkontakte.ru/developers.php#devstep2 (далее подраздел "Для сайтов", пункт "Like"), выбирайте тип кнопки и сайт, на котором она будет отображаться (он должен быть в выпадающем списке) и получите в результате код, который нужно установить у себя на сайте. Данный код будет работать на любом сайте, даже на статическом.
Код будет состоять из 2-х частей - первую нужно разместить в верхней части кода сайта между тегами <head> и </head>:
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?26"></script>
<script type="text/javascript">
VK.init({apiId: Ваш API код, onlyWidgets: true});
</script>
вторую - в нужном месте шаблона, например в файле single.php:
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script>
Facebook: "Нравится, Рекомендую"
Здесь немного проще - по ссылке http://developers.facebook.com/docs/reference/plugins/like/, выбираете вариант оформления кнопки и система сгенерирует Вам код, который нужно вставить в шаблон блога. Все возможные опции описывать не буду, поскольку на сайте сразу видно, как будет выглядеть кнопка.
Можете также воспользоваться моим кодом (он будет работать только на WordPress и кнопка будет такая, как у меня на блоге в конце статьи):
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&layout=button_count&show_faces=true&width=200&height=21&action=like&font=arial&colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px" allowTransparency="true"></iframe>
Одноклассники: "Поделиться, Класс!"
Здесь есть несколько частей кода - первую вставляете в хедере сайта где-то между тегами <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>
далее добавляете код код onload="ODKL.init();" в тег <body> и наконец вставляете еще один код в шаблон вашего блога в месте, где должна отображаться кнопка:
<a class="odkl-klass-stat" href="<?php the_permalink(); ?>" onclick="ODKL.Share(this);return false;" ><span>0</span></a>
Кнопка будет выглядеть примерно так: 
О других вариантах отображения читайте в разделе "Разработчикам" на самих Одноклассниках.
Twitter: "Твитнуть"
Твиттер - как же без него 🙂 Внешний вид кнопки и код можно выбрать на странице для разработчиков http://twitter.com/about/resources/tweetbutton или можете воспользоваться этим (тогда кнопка будет точно такой, как на данном блоге в конце статьи):
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="Ваш_ник_в_Твиттере">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Разве что не забудьте прописать в этом коде Ваш ник в Твиттере.
Данный код будет работать на любом сайте.
Мой мир: "Нравится, Поделиться, Рекомендую"
И еще, если хотите, можете также установить кнопку социальной сети "Мой мир". Эта сеть не так популярна, как другие, по крайней мере на Украине, но если работаете в Рунете, возможно она вам понадобится.
Выглядеть кнопка может например вот так:
Установить эту кнопку очень просто - достаточно в нужном месте шаблона установить ее код, который можно скопировать ниже:
<a target="_blank" class="mrc__plugin_like_button" href="http://connect.mail.ru/share" 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>
или получить здесь, если нужен другой вариант отображения этой кнопки. Кнопка тут же будет работать на любом сайте.
Вот и все. Выбирайте кнопки, которые пришлись Вам по душе - и социализируйтесь!
Be the first to comment on "Кнопки социальных сетей: часть вторая"