This page has been robot translated, sorry for typos if any. Original content here.

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

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

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

Якщо Вам часто доводиться відвідувати різні сайти і блоги Інтернету, а так воно швидше за все і є, то може бути звертали увагу на кнопки з назвами або символами сайтів соціальних мереж. Таких, як Twitter, Facebook, Freandfeed, LiveJournal, В контакті багатьох інших - ось такі:

Twitter, Facebook, Freandfeed, LiveJournal

або такі

Twitter, Facebook, Freandfeed, LiveJournal

Загалом, вони можуть бути настільки різними, наскільки вистачає фантазії їх авторам. Навіщо вони потрібні. Потрібні соціальні кнопки як Вам, тобто господареві сайту, так і відвідувачам, які прийшли на Ваш сайт.

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

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

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

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

кнопка Vkontakte.ru

http://vkontakte.ru/developers.php?o=-1&p=Share

Розмістивши під статтями Вашого видання або блогу кнопку "Опублікувати ВКонтакте", Ви дозволите 70 мільйонам користувачів ВКонтакте швидко ділитися посиланнями на Ваші матеріали зі своїми друзями.

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

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

Приклад кнопки Вконтакте:

Новий варіант (скрипт js і можна спокійно копіювати до себе на сайт): <script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?11" charset="windows-1251"></script>
<script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "round", text: "Сохранить"}));
--></script>
<script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?11" charset="windows-1251"></script>
<script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "round", text: "Сохранить"}));
--></script>
Старий варіант (картинку можна спокійно скопіювати на сайт і викликати її без затримок): <a rel="nofollow" title="Поделиться ВКонтакте" target="_blank" href="http://vkontakte.ru/share.php?url={адрес страницы}" ><img src="/вашсайт/images/кнопкаВконтакте.jpg" alt="Добавить в ВКонтакте"></a> Wordpress варіант (якщо ви використовуєте GA.js): <a href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" onmouseup="javascript: pageTracker._trackPageview('/vkontakte-post');">
<img src="<?php bloginfo('template_url'); ?>/images/vkontakte.jpg" width="84" height="18" title="Поделиться ВКонтакте"></a>
<a href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" onmouseup="javascript: pageTracker._trackPageview('/vkontakte-post');">
<img src="<?php bloginfo('template_url'); ?>/images/vkontakte.jpg" width="84" height="18" title="Поделиться ВКонтакте"></a>
Wordpress варіант (якщо ви використовуєте Асинхронний код GA): <a href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" onmouseup="javascript:_gaq.push(['_trackPageview','/vkontakte-post']);">
<img src="<?php bloginfo('template_url'); ?>/images/vkontakte.jpg" width="84" height="18" title="Поделиться ВКонтакте">
</a>
<a href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" onmouseup="javascript:_gaq.push(['_trackPageview','/vkontakte-post']);">
<img src="<?php bloginfo('template_url'); ?>/images/vkontakte.jpg" width="84" height="18" title="Поделиться ВКонтакте">
</a>

Для сайтів без підтримки JavaScript

Якщо Ви не можете виконувати JavaScript-сценарії на Вашому сайті, наприклад Ваша блог-платформа не підтримує цієї функціональності, Ви можете розміщувати пряме посилання для публікації ВКонтакте. Це посилання має такий вигляд:

http://vkontakte.ru/share.php?url={адрес страницы}

Код для її розміщення може виглядати так:

<a href="http://vkontakte.ru/share.php?url=http://mysite.com" target="_blank">Поделиться ВКонтакте</a>

кнопка FaceBook.com

http://developers.facebook.com/docs/reference/plugins/like/

Як кнопка дозволяє користувачеві поділитися контентом з друзями на Facebook. Коли користувач натискає кнопку Як на вашому сайті, історія з'являється в друзі користувача Стрічка новин з посиланням на ваш сайт.

