SEO простым языком

О продвижении бизнеса в интернете

Кнопка Like от ВКонтакте для блога

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

Вконтакте
По крайней мере я смотрела несколько раз и так ее не обнаружила. И вот сегодня, с легкой подачи постоянного читателя Сотника Юрия, выяснилось, что такая кнопка все же есть (наверно, появилась недавно).

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

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

Итак, для того, чтобы установить кнопку-счетчик Like от социальной сети Вконтакте, переходим на эту страницу.

Перед вами форма для получения кнопки. Визуально форма разделена на 2 части.

Установить кнопку like vkontakte

Прежде, чем получить код кнопки, необходимо указать название своего блога, ввести свой адрес (поле Основной домен сайта заполнится автоматически) и нажать кнопку Сохранить.
После этого выбираете вариант кнопки и название. И только после этого код будет готов к установке. Но и тут нужно проявить внимательность. Код, который нужно установить, зрительно разделен на три части. Вначале копируем первые 2 части

Установить кнопку нравится vkontakte
Самая первая строчка – это комментарий, в котором написано, что этот код необходимо вставить в заголовок страницы, его можно не копировать. Открываем Дизайн – Изменить HTML. Скопированный код вставляем в шаблон перед тегом </head>.
Остается третья часть кода.

Еще по теме  Как интересно оформить профиль в Facebook

Кнопка нравится
Его то и нужно вставить непосредственно в то место, где вы хотите, чтобы находилась кнопка. Чаще всего подобные вещи мы устанавливаем в шаблоне после строки <data:post.body/>. Не забудьте перед вставкой поставить галочку Расширить шаблоны виджета. Как и в варианте выше, комментарий можно не копировать. Кнопка готова!

[ads1]На всякий случай уточню для тех, кто устанавливал кнопки счетчики, как у меня слева от сообщений блога. Саму установку я описывала в этой статье. Для такого блока кнопок необходимо задать вариант кнопки – Миниатюрная кнопка, счетчик вверху.

Вид кнопки Нравится
Как помните, я обращала внимание, что кнопку необходимо установить в контейнер:

<div class=’float’>В этом месте должен располагаться код кнопки</div>
В этот контейнер вставляем самый последний код, и уже в таком виде устанавливаем в шаблон блога туда, где уже установлены кнопки.
Теперь у вас в блоге есть кнопка Нравится от ВКонтакта. Удачи вам.

Мои услуги

Создание сайта

Полностью готовый сайт для посетителей и продвижения под ключ

От 10 000р

SEO услуги

От аудита до продвижения. Независимый консалтинг.

От 3 000р

Digital-маркетинг

Разработка стратегии продвижения под Ваш проект. Распаковка экспертов.

От 3 000р

Коучинг

Инструмент, который поможет Вам завоевать весь мир.

От 10 000р

Поделитесь с друзьями

65 thoughts on “Кнопка Like от ВКонтакте для блога

  1. Спасибо! Как же удобно стало с блоками тематическими =)

  2. Вот бы ещё кнопку РуТвита замутить вот сюда «Кнопки социальных сетей для блога Blogger Blogspot»
    Поискал,не нашёл.

  3. Олег Олегыч:

    Делаю все строго по инструкции, а не выходит… Что я делаю не так?
    Вроде сохраняется нормально, не ругается, но визуально ничего не меняется…

  4. Олег Олегыч, вы же понимаете, что я не вижу ваших действий, и поэтому мне сложно сказать, что именно вы делаете не так. Во-первых, посмотрите внимательно, в полученном коде на сайте вкантакта у вас есть в строке справа от apiId: цифры? Точно ли вы нажимаете кнопку Сохранить? И второе, скажите, вы в какое место в шаблоне вставляете кнопку?

  5. Смотрите, в коде, который дает вконтакте есть два комментария. комментарии выделяются .
    Все, что находится до второго комментария, вставляете выше . Прям нашли выше него ставите.

  6. Вопрос:
    В вашем примере есть следующая строка:
    VK.init({apiId: 2026474, onlyWidgets: true});
    У меня при генерации кнопки ВКонтакте она выглядит как:
    VK.init({apiId: API_ID, onlyWidgets: true});
    кнопка на странице не отображается совсем
    при вставке цифр из вашего примера вместо кнопки отображается текст и индикатор загрузки.
    Как быть?

  7. У меня при генерации кнопки ВКонтакте — в том то и дело, что генерации не происходит. А не происходит потому, что вы не нажимаете кнопку «сохранить», предварительно указав название своего сайта. Прочитайте статью внимательней, об этом написано.

  8. Статью читал внимательно;) , кнопку «сохранить» нажимал.
    Есть ещё нюанс: адрес сайта вставлял в форму для кнопки копи-пастом из адресной строки браузера. При этом в конце автоматически добавляется /. Убрал слэш и всё получилось как нужно.
    Спасибо за статью. И за блог в целом.

  9. Значит, дело в слеше:). Спасибо, будем знать. Думаю, для многих это будет актуально.

  10. У меня все получилось но проблема в том что, на странице 8 сообщений и 8 значков мне нравятся находятся один под другим, не подскажете как здесь поступить?

  11. мне нравятся находятся один под другим где-то здесь явно что-то пропустили, и теряется смысл:). Я правильно поняла, что вам нравится, что у вас 8 кнопок на главной? Но вы сомневаетесь, правильно ли это? Если нравится, оставьте, как есть. Если не нравится … а что хотите вообще? Уточните свой вопрос, пожалуйста:).

  12. И имею введу ,что «мне нравится» находятся не под постом, а просто поверх первого поста все 8 значков, перекрывая тему и буквы, каким образом можно убрать их с главной страницы чтобы они были внутри поста

  13. Чтобы кнопка была только внутри поста, необходимо пользоваться этой конструкцией

    здесь должен быть код кнопки

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

  15. Та часть кода, которую в статье я называю «третьей частью». Та, которая непосредственно вставляется в шаблон блога туда, где вы хотите видеть кнопку.

  16. ок, сделал, теперь все красиво, спасибо!

  17. Доброго времени суток! Большое спасибо за Ваши познавательные посты, которые помогают мне расширить возможности моего блога.
    У меня такой вопрос: при размещении кнопки «нравится вконтакте» столкнулся с такой проблемой, — при просмотре одиночной страницы (отдельного поста) все смотрится отлично, но если просматривать блог полностью — кнопка «нравится вконтакте» повторяется 6 раз(друг под другом) и смотрится не ахти. Подскажите пожалуйста, так должно быть, или я неправильно установил код. Спасибо.

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

  19. Внимательно все прочитал, сделал — получилось. Екатерина, еще раз спасибо Вам.

  20. а как сделать как у вас? тоесть прокручивается со страницей?и желательно с правой стороны?

  21. В конце этой статьи есть ссылка на пост, в котором я описывала установку кнопок, как у меня слева. По-поводу «право, лево» для вашего шаблона же не имеет серьезного значения, где именно их ставить.

  22. Катюша, спасибо, прочитала вашу статью «Кнопки добавлния в социальные сети» и этот пост. Установила, немножко подкорректировала располжение и внешний вид, следуя вашим подробным инструкциям=)
    Вот только небольшая проблема возникла: смотрю через свой браузер IE — всё отлично, посмотрела через Google Chrome — отображаются все кнопки, кроме I like от вКонтакте.
    Может быть, вы знаете, с чем это может быть связано? уж очнь хочется, чтобы эта кнопочка через все браузеры отображалась=)

  23. Смотрела ваш блог в хроме, кнопка есть. Проблема решилась или это только у меня? Вообще, я не знаю, в чем может быть проблема. Иногда бывает, что кнопки не загружаются, но это, как правило, может быть из-за медленного инета или самого сервиса, чья кнопка.

  24. Видно, раз на раз не приходится: смотрю через домашний IE — всё отображается, через домашний Хром — нет кнопки I like, через домашнюю Мозиллу — нет Фейсбуковской кнопочки, через Хром на работе — все кнопочки показывает. Также посмотрела ваш блог через все эти браузеры — та же ситуация, из чего делаю печальный вывод, что у меня дома глючные браузеры)))

  25. Возможно, утверждать не берусь))) Хотя он у меня, вроде, довольно быстрый=)

  26. У меня кнопка установилась. но не работает. как исправить?

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

  28. Не работает, к сожалению. Вставляю и после , и в то место, где кнопки твиттера и фейсбука. Всё делал по шагам. Кстати ФБ и ТВ кнопки установились без проблем с первого раза. А вот ВК что-то не хочет=(
    В контейнер третью часть кода тоже помещал.

  29. Здравствуйте! Сделала, всё, как написано, но всё равно где-то ошибочка вышла. почему-то в первой теме аж 4 кнопки появились! http://olgaefimova.blogspot.com/
    в других темах по одной…..

  30. О, кажется, нет, а где его его получать?

  31. Посмотрела по ссылке, совершенно не поняла, что у вас не получилось… Объясните подробней, пожалуйста.

  32. Спасибо большое! Все получилось благодаря комментарию Гостя со слешом… И ему и Вам спасибо!

  33. Здравствуйте,я в этом деле совсем новичек все делая по инструкции и у меня поисковик не находит код
    Куда мне вставлять вторую часть кода с контакта?

  34. Давайте разберемся, что вы подразумеваете под поисковиком? Найти должны вы, пользуясь встроенным поиском по странице браузера.
    Если бы в вашем шаблоне не было этого кода, то все сообщения, которые вы пишите, не отображались бы в блоге, т.к. именно этот закрывающий тег содержит в себе и отвечает за вывод ваших сообщений на страницах. Т.е. совершенно точно, что у вас такой код есть. Если вы не находите, значит неправильно ищите. И ещё, ставите вы галочку «расширить шаблоны виджета»?

  35. Ёпрст… Я вчера полдня мучился. Мне даже в голову не пришло, что дело в слеше

  36. Очень полезная информация!
    Я сделал всё, как Вы сказали. Но у меня получилось что-то не так. На главной странице блога у меня после поста одна кнопка «мне нравится», а когда я нажимаю на заголовок этого поста у меня происходит переход уже как бы на основной адрес поста и там всё тоже самое, только кнопки «мне нравится» две! Что с этим делать..?

  37.  Вообще то я сталкивалась с обратной ситуацией, когда на главной — несколько кнопок, а вот на странице поста одна. С чем это связано — я знаю, а про вашу ситуацию я ничего не могу сказать, надо смотреть непосредственно в блоге.

  38. привет. у меня сейчас в блоге 3 сообщения. когда я сделал то что написано выше, под последним сообщение появилось сразу 3 кнопки Мне нравится, а под двуми другими сообщениями пусто. 
    подскажите, как исправить?

  39.  Я знаю только один способ, как это исправить — кнопка Мне нравится не должна отображаться на главной, только на внутренних страницах. Дело в том, что разработчики не предусмотрели вариант, когда на одной странице сразу несколько кнопок.

  40. Секси906090:

    Накрутка » мне нравится » все качественно дёшево и быстро.
    Мне нравится вконтакте
    100 =15 WMR-рубли
    1000 =150 WMR-рубли

    Мне нравится на посторонних сайтах
    1 мне нравится = 2 WMR
    1000 мне нравится = 500 WMR
    2000 мне нравится = 750 WMR

    Также делаю комментарий вконтакте
    1 коммент = 2 WMR

  41. Секси906090:

    обращатся на ICQ 352802651

  42. Здравствуйте! Огромное спасибо за ваши статьи всё очень полезно, а главное доступно!!!
    Сделал себе кнопки и неимоверно рад этому :)))
    Но есть такой вопрос, мне в блоге нужно сделать пост с голосованием (конкурс фотогафий) возможно ли это? а если возможно то как это может выглядеть?
    Еще раз огромное спасибо 🙂

  43. Голосования можно делать в блоге. Но мне сложно что-то посоветовать, лично я пользовалась только одной голосовалкой, как выглядит можете посмотреть в этой статье, там же найдете и ссылку на сам сервис. Думаю, вам лучше через поисковики поискать разные варианты.

  44. У меня такая же проблема, как и у Олега Головкова. Помогите, пожалуйста! Эту конструкцию, о которой вы пишите, надо удалить полностью или оставить от нее только «». Это и есть код кнопки???

  45. Здравствуйте! У меня такая же проблема, как у Олега Головко. ВСе получилось, только на главной странице 8 сообщений и на последнем верхнем в вертикальный ряд выстроились кнопки «мне нравится». подскажите, что делать???? что такое контейнер? где его взять??? 

  46. хочу заказать статью на тему «инкапсуляция стены\заметок в контакте
    рсс-потоком в жж\ли.ру синдикацию». собственно как бы выковырить адрес
    рсс-потока того и другого. для меня это не просто блажь, это насущная
    задача.
    по умнбм блогам посмотрел: там задача с точностью наоборот решается.

  47. Вместо кнопки, в том месте, где ей предполагается быть, появляется сообщение: «API security breach»

  48. Я пишу о том, что код кнопки должен быть внутри этой конструкции.
    О какой конструкции пишите вы, я понять не могу, т.к. код не отображается в комментарии. Пожалуйста, опишите проблему более подробно.

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

  50. Может вы неправильно скопировали код кнопки? Сообщение переводится, как нарушена безопасность.

  51. Здравствуйте. Спасибо большое за подробные инструкции, Вы единственная все так доходчиво объяснили. У меня есть небольшой вопрос. Для вставки третьей части кода я использовала предложенную Вами конструкцию

    код кнопки
     
    Все получилось, кнопка вставилась в каждое отдельное сообщение. Неудобство в том, что она отображается впритык к тексту после него (то есть, слишком близко). Не подскажете, что и куда конкретно добавить в вышеприведенную конструкцию, чтобы сделать небольшой отступ между текстом и кнопкой? Спасибо заранее. 

  52. Угу, я так и подумала, но решила на всякий случай уточнить. А ставить перед самим кодом или перед конструкцией

  53. Ой! вставила кнопки, а внизу после них какие-то надписи появились! И если нажать кнопку «отправить», табличка вторым слоем появляется. Не видно ничего 🙁 Честно говоря, не поняла главное — КУДА вставлять коды. В плагине есть поле для IPID? туда и вставила.

  54. Давно хотел поставить этот замечательный виджет, но никак не мог найти нормального и последовательного объяснения действий, пока не наткнулся на этот блог. Спасибо за краткое и понятное изложение мануала по установке=)

  55. Спасибо!!! ОЧЕНЬ помогли!

  56.  Они находятся в шаблоне. Как я могу ещё объяснить, где они? Вы умеете пользоваться поиском в браузере? Нажимаете Ctrl+F, появляется окошко поиска, в зависимости от браузера оно может быть в левом нижнем углу, в левом или правом верхнем углу. В это окошко вводите искомый код (естественно, в этот момент вы должны находиться на нужной странице, т.е. по статье это Дизайн — Изменить HTML), нажимаете Enter/Ввод и нужный код будет подсвечен. Я когда-то тоже не умела так искать, но это не относится к теме статьи, и вы должны многому научиться, чтобы полноценно работать, вносить изменения в шаблон.

Comments are closed.