Кнопки соціальних мереж: частина друга

Автор:

Юрій Миронов

Експерт з пошукової оптимізації та просування сайтів


Теги: , ,

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

Як виглядають такі кнопки - дивіться у кінці цієї статті, можете також попробувати на них понатискати 🙂

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

В контакті: "Мені подобається, Це цікаво"

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

підключення до API

У формі оберете тип "Веб-сайт", вкажете адресу та назву сайту і натиснете на кнопку "Підключити сайт". В результаті Ви отримаєте API-код (або ID додатку). Не забудьте натиснути кнопку "Зберегти зміни".

Read also:   Основи пошукової оптимізації фотоблогу

Після цього переходьте сюди 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>

Кнопка буде виглядати приблизно так:

Read also:   Деякі особливості просування груп у соціальних мережах

Про інші варіанти відображення читайте у розділі "Розробникам" на самих Однокласниках.

Twitter: "Tweet"

Твіттер - як же без нього 🙂 Зовнішній вигляд кнопки та код можна вибрати на сторінці для розробників 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>

або отримати тут, якщо потрібен інший варіант відображення цієї кнопки. Кнопка одразу ж буде працювати на будь-якому сайті.

Read also:   WebArtex - біржа статей та рекламних постів у соцмережах

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


1 Comment on "Кнопки соціальних мереж: частина друга"

  1. Дякую, кнопки однокласників і mail.ru не мав. Поставлю собі. 🙂

Leave a Reply to Taras Cancel reply

Your email address will not be published.


*