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

кнопки соціальних мереж

Сьогодні я розповім, як розмістити у себе на блозі кнопки різноманітних соціальних мереж. Такі кнопки дають блогам ряд важливих переваг - по-перше, це зручність для відвідувачів, котрі з легкістю можуть зберігати цікаву для них інформацію, по-друге, власники блогів отримують додатковий, причому цільовий трафік на свій ресурс.

Сьогоднішня розповідь буде побудована по наступному плану:

    1. Готові скрипти та сервіси.
    2. Плагіни для WordPress.
    3. Самостійне встановлення соціальних кнопок.

1. Готові скрипти та сервіси

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

Налаштувати зовнішній вигляд та отримати код для свого сайту можна за цією адресою.

Ще один досить давній сервіс - "Одна кнопка". На Ваш вибір тут всього три готові варіанти дизайну кнопок, причому набір кнопок змінити не можна. Панель з кнопками може виглядати таким чином:

Обрати для себе варіант панельки можна тут: http://odnaknopka.ru/get/.

Рухаємось далі. Є досить популярний сервіс "Add This", який теж надає чимало соціальних кнопок. Тут уже більше варіантів дизайну, кількості сервісів, які підтримуються, та більш гнучкі налаштування. Панель із кнопками може виглядати скажімо так:

Якщо Вам сподобався такий варіант - переходьте по ссилці www.addthis.com, реєструйтесь та вставляйте код у шаблон свого блогу.

2. Плагіни для WordPress

Один із плагінів, який мені найбільше сподобався - SexyBookmarks. Встановивши даний плагін, Ви отримаєте можливість вибору серед майже сотні соціальних кнопок (на момент написання статті я нарахував їх 87).

В результаті Ви отримаєте у себе на блозі панельку із кнопками соціальних сервісів, яка при наведенні миші буде розсуватись і утворювати ще більшу панельку (див. рисунок):

плагін SexyBookmarks

Завантажити плагін SexyBookmarks можна отут: http://wordpress.org/extend/plugins/sexybookmarks/.

Ще один непоганий плагін для WordPress - Digg Digg. Він також дозволяє відображати кнопки різноманітних соціальних сервісів, правда список тут, у порівнянні з попереднім, дещо скромніший. Разом з тим, плагін Digg Digg дозволяє виводити кнопки з лічильниками, обирати різноманітні варіанти дизайну та розміщення кнопок (один із прикладів - на малюнку нижче).

панель кнопок Digg Digg

Завантажити плагін Digg Digg можна звідси: http://wordpress.org/extend/plugins/digg-digg/

Непогані плагіни, але жоден з них я використовувати не став. Все-таки надаю перевагу писати код вручну, коли є така можливість, так як кожен лишній плагін створює додаткове навантаження на хостинг та уповільнює завантаження блогу.

3. Самостійне встановлення соціальних кнопок

Третя частина сьогоднішньої статті присвячена самостійному написанню кодів соціальних кнопок під блог на WordPress. Якщо Ви використаєте усі наведені нижче коди, то отримаєте панельку, яка виглядатиме якось так:

Де її розміщати - Ваша справа. Хтось її ставить у сайдбар, хтось в кінці статті, а хтось у меню сайту ліпить. Ставте, там де зручніше буде відвідувачам сайту на ці кнопки натискати, і де по дизайну краще виглядає.

Для того, щоб встановити собі на блог такі кнопки, перш за все завантажте собі на комп'ютер (з панельки вище) зображення самих кнопок, а потім вивантажте їх у якусь папку на сервері. Адресу цієї папки будете підставляти у наведені нижче коди.

В Контакті:

<a href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" title="поділитися Vkontakte" target="_blank"><img src="папка_із_зображеннями/vk.png"></a>

Facebook:

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" title="поділитися у Facebook" target="_blank"><img src="папка_із_зображеннями/fb.png"></a>

Однокласники:

<a href="<?php the_permalink(); ?>" onclick="ODKL.Share(this);return false;" title="поділитися в Однокласниках" target="_blank"><img src="папка_із_зображеннями/ok.png"></a>

Якщо будете ставити кнопку Однокласників, додатково потрібно у верхній частині коду сайту, між тегами <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 href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>" title="Поділитись в Моєму Світі" target="_blank" ><img src="папка_із_зображеннями/moymir.png" ></a>

Twitter:

<a href="http://twitter.com/home?status=<?php the_title() ?> <?php the_permalink(); ?>" title="додати в Twitter" target="_blank"><img src="папка_із_зображеннями/twi.png"></a>

FriendFeed:

<a href="http://www.friendfeed.com/share?title=<?php the_title(); ?> <?php the_permalink(); ?>" title="додати у FriendFeed" target="_blank"><img src="папка_із_зображеннями/ff.png"></a>

LiveJournal:

<a href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" title="опублікувати в LiveJournal" target="_blank"><img src="папка_із_зображеннями/lj.png"></a>

Ya.ru:

<a href="http://my.ya.ru/posts_add_link.xml?title=<?php the_title(); ?>&URL=<?php the_permalink(); ?>" title="додати на Я.ру" target="_blank"><img src="папка_із_зображеннями/ya.png"></a>

Обирайте коди тих соціальних сервісів, які бажаєте, і встановлюйте їх у такій послідовності, як захочете. Також при потребі можете поміняти і зображення самих кнопок - тут все у Ваших руках.

У наступному пості я ще напишу про популярні останнім часом кнопки "Мені подобається", "Поділитися", "Рекомендую", "Клас!" і т.п.

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