Ставим кнопки социальных сетей на сайт

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

В случае если вам не нужно видеть количество нажатий прямо на сайте.
То можете не заморачиваться и прекратить шаманство. Лучше сразу воспользуйтесь сервисом от Яндекса share.yandex.ru. Который предоставляет вам возможность поставить на свой сайт, красиво оформленный блок из набора кнопок социальных сервисов.

Установка кнопки «Мне нравится» Вконтакте

Для получении кнопки для своего сайта идем на сайт vkontakte.ru

Регистрация сайта в вконтакте

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

Следующий шаг выбор варианта отображения кнопки.
Для наглядности я привел их на скриншоте ниже:

Варианты кнопки

После выбора нужного варианта кнопки вам будет сгенерирован код кнопки.

Код кнопки

Код который выделен на скриншоте нужно разместить в пределах тега <head>.
Найдите закрывающийся тег </head> и перед ним вставьте код.

Вторая часть кода отвечает за вывод самой кнопки на вашем сайте, разместите этот код в том месте, где хотите видеть кнопку Мне нравится.

Код кнопки

Устанавливаем кнопку “Нравится” от mail на сайт

Переходим по этой ссылке.

Настройка кнопки

Устанавливаем необходимые настройки.
URL вводить не нужно, пояснение:
Мы предложим пользователю поделиться той страницей, на которой расположена кнопка. Поэтому указывайте URL, только если кнопка располагается на другой странице, например, на странице списка статей, когда вы хотите чтобы пользователи делились конкретными статьями.

После настройки копируем сгенерированный код:

Код кнопки

Вставляем код туда, где вы хотите выводить кнопку нравится на своём сайте.
Всё установка кнопки “Нравится” от mail.ru закончена.

Устанавливаем кнопку нравится от Facebook.com (like Facebook)

Заходим на Facebook.

Настройка кнопки like facebook

Выбираем необходимые настройки своей кнопки, мне нравится от Facebook.
1. URL to like - вводим адрес своего сайта.
2. Send Button - отображение рядом с кнопкой like кнопки Send
3. Layout Style - настройка стиля отображения кнопки:
standart – кнопка like с текстом справа от нее и отображением аватарок кому понравилось.
button_count – справа от кнопки like будет видно количество тех, кому понравилось.
box_count - количество которым понравилось отображается сверху кнопки.
4. Width – ширина
5. Show faces – показывать аватарки тех кому понравилась.
6. Verb to display – надпись на кнопке like, либо recommend.
7. Color Scheme – цвет кнопки.
8. Font – выбор шрифта кнопки.
После того как настроили вы настроили кнопку “нравится” под свои нужды вы можете получить её код.
Для получения кода нажмите Get Code.
Но код мне сразу не дали:

Только проверенные разработчики могут быть добавлены в список разработчиков этог

Перешёл по ссылке где меня попросили подтвердить подлинность аккаунта.

Подтверждение подлинности аккаунта Facebook

Вбил сой номер телефона нажал отправить код и код не пришел (((
Нажал повторно отправить код и он тоже не пришел.
Последующие нажатия приводят к выводу вот такого сообщения:
Sorry, we have already tried texting multiple codes and they all seem to have failed. Please нажмите сюда to get help.

Решил не заморачиваться с подтверждением, а попробовать решить данный вопрос другим способом.
Нашел в интернете скриншоты кода который генерирует Facebook и вручную собрал себе кнопку.
Вот её код:
<script src="http://connect.facebook.net/ru_RU/all.js#xfbml=1"></script>
Скрипт добавляем в <head>
А код который отвечает за вывод кнопки в туду где вам нужно вывести кнопку.
<fb:like href="http://surok.biz" layout="button_count" show_faces="false" font="arial"></fb:like>

Обратите внимание, что вы можете использовать любые параметры напрямую в java коде, которые Facebook предлагал вам в визуальном режиме.

Но у такого кода есть один существенный недостаток, пользователю всегда "нравится" только главная страница. Чтобы обойти этот момент нужно добавить параметр url через шаблон вашего сайта.
В cms drupal это можно сделать так:
<fb:like href="http://surok.biz<?php print $node_url ?>" layout="button_count" show_faces="false" font="arial"></fb:like>

В cms wordpress это делается так:
<fb:like href="http://surok.biz<?php the_permalink() ?>" layout="button_count" show_faces="false" font="arial"></fb:like>

Добавляем кнопку “Твитнуть” на сайт на сайт

Заходим на сайт twitter-а по этой ссылке.
Вам представится выбрать вариант кнопки:

Выбор варианта кнопки share twitter

Можно изменить текст, который будет выводиться перед ссылкой на страницу, когда пользователь делает ретвит.

Текст кнопки share twitter

Аналогично с Facebook можно выбрать на какую страницу будет ставиться ссылка
Выбираем необходимый язык

Выбор русского языка share twitter

Можно выбрать пользователя, который будет, упомянут в твите

Упоминание юзера при retweet

Получаем код кнопки и вставляем его в нужном месте на сайте.

Код кнопки share twitter

Делаем retweet

Итог всех действий у меня получился вот такой:
 
<div style="float:left;"><fb:like href="http://surok.biz<?php print $node_url ?>" layout="button_count" show_faces="false" font="arial"></fb:like></div>
<div style="float:left; padding-left:14px;"><a rel="nofollow" target="_blank" class="mrc__plugin_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'type' : 'button', 'width' : '130'}">Поделиться</a><script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script></div>
<div style="float:left; padding-left:14px;"><a rel="nofollow" href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="Surok97">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div style="float:left;"><div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script></div>

Выглядит это так

Внешний вид блока с социальными кнопка vkontakte, facebook, mail, twitter

Какой метод лучше первый или второй вопрос спорный. Если рассматривать только трудозатраты, то конечно первый вариант выигрывает, плюс ко всему мы получим статистику по использованию кнопок. Но те пользователи, которые нажимают на кнопку нравится только в том случае, когда видят цифру на счетчике кнопки с цифрами

Ср, 05/25/2011 - 23:06

2leep.com




Комментарии к этой записи
    
  1. Аватар пользователя Алена

    Автор Алена ( ) дата: Чт, 05/26/2011 - 00:36

    круто! мне очень пригодилось... Спасибо Вам большое!

  2. 
  3. Аватар пользователя Гость

    Автор Гость ( ) дата: Ср, 06/01/2011 - 22:53

    ну наконец, то нашёл то, что надо, спасибо, а то все копируют одно и то же ...

  4. 
  5. Аватар пользователя Surok

    Автор Surok дата: Ср, 06/01/2011 - 23:21

    Спасибо вам за отзыв!

  6. 
  7. Аватар пользователя Гость

    Автор Гость ( ) дата: Ср, 08/17/2011 - 05:51

    Спасибо, автор! По твоей статье сделал виджеты в своем инет-магазине! Очень полезно. Плюс я еще добавил виджет от одноклассников.
    Только последняя мысль в статье не завершена.

  8. 
  9. Аватар пользователя Surok

    Автор Surok дата: Ср, 08/24/2011 - 10:52

    Уточните какая именно мысль?
    На самом деле уже надо переписывать статью или как минимум исправлять и дописывать.

  10. 
  11. Аватар пользователя Елена

    Автор Елена ( ) дата: Пт, 02/03/2012 - 19:19

    Спасибо и от меня тоже.
    а этот сайт не охвачен ((
    http://www.linkedin.com/
    надеюсь и жду!

  12. 
  13. Аватар пользователя Гость

    Автор Гость ( ) дата: Ср, 08/24/2011 - 13:19

    Вот эта мысль:

    "Но те пользователи, которые нажимают на кнопку нравится только в том случае, когда видят цифру на счетчике кнопки с цифрами..."

  14. 
  15. Аватар пользователя Surok

    Автор Surok дата: Ср, 08/24/2011 - 13:24

    Спасибо за замечание, обязательно поправлю.
    Кстати вы оставили 100й комментарий , а значит получите от меня подарок, подробности тут: 10000 за комментарий в блоге!

  16. 
  17. Аватар пользователя Гость

    Автор Гость ( ) дата: Сб, 08/27/2011 - 01:32

    Dance Надо же!
    Только придется инкрементировать счетчик, задав вопрос: как получить подарок? Happy

  18. 
  19. Аватар пользователя Surok

    Автор Surok дата: Пнд, 08/29/2011 - 19:12

    Написал вам на почту

  20. 
  21. Аватар пользователя Гость

    Автор Гость ( ) дата: Пнд, 10/03/2011 - 19:02

    Спасибо большое за такой замечательный пост. Только я столкнулась с такой проблемой. все сделала как вы сказали - но когда нажимаешь мне нравиться на одной странице сайта - автоматически на всех страницах сайта эта кнопка становится неактивной (как будто я ее уже нажала и там). Есть ли возможность это избежать?

  22. 
  23. Аватар пользователя Surok

    Автор Surok дата: Чт, 10/06/2011 - 17:15

    А кнопка какой именно соцсети?
    Возможно у вас стоит везде один url, какая cms у вас установлена?

  24. 
  25. Аватар пользователя Сергей

    Автор Сергей ( ) дата: Пт, 11/11/2011 - 19:47

    Спасибо, только кнопка "твитнуть" не хочет считать количество твитов =(( что не так я сделал, не понимаю((

  26. 
  27. Аватар пользователя Surok

    Автор Surok дата: Пнд, 11/14/2011 - 12:52

    Может twitter изменил код кнопки.
    Посмотрите на их сайте

  28. 
  29. Аватар пользователя Сергей

    Автор Сергей ( ) дата: Втр, 11/15/2011 - 20:57

    А я с их сайта код скрипта и брал, вот только что опять его копировал. Еще прочитал, что надо кэш отключать, дак я везде кэш убрал, всёравно не работает =((

  30. 
  31. Аватар пользователя Алексей

    Автор Алексей ( ) дата: Пт, 02/17/2012 - 20:29

    Сергей пишет:
    А я с их сайта код скрипта и брал, вот только что опять его копировал. Еще прочитал, что надо кэш отключать, дак я везде кэш убрал, всёравно не работает =((

    У меня таже проблема, не считает количество нажатий. Подскажите, кто знает.

  32. 
  33. Аватар пользователя Alexander

    Автор Alexander ( ) дата: Пнд, 12/12/2011 - 02:56

    добавил кнопку мне нравится вконтакте на сайт. На сайте кнопка отображается. Жму на нее, а на сайте вконтакте на моей странице не отображается и рассказать друзьям не работает.

  34. 
  35. Аватар пользователя Daticc77

    Автор Daticc77 ( ) дата: Вс, 12/25/2011 - 06:46

  36. 
  37. Аватар пользователя Михаил Аглиуллин

    Автор Михаил Аглиуллин ( ) дата: Пт, 12/30/2011 - 23:54

    Спасибо, все легко, но полезно.

  38. 
  39. Аватар пользователя Sergro

    Автор Sergro ( ) дата: Пт, 01/06/2012 - 21:22

    Хорошая статья, попробую у себя поставить !

  40. 
  41. Аватар пользователя Катерина

    Автор Катерина ( ) дата: Сб, 01/28/2012 - 14:01

    Спасибо, очень пригодилось!!!

  42. 
  43. Аватар пользователя Гость

    Автор Гость ( ) дата: Втр, 01/31/2012 - 14:01

    Сделал всё, как описано, но кнопка "ВКонтакте" не отображается.

  44. 
  45. Аватар пользователя Гость

    Автор Гость ( ) дата: Втр, 01/31/2012 - 14:15

    Прошу прощения, уже всё работает. Отличный пост!

  46. 
  47. Аватар пользователя Татьяна

    Автор Татьяна ( ) дата: Вс, 02/05/2012 - 16:14

    Я все равно не доконца поняла, где нужно прописывать коды? это нужно иметь свой сайт? у меня есть только страничка в facebook, можно так сделать эту кнопку?

  48. 
  49. Аватар пользователя Валентина.

    Автор Валентина. ( ) дата: Вс, 06/24/2012 - 03:34

    Помогите, пожалуйста, особо одурённой пенсионерке, куда указанный код таки воткнуть, - ни одного подходящего "окошечка" не могу найти в настройках своего блога.

  50. 
  51. Аватар пользователя Денис

    Автор Денис ( ) дата: Пнд, 09/17/2012 - 13:36

    Спасибо. Полезно!

  52. 
  53. Аватар пользователя Владимир

    Автор Владимир ( ) дата: Ср, 10/10/2012 - 23:19

    Хотелось бы побольше кнопок социальных сетей. Владимир.

  54. 
  55. Аватар пользователя Гость

    Автор Гость ( ) дата: Вс, 01/06/2013 - 16:15

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

  56. 
  57. Аватар пользователя Николай

    Автор Николай ( ) дата: Втр, 01/15/2013 - 18:03

    Вот ещё вариант: http://www.likebtn.com

  58. 
  59. Аватар пользователя Кирилл

    Автор Кирилл ( ) дата: Чт, 01/17/2013 - 13:56

    Спасибо, то что искал!

  60. 
  61. Аватар пользователя Вебстар

    Автор Вебстар ( ) дата: Сб, 06/01/2013 - 00:59

    А как избавится от тега <a тоесть ссылки на твиттер? Не очень хочется наставлять на каждой странице ссылку на один и тот же сайт. Это ведь сквозная ссылка и их лучше избегать.

  62. 
  63. Аватар пользователя Ремень

    Автор Ремень ( ) дата: Пт, 07/26/2013 - 15:22

    все так просто, я про сервис Яндекса, спасибо

  64. Отправить комментарий

    Содержимое этого поля является приватным и не будет отображаться публично.
    • Доступные HTML теги: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
    • Строки и параграфы переносятся автоматически.
    • Вы можете разместить код, используя теги <code>...</code>(общий) или <?php ... ?> (выделенный PHP).
    • Вы можете цитировать другие сообщения, используя теги [quote].
    • Текстовые смайлы будут заменены на графические.

    Подробнее о форматировании