Кнопки социальных сетей: часть вторая

Мне нравится

В последнее время стало модным ставить на блоги кнопки "Нравится", "Поделиться", "Класс!", "Рекомендую" и т.п. Такие кнопки имеют определенное преимущество над другими кнопками с логотипами социальных сетей, описанными в предыдущем посте, они позволяют также оценить отношение посетителей Вашего блога к тому, что Вы пишете. Если есть много "нравится" - значит информация нужна и полезна людям, значит есть ради чего работать.

Как выглядят такие кнопки - смотрите в конце этой статьи, можете также попробовать на них понажимать 🙂

Теперь об установке таких кнопок. Я опишу, как установить такие кнопки, как у меня на блоге. Но их внешний вид или названия кнопок могут быть и другими - выбрать вариант для себя можно будет на сайтах самих социальных сетей в разделах "Разработчикам".

В контакте: "Мне нравится, это интересно"

Чтобы данная кнопка корректно отображалась на сайте, сначала необходимо подключить сайт к системе "В контакте" и получить API-код. Это можно сделать здесь: http://vkontakte.ru/editapp?act=create&site=1.

подключение к API

В форме выберите тип "Сайт", укажите адрес и название сайта и нажать на кнопку "Подключить сайт". В результате Вы получите 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(); ?>&amp;layout=button_count&amp;show_faces=true&amp;width=200&amp;height=21&amp;action=like&amp;font=arial&amp;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>

или получить здесь, если нужен другой вариант отображения этой кнопки. Кнопка тут же будет работать на любом сайте.

Вот и все. Выбирайте кнопки, которые пришлись Вам по душе - и социализируйтесь!

Коментарі тимчасово вимкнені / Комментарии временно отключены