Добавляем виджет «Мне нравится» (Вконтакте) и Facebook Like Button (Фейсбук) на свой блог

Добавляем виджет «Мне нравится» (Вконтакте) и Facebook Like Button (Фейсбук) на свой блог

Привет всем! В этой статье я расскажу Вам как можно добавить на свой блог два полезных виджета: «Мне нравится» — для Вконтакте и «I like» — для Facebook (Facebook Like Button). Чем полезны эти виджеты? А полезны они тем, что посетители Вашего ресурса нажав на эту кнопку смогут не только выразить своё отношение к посту, но и поделиться ссылкой со своими друзьями.

Как добавить кнопку Контакта  «Мне нравится» на свой блог

Итак, чтобы установить себе на блог вот такую кнопочку

кнопка Вконтакте мне нравится

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

подключаем виджет для Контакта

Вот этот код нужно вставить внутри тега <head> </head> (в файле header.php):

<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?#######"></script>

<script type="text/javascript">

VK.init({apiId: #######, onlyWidgets: true});

</script>

Не забудьте вместо знаков ###### вставить свои индивидуальные номера!

А вот этот код вставьте в то место, где Вы хотите разместить свою кнопку:

<div id="vk_like"></div>

<script type="text/javascript">

VK.Widgets.Like("vk_like", {type: "button"});

</script>

Как видите, я разместил эту кнопку после каждой статьи на блоге (файл single.php).

Как добавить кнопку Facebook Like Button

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

Мне нравится фейсбук

Переходим на эту страницу, видим вот такое окно:

like button facebook

URL to Like – оставляем это поле пустым

Layout Style – стиль счетчика (я выбрал стандартный).

Show faces – показывать аватарки проголосовавших.

Width – ширина кнопки. Подберите её под свой дизайн (я выбрал 450рх).

Verb to display – какое слово будет отображаться на кнопке: Like (Нравится) или Recommend (Рекомендовать). Я остановился на первом варианте.

Font (шрифт) и Color Scheme (Цветовая схема) выбирайте на свой вкус.

После того, как Вы сделали нужные настройки, нажимаем на кнопку Get Code:

Появится вот такое окно:

Нас интересует код из верхнего поля iframe. Копируем этот код в то место, где Вы хотите видеть кнопку «I like».

Теперь очень важный момент! Если у Вас блог на WordPress, то после

http://www.facebook.com/plugins/like.php?href=

нужно вставить

<?php the_permalink()?>

У меня этот код выглядит вот так:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink()?>  &amp;layout=standart&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Обновление за январь 2012 года: буквально на днях на некоторых сайтах перестала работать кнопка Like от Facebook, которая была установлена с помощью метода, описанного выше. Вот альтернативный рабочий вариант кнопки при помощи html5:

Вот этот код вставляем сразу после тэга <body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1&appId=117414535029821";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

А вот этот кусок кода, в то место, где нужно вывести кнопку:

<div data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

Как видите, на установку этих кнопок уйдет не больше 5 минут :). И не говорите мне потом, что Вам не хватает времени на такие мелочи – для привлечения посетителей все методы хороши!

P.S. Вы не задумывались, сколько всего сайтов в сети Интернет? Лично я – нет. Но зато я знаю где можно найти самые популярные сайты в мире. На 9м месте всеми любимый Твиттер!

Понравилась статья? Поделиться с друзьями:
Комментарии: 50
  1. Русаков Вячеслав

    Полезные кнопочки. Иногда пользователю влом комментарий писать или, к примеру, с мобильного не совсем удобно… То здесь просто залайкил и показал свою заинтересованность информацией в посте. Замечательно, все рады )))

  2. Жерка Лукич

    Лайки заменят комментарии. Всё сводится к использованию только мышки.

  3. sidash (автор)

    не хотелось бы таких радикальных изменений, если честно)

  4. sidash (автор)

    p.s. Жерка, ты планируешь себе завести еще один блог?

  5. Жерка Лукич

    Нет. С чего ты взял?

  6. Татьяна

    постоянно пользуюсь такой кнопочкой, полезная штучка!

  7. Wolfx

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

  8. Vladkominfo

    Если пост написать толково, да правильно поставить акценты, комментарии будут обязательно

  9. sidash (автор)

    перешел по этой ссылке: http://jerkalukic.com/
    думал купил домен для нового блога)

  10. __LEnIN__

    Я никогда не наживаю на эти кнопчки) Если я хочу оставить коммент то я его оставлю))
    Но статья класс — все разложил по полочкам;)

  11. MikeKovalev

    Я тоже как-то не сторонник подобных кнопок))
    Но мне нравится как у Спиридонова spiridonov.ru в статьях эти кнопки поставлены, хотя всё равно редко на них нажимаю))

  12. Жерка Лукич

    Для визитки.

  13. manca

    Мне на некоторых блогах этой кнопочки уже не хватает… Хотя еще месяц назад она меня бесила просто :))

  14. Дмитрий

    А какую она пользу приносит есть трафик с этих сайтов

  15. sidash (автор)

    я ссылку поставил на Ленара Амирханова — почитайте

  16. Виктор

    Ребята, давайте не о том, какую пользу приносит, кто сколько нажимает, а по существу! если установить два виджета like(fb+vk), то если с fb взять код xfbml — БУДЕТ javascript ошибка. Актуальный вопрос: как ее исправить???

  17. sidash (автор)

    зачем брать код xfbml если нужно брать первый вариант!

  18. Виктор

    Затем, что мне нужно, чтоб было на кнпке всегда написано Like(английским) независимо от настроек юзера, так по дизайну должно быть на сайте. Первый вариант переводиться(при подключении js-файла), в iframe такой способ не предусмотрен

  19. Виктор

    Все, нашел iframe тоже можно переводить:
    http://developers.facebook.com/docs/reference/plugins/like/
    А xfbml с vk действительно конфликтует.

  20. sidash (автор)

    молодец, что нашел =)

  21. Дмитрий

    Виктор, раскажите пожалуйста как вы исправили конфликт виджетов?
    Я сделал все через iframe однако продолжаю в консоли фаербага наблюдать следующее:

    malformed URI sequence
    FB.provide(‘QS’,{encode:function(c,d,a…d[a(c[0])]=a(c[1]||»);}return d;}});

    Это в принципе не мешает виджетам работать, но хочется разобраться…

  22. Дмитрий

    PS Сайт на котором это воспроизводится в ссылке моего имени возле аватара

  23. Виктор

    Так у тебя там фейсбук js-ка:

    Она тебе уже не нужна, т.к используется iframe, а конфликты из-за ее подключения. Хотя я там этой ошибки в файрбаге не вижу

  24. kTunes

    А если нету такого файла header.php ???
    неужели нельзя вставить этот контакта в head страницы html??

  25. sidash (автор)

    неважно есть такой файл или нет — найдите и вставьте в него нужный код

  26. kTunes

    а эту надпись никак не убрать??
    «…. людям это нравится. Будьте первыми среди своих друзей.»

  27. kTunes

    спасибо.уже сам разобрался.глупый был вопрос)второй наверное не лучше,но всё же))

  28. kTunes

    Разобрался)

  29. sidash (автор)

    нет

  30. kTunes

    почему же нет?там просто меняешь вид кнопки,чтобы отображались только цифры и всё.

  31. sidash (автор)

    сорри, я вначале не так понял суть вопроса (подумал что ты хотел изменить надпись, а не убрать её)

  32. Елена

    Кнопочки действительно нужные, так как через социальные сети идёт неплохой трафик, а установить после такого подробного объяснения проще простого.Спасибо!

  33. Евгений

    блин,что за фигня??мне он выдает такое

    VK.init({apiId: API_ID, onlyWidgets: true});

    почему у меня нет цеферок там,а просто написано API_ID?? откуда мне цифры свои взять?? нирена не могу понять

  34. Арина

    @Евгений:

    Присоединяюсь к вопросу — что туда вставлять надо и где это взять?

  35. sidash (автор)

    @Евгений, @Арина: нажмите на кнопку сохранения настроек.
    еще может быть глюк из0за самого браузера. перезапустите его(у некоторых в опере были проблемы)

  36. Alan

    @Евгений:
    Прям на сайте вконтакта нужно получить API ID и потом вставить
    apiId: Сюда его

  37. YMOTORBIKE

    Спасибо за подробную инструкцию, только у вас увидел:»Нас интересует код из верхнего поля iframe»…А так бы мучался еще долго, вставляя HTML5…)))))))))

  38. Костя

    @Дмитрий: обошел это, вставив iframe фэйсбука напрямую: http://pastebin.com/0xzmZDdr

  39. sidash (автор)

    @Костя: у меня заработал только второй вариант, о котором я написал. при вставке других кодов или кнопка не работала или на некоторых страницах была ошибка

  40. Егор

    кнопка с лайком вк вообще не работает…

  41. Maximal

    фигня какая-то
    код фейсбука стал блокировать +1 и «мне нравится»
    всё работало и не менялось до этого :(

    кстати, написал на коленке скриптик
    твой блог уже добавил, через 2 часа будут все данные по всем лайкам по всем страницам :)

    http://1nf.ru/smm-tools/

    просто адрес любой страницы в первом поле введи, покажет сумму по всем ;)

  42. sidash (автор)

    @Maximal: испытал — неплохой скрипт

  43. леон

    какой индивид номер вставлять то надо??? я не понимаю объясните мне,где его взять???

  44. sidash

    @леон: после ApiId идет число. это ваш номер

  45. леон

    у меня там пусто

  46. валерий

    гмм.. не оценил. В на оригинальном сайте виджетов написано больше и понятнее. А утт надеялся найти хотя бы пару интересных приемов.

  47. Ромусссик

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

  48. Алина

    Здравствуйте!
    А как поставить несколько кнопок «мне нравится» от вконтакте на одну страницу, если надо продублировать в нескольких местах? Если просто один и тот же код вставлять — он задваиваится в одном месте.
    В документации к виджету «мне нравится» говорится о параметре «element_id», но как и куда его правильно прописать?
    Помогите, пожалуйста.

  49. sidash (автор)

    @Алина: в этом, к сожалению, я вам подсказать не смогу

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: