Останнім часом стало модним ставити на блоги кнопки "Подобається", "Поділитись", "Клас!", "Рекомендую" і т.п. Такі кнопки мають певну перевагу над іншими кнопками із логотипами соціальних мереж, описаними у попередньому пості, вони дозволяють також оцінити ставлення відвідувачів Вашого блогу до того, що Ви пишете. Якщо є багато "подобається" - значить інформація потрібна і корисна людям, значить є заради чого працювати.
Як виглядають такі кнопки - дивіться у кінці цієї статті, можете також попробувати на них понатискати 🙂
Тепер про встановлення таких кнопок. Я опишу, як встановити такі кнопки, як у мене на блозі. Але їх зовнішній вигляд чи написи на кнопках можуть бути й іншими - обрати варіант для себе можна буде на сайтах самих соціальних мереж у розділах "Розробникам".
В контакті: "Мені подобається, Це цікаво"
Для того, щоб дана кнопка коректно відображалася на сайті, спочатку необхідно підключити сайт до системи "В контакті" та отримати 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: "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>
або отримати тут, якщо потрібен інший варіант відображення цієї кнопки. Кнопка одразу ж буде працювати на будь-якому сайті.
Ось і все. Вибирайте кнопки, які припали Вам до душі - і соціалізуйтесь!
Дякую, кнопки однокласників і mail.ru не мав. Поставлю собі. 🙂