Якщо ваш веб-сторінка являє реальні особи, речі, як кіно, спортивних команд, знаменитостей, і ресторанів, що використовують протокол Open Graph вказати інформацію про об'єкт. Якщо ви включите Open Graph теги на веб-сторінці, ваша сторінка стає еквівалентної сторінка на Facebook. Це означає, що коли користувач натискає кнопку Як на вашій сторінці, з'єднання між вашою сторінки і користувачів. Ваша сторінка буде відображатися в "Любить і інтересів" розділу профілю користувача, і у вас є можливість публікувати оновлення для користувачів. Ваша сторінка буде відображатися в тих же місцях, що того, сторінки відображаються навколо об'єкта (наприклад, пошук), і ви можете орієнтувати оголошення на людей, які, як ваш контент.

Є два Як кнопку реалізації: XFBML і Iframe. Версія XFBML є більш універсальним, але вимагає використання JavaScript SDK. XFBML динамічно повторно розміри його висота в залежності від того Є профіль фотографії для відображення, дає вам можливість (через бібліотеку JavaScript) для прослуховування, як події так, що ви знаєте, в режимі реального часу, коли користувач натискає кнопку "Як, і це завжди дає користувачеві можливість додати додатковий коментар до тощо. Якщо користувачі роблять додати коментар, оповідання опубліковане назад того, дається більше уваги.

Приклад кнопки FaceBook:

Новий варіант (iframe): <iframe src="http://www.facebook.com/plugins/like.php?app_id=211602055536993&href&send=false&layout=button_count&width=110&show_faces=true&action=like&colorscheme=light&font=verdana&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe> <iframe src="http://www.facebook.com/plugins/like.php?app_id=211602055536993&href&send=false&layout=button_count&width=110&show_faces=true&action=like&colorscheme=light&font=verdana&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe> Новий варіант (XFBML): <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=211602055536993&xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="110" show_faces="true" font="verdana"></fb:like> Старий варіант (картинку можна спокійно скопіювати на сайт і викликати її без затримок): <a rel="nofollow" title="Поделиться ссылкой в FaceBook" target="_blank" href="http://www.facebook.com/sharer.php?u={адрес страницы}"><img src="/вашсайт/images/кнопкаФейсбук.jpg" alt="Поделиться ссылкой в FaceBook"></a> Wordpress варіант (якщо ви використовуєте Асинхронний код GA): <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" target="_blank" rel="nofollow" onmouseup="javascript:_gaq.push(['_trackPageview','/facebook-post']);"> <img src="<?php bloginfo('template_url'); ?>/images/facebook.jpg" width="84" height="18" title="Добавить в FaceBook"> </a>

атрибути:

  • HREF - URL любити. Версія XFBML за замовчуванням поточної сторінки.
  • SEND - вказує, чи слід вносити кнопку "Відправити" за допомогою кнопки Як. Це працює тільки з версією XFBML.
  • LAYOUT - Є три варіанти:
    • standard - відображає соціальні текст праворуч від кнопки і друзів фотографії в профіль нижче. Мінімальна ширина: 225 пікселів. Стандартна ширина: 450 пікселів. Висота: 35 пікселів (без фотографій) або 80 пікселів (з фотографіями).
    • button_count - відображає загальне число любить праворуч від кнопки. Мінімальна ширина: 90 пікселів. Стандартна ширина: 90 пікселів. Висота: 20 пікселів.
    • box_count - відображає загальне число любить над кнопкою. Мінімальна ширина: 55 пікселів. Стандартна ширина: 55 пікселів. Висота: 65 пікселів.
  • show_faces - вказує, чи слід відображати фотографії в профіль під кнопкою (стандартна розкладка тільки).
  • width - ширині Як кнопку
  • action - дієслово для відображення на кнопку. Функції: 'як', 'рекомендувати'
  • font - шрифт для відображення в кнопку. Функції: "Arial", "Lucida Grande", "Segoe UI ',' Tahoma ',' Trebuchet MS ',' Verdana '
  • colorscheme - колірну схему для як кнопки. Функції: "світло", "темний"
  • ref - ярлик для відстеження клієнтів; має бути менше 50 символів і може містити літери та цифри і деякі знаки пунктуації (в даний час + / = -.: _). реф атрибут призводить до розвитку двох параметрів, які будуть додані до реферер URL, коли користувач натискає посилання на потік розповідь про як дії:
    • fb_ref ​​- реф параметра
    • fb_source - потік типу ( 'будинок', 'Профіль', 'Пошук', 'інший'), в якому натисніть сталося, і історія типу ( 'oneline "або" багаторядковий), поєднані з підкреслення.

кнопка Odnoklassniki.ru

http://dev.odnoklassniki.ru/wiki/display/plugins/Social+Plugins

Кнопка «Клас!» Дозволяє відвідувачам вашого сайту висловити своє позитивне ставлення до розміщеному на сайті матеріалу (стаття, новина, відео ...) в одне натискання кнопки. Заголовок сторінки, що є прямим посиланням, разом з описом і фотографією потрапляють в Стрічку - тобто повідомлення про цю подію разом з посиланням бачать всі друзі цієї людини на Одноклассниках.

Кнопка «Поділитися», також працює в одне натискання, дозволяє відвідувачам вашого сайту розмістити в Стрічці на Однокласниках посилання на вподобаний ним матеріал, без особистої оцінки цього матеріалу.

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

Кнопка створює трафік на ваш сайт. Друзі користувача, що опублікував сторінку, побачать її в Стрічці і перейдуть по прямим посиланням. Більш того, якщо друзям стаття сподобалася, вони натиснуть на Однокласниках на лінк «Клас!», Розташований під записом про вашу статті в Стрічці. У цьому випадку стаття з'явиться в їх Стрічці, і, в свою чергу, їхні друзі побачать статтю. Таким чином, трафік на ваш сайт зростає ще більше

Приклад кнопки Вконтакте:

Кнопка «Клас!» (Без статистики):
1. В заголовок сторінки включити посилання на Javascript і CSS файли, що знаходяться на серверах Однокласників. <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>
<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>
2.1. Вставити HTML код кнопки у зручний для вас місце на сторінці. [Кнопка "Клас"] <div style="float: left;">
<a class="odkl-klass-oc" href="Замените на АБСОЛЮТНЫЙ адрес страницы" onclick="ODKL.Share(this);return false;" ><span>0</span></a>
</div>
<div style="float: left;">
<a class="odkl-klass-oc" href="Замените на АБСОЛЮТНЫЙ адрес страницы" onclick="ODKL.Share(this);return false;" ><span>0</span></a>
</div>
<div style="float: left;">
<a class="odkl-klass-oc" href="Замените на АБСОЛЮТНЫЙ адрес страницы" onclick="ODKL.Share(this);return false;" ><span>0</span></a>
</div>
2.2. Вставити HTML код кнопки у зручний для вас місце на сторінці. [Кнопка "Поділитися"] <div style="float: left;">
<a class="odkl-share-oc" href="Замените на АБСОЛЮТНЫЙ адрес страницы" onclick="ODKL.Share(this);return false;" ><span>0</span></a>
</div>
<div style="float: left;">
<a class="odkl-share-oc" href="Замените на АБСОЛЮТНЫЙ адрес страницы" onclick="ODKL.Share(this);return false;" ><span>0</span></a>
</div>
<div style="float: left;">
<a class="odkl-share-oc" href="Замените на АБСОЛЮТНЫЙ адрес страницы" onclick="ODKL.Share(this);return false;" ><span>0</span></a>
</div>
3. Після закінчення завантаження сторінки необхідно ОБОВ'ЯЗКОВО викликати ODKL.init (); , Наприклад: <body onload="ODKL.init();">

Для вказівки позиції кнопки на вашій сторінці використовуйте атрибут style елемента <div style = "float: left;">.

Зміни зовнішнього вигляду кнопок «Клас!» І «Поділитися», які працюють в одне натискання, не передбачені.

Кнопка «Клас!» (Зі статистикою):
1. В заголовок сторінки включити посилання на Javascript і CSS файли, що знаходяться на серверах Однокласників. <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>
<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>
2. Вставити HTML код кнопки у зручний для вас місце на сторінці. [Кнопка "Клас"] <a class="odkl-klass-stat" href="Абсолютный адрес страницы" onclick="ODKL.Share(this);return false;" ><span>0</span></a> <a class="odkl-klass-stat" href="Абсолютный адрес страницы" onclick="ODKL.Share(this);return false;" ><span>0</span></a>

Код цієї кнопки, на відміну від звичайної кнопки «Клас!», Модифікувати не можна, все, що знаходиться всередині <a> </a>, буде замінено.

Важливо зберегти оригінальне ім'я класу CSS, так як воно використовується як ознака кнопки.

3. Щоб з'явилася статистика, після закінчення завантаження сторінки необхідно ОБОВ'ЯЗКОВО викликати ODKL.init (); , Наприклад: <body onload="ODKL.init();">

Тема, опис та малюнок на сторінці визначаються автоматично.

Тема береться з тега <title>, опис з мета тега description.

У вас є можливість замінити картинку кнопки на іншу, більш зручну для вас. Для цього слід використовувати скрипт і CSS з наших серверів. Свою картинку можна отримати, перевизначивши два CSS правила на своєму боці:

<style type="text/css">
.odkl-klass, .odkl-klass:hover {background:none;}
.odkl-klass {background: url(http://www.ваш сайт/share/odkl.gif) no-repeat;}
</style>

Важливо зберегти оригінальне ім'я класу CSS, так як воно використовується як ознака кнопки.

кнопка Tweet.com

http://twitter.com/about/resources/tweetbutton

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

Приклад кнопки Tweet:

Кнопка додавання в Twitter: <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="{ваш id в системе}" data-lang="ru">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> Кнопка додавання в Twitter для Wordpress (якщо ви використовуєте GA.js): <a rel="nofollow" target="_blank" onmouseup="javascript: pageTracker._trackPageview('/twitter-post');" href="http://twitter.com/home?status=RT {линк на ваш сайт}<?php the_title(); ?>: <?php the_permalink(); ?>" title="Добавить в Twitter"><img src="<?php bloginfo('template_url'); ?>/twitter.jpg" alt="Опубликовать в twitter" width="85" height="20"></a> <a rel="nofollow" target="_blank" onmouseup="javascript: pageTracker._trackPageview('/twitter-post');" href="http://twitter.com/home?status=RT {линк на ваш сайт}<?php the_title(); ?>: <?php the_permalink(); ?>" title="Добавить в Twitter"><img src="<?php bloginfo('template_url'); ?>/twitter.jpg" alt="Опубликовать в twitter" width="85" height="20"></a>

У код посилання додається інструкція для Google analytics: onmouseup = "javascript: pageTracker._trackPageview ( '/ twitter-post');"

Записувати натискання на кнопку твіттера як перехід до сторінки / twitter-post

Кнопка додавання в Twitter для Wordpress (якщо ви використовуєте Асинхронний код GA): <a rel="nofollow" target="_blank" onmouseup="javascript:_gaq.push(['_trackPageview','/twitter-post']);" href="http://twitter.com/home?status=RT {линк на ваш сайт} <?php the_title(); ?>: <?php the_permalink(); ?>" title="Добавить в Twitter"><img src="<?php bloginfo('template_url'); ?>/twitter.jpg" alt="Опубликовать в twitter" width="85" height="20"></a> <a rel="nofollow" target="_blank" onmouseup="javascript:_gaq.push(['_trackPageview','/twitter-post']);" href="http://twitter.com/home?status=RT {линк на ваш сайт} <?php the_title(); ?>: <?php the_permalink(); ?>" title="Добавить в Twitter"><img src="<?php bloginfo('template_url'); ?>/twitter.jpg" alt="Опубликовать в twitter" width="85" height="20"></a>

Кнопка Мій Світ (mail.ru)

http://api.mail.ru/sites/plugins/share/

Кнопка «Подобається» дозволяє всім користувачам відзначати і показувати друзям цікаві сторінки. Опис сторінки разом з картинкою і прямим посиланням на неї потрапляє в стрічки новин «Що нового» всіх друзів поділився користувача.

Профіт сайту: трафік. Друзі поділився користувача переходять за посиланнями з «Що нового» на ваш сайт.

Приклад кнопки Мій Світ (mail.ru):

Кнопка додавання в Мій Світ: <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>
<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>

Ми запропонуємо користувачеві поділитися тією сторінкою, на якій розташована кнопка. Тому вказуйте URL тільки якщо кнопка розташовується на іншій сторінці, наприклад, на сторінці списку статей коли ви хочете щоб користувачі ділилися конкретними статтями.

Ширина плагіна по-замовчуванню вважається в пікселях. Але ви можете вказати, наприклад, 70% або 15em.

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

Кнопка додавання в Мій Світ для Wordpress (якщо ви використовуєте GA.js): <a href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" onmouseup="javascript: pageTracker._trackPageview('/moimir-post');"><img src="<?php bloginfo('template_url'); ?>/images/moimir.jpg" width="84" height="18" title="Добавить в Мой мир"></a>

У код посилання додається інструкція для Google analytics: onmouseup = "javascript: pageTracker._trackPageview ( '/ twitter-post');"

Записувати натискання на кнопку твіттера як перехід до сторінки / twitter-post

Кнопка додавання в Мій Світ для Wordpress (якщо ви використовуєте Асинхронний код GA): <a href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" onmouseup="javascript:_gaq.push(['_trackPageview','/moimir-post']);"><img src="<?php bloginfo('template_url'); ?>/images/moimir.jpg" width="84" height="18" title="Добавить в Мой мир"></a>

Кнопка Google Buzz

http://www.google.com/buzz/api/admin/configPostWidget

Допоможіть людям частка матеріал з вашого сайту в Google Buzz.

Профіт сайту: трафік. Друзі поділився користувача переходять за посиланнями зі служби на ваш сайт.

Приклад кнопки Google Buzz:

Кнопка додавання в Google Buzz: <a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
<a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
Кнопка додавання в Google Buzz для Wordpress (якщо ви використовуєте GA.js): <a href="http://www.google.com/reader/link?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&srcURL=http://blog.mokoron.com/" target="_blank" rel="nofollow" onmouseup="javascript: pageTracker._trackPageview('/buzz-post');"><img src="<?php bloginfo('template_url'); ?>/images/buzz.jpg" width="84" height="18" title="Добавить в Google Buzz"></a>

У код посилання додається інструкція для Google analytics: onmouseup = "javascript: pageTracker._trackPageview ( '/ twitter-post');"

Записувати натискання на кнопку твіттера як перехід до сторінки / twitter-post

Кнопка додавання в Google Buzz для Wordpress (якщо ви використовуєте Асинхронний код GA): <a href="http://www.google.com/reader/link?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&srcURL=http://blog.mokoron.com/" target="_blank" rel="nofollow" onmouseup="javascript:_gaq.push(['_trackPageview','/buzz-post']);"><img src="<?php bloginfo('template_url'); ?>/images/buzz.jpg" width="84" height="18" title="Добавить в Google Buzz"></a>

кнопка LiveJournal

Допоможіть людям частка матеріал з вашого сайту в LiveJournal.

Профіт сайту: трафік. Друзі поділився користувача переходять за посиланнями зі служби на ваш сайт.

Так склалося, що у ЖЖ немає офіційної Share Button, з цього, що б користувачі могли публікувати посилання на вашу статтю у себе, є кілька способів.

Приклад кнопки LiveJournal:

Кнопка додавання в LiveJournal: <a rel="nofollow" target="_blank" href="http://www.livejournal.com/update.bml?event=URL_СТРАНИЦЫ&subject=ЗАГОЛОВОК">
<img src="ПУТЬ_ИКОНКИ" width="48" height="48" title="Поделиться в Livejournal" alt="Поделиться в Livejournal" />
</a>
<a rel="nofollow" target="_blank" href="http://www.livejournal.com/update.bml?event=URL_СТРАНИЦЫ&subject=ЗАГОЛОВОК">
<img src="ПУТЬ_ИКОНКИ" width="48" height="48" title="Поделиться в Livejournal" alt="Поделиться в Livejournal" />
</a>
Кнопка додавання в LiveJournal для Wordpress (якщо ви використовуєте GA.js): <a href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" target="_blank" rel="nofollow" onmouseup="javascript: pageTracker._trackPageview('/lj-post');"><img src="<?php bloginfo('template_url'); ?>/images/lj.jpg" width="84" height="18" title="Опубликовать в жж"></a>

У код посилання додається інструкція для Google analytics: onmouseup = "javascript: pageTracker._trackPageview ( '/ twitter-post');"

Записувати натискання на кнопку твіттера як перехід до сторінки / twitter-post

Кнопка додавання в LiveJournal для Wordpress (якщо ви використовуєте Асинхронний код GA): <a href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" target="_blank" rel="nofollow" onmouseup="javascript:_gaq.push(['_trackPageview','/lj-post']);"><img src="<?php bloginfo('template_url'); ?>/images/lj.jpg" width="84" height="18" title="Опубликовать в жж">

кнопка FriendFeed

Допоможіть людям частка матеріал з вашого сайту в FriendFeed.

Профіт сайту: трафік. Друзі поділився користувача переходять за посиланнями зі служби на ваш сайт.

У соціальній мережі FriendFeed, немає кнопки поділитися посиланням, але є 2 способи поділитися посиланням: JavaScript-закладка (яка по суті є скриптом) і посилання - FriendFeed share button.

Приклад кнопки FriendFeed:

JavaScript-закладка додавання в FriendFeed:

  1. Користувач розміщує JavaScript-закладку в своєму браузері
  2. На сподобалася сторінці користувач натискає на закладку
  3. Подгружается скрипт FriendFeed
  4. З'являється віконце з текстом і кнопкою розмістити «у моєму каналі»

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

FriendFeed share button додавання в FriendFeed:

У FriendFeed можна перейти за посиланням з певними GET-параметрами і дані в формі будуть заповнені автоматично.

Формат посилання: http://friendfeed.com/?url=АДРЕС_СТРАНИЦЫ&title=ЗАГОЛОВОК

Параметри: url - адреса сторінки. і title - заголовок.

<a href="http://friendfeed.com/?url={линк на ваш сайт}" style="text-decoration:none;"><img src="http://www.shram.kiev.ua/img/talk/share/friendfeed.gif" alt="FriendFeed Share Button" align="middle" border="0"><ins>поделиться ссылкой</ins></a>

Кнопка Google +1

http://www.google.com/webmasters/+1/button/index.html

Що дає кнопка Google +1? Наприклад, відвідувачам вашого сайту сподобалася яка-небудь стаття (новина, сторінка товару, послуги і т.д.). Якщо ви завбачливо додасте кнопку Google +1 на сторінки свого сайту, то відвідувачі зможуть клікнути по ній на сподобалася сторінці.

Що відбувається далі? А далі друзі ваших читачів в результатах пошуку Google будуть бачити, хто вже поділився будь-якої сторінкою. Крім цього, ви зможете бачити позначки про сторінки, за які ви самі голосували, тобто буде простіше шукати потрібну інформацію.

Тобто суть кнопки Google +1 така ж, як і інших соціальних кнопок - допомагати користувачам поширювати вподобану їм інформацію.

Отже, приступимо. За кодом кнопки йдемо на цю сторінку . Там вибираємо потрібну мову і бажаний розмір кнопки:

Кнопка Google +1

Повідомлення про те, що «Рекомендації +1 в даний час доступні лише англійською мовою (США) в домені Google.com» нас не бентежить - найближчим часом все буде доступно на всіх мовах.

Наведу таблицю з розмірами кнопки Гугл Плюс Один:

Кнопка Google +1

Якщо необхідно, розкриваємо розширені настройки кнопки Google +1, щоб, наприклад, прибрати лічильник:

Кнопка Google +1

Я лічильник залишу, так як мені цікаво, скільки відвідувачів буде кликати по новому соціальному кнопці від Google.

В наступному полі копіюємо запропонований код кнопки Google +1:

Кнопка Google +1 >

Як зрозуміло з коментаря, першу частину коду потрібно вставити в межах тега <head> або до закриває тега </ body> в HTML коді вашого сайту. Другу частину коду - безпосередньо в тому місці, де буде виводитися кнопка Google +1 на вашому сайті.

У випадку з блогом Wordpress першу частину коду потрібно вставити в файл header.php в папці з темою вашого блогу, другу - в файл single.php (в деяких темах такого файлу немає, тому потрібно буде вставляти в index.php) в тій же папці . Я розмістив кнопку після вмісту статей (тобто після коду <? Php the_content;?>).

Власні соціальні кнопки

Нижче викладений код соціальних кнопок, де можна використовувати для кожної кнопки будь-яку власну картинку

 <! - Begin Vkontakte Share Button ->
 <a rel="nofollow" target="_blank" href="http://vkontakte.ru/share.php?url=URL_СТРАНІЦИ">
 <Img src = "ПУТЬ_ІКОНКІ" width = "48" height = "48" title = "Поділитися ВКонтакте" alt = "Поділитися ВКонтакте" />
 </a>
 <! - End Vkontakte Share Button ->

 <! - Begin Odnoklassniki Share Button ->
 <a rel="nofollow" target="_blank" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=URL_СТРАНІЦИ">
 <Img src = "ПУТЬ_ІКОНКІ" width = "48" height = "48" title = "Поділитися в Одноклассниках" alt = "Поділитися в Одноклассниках" />
 </a>
 <! - End Odnoklassniki Share Button ->

 <! - Begin Facebook Share Button ->
 <a rel="nofollow" target="_blank" href="http://www.facebook.com/sharer.php?u=URL_СТРАНІЦИ">
 <Img src = "ПУТЬ_ІКОНКІ" width = "48" height = "48" title = "Поділитися в Facebook" alt = "Поділитися в Facebook" />
 </a>
 <! - End Facebook Share Button ->

 <! - Begin Twitter Share Button ->
 <a rel="nofollow" target="_blank" href="http://twitter.com/share?&text=Заголовок%20-%20&url=URL_СТРАНІЦИ&via=ВАШ ЛОГІН">
 <Img src = "ПУТЬ_ІКОНКІ" width = "48" height = "48" title = "Поділитися в Twitter" alt = "Поділитися в Twitter" />
 </a>
 <! - End Twitter Share Button ->

 <! - Begin Mail.ru Share Button ->
<a rel="nofollow" target="_blank" href="http://connect.mail.ru/share?share_url=URL_СТРАНИЦЫ" >
<img src="ПУТЬ_ИКОНКИ" width="48" height="48" title="Поделиться в Mail.ru" alt="Поделиться в Mail.ru" />
 </a>
<!--End Mail.ru Share Button-->

<!--Begin Livejournal Share Button-->
<a rel="nofollow" target="_blank" href="http://www.livejournal.com/update.bml?event=URL_СТРАНИЦЫ&subject=ЗАГОЛОВОК">
<img src="ПУТЬ_ИКОНКИ" width="48" height="48" title="Поделиться в Livejournal" alt="Поделиться в Livejournal" />
 </a>
<!--End Livejournal Share Button-->

<!--Begin Google-Buzz Share Button-->
<a rel="nofollow" target="_blank" href="http://www.google.com/buzz/post?message=ЗАГОЛОВОК&url=URL_СТРАНИЦЫ">
<img src="ПУТЬ_ИКОНКИ" width="48" height="48" title="Поделиться в Google-Buzz" alt="Поделиться в Google-Buzz" />
 </a>
<!--End Google-Buzz Share Button-->