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

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

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

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

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

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

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

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

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

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

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

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

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

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

Запись опубликована автором в рубрике Как создавать сайты с метками , .

Кнопка Like от ВКонтакте для блога: 65 комментариев

  1. SwaEgo

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

  2. Олег Олегыч

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

  3. SEO-Дилетант'ка

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

  4. SEO-Дилетант'ка

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

  5. Гость

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

  6. SEO-Дилетант'ка

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

  7. Гость

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

  8. Oleg Golovkov

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

  9. SEO-Дилетант'ка

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

  10. Oleg Golovkov

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

  11. kakamunga

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

  12. SEO-Дилетант'ка

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

  13. Vlad Igolkin

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

  14. SEO-Дилетант'ка

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

  15. Noganoff

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

  16. SEO-Дилетант'ка

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

  17. КиноBestia

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

  18. SEO-Дилетант'ка

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

  19. КиноBestia

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

  20. SEO-Дилетант'ка

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

  21. Том

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

  22. Olykia

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

  23. Bistriy2008

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

  24. SEO-Дилетант'ка

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

  25. Ярослав Анощенков

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

  26. SEO-Дилетант'ка

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

  27. Arcticstudent

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

  28. SEO-Дилетант'ка

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

  29. Секси906090

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

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

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

  30. KondratenkovArt

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

  31. SEO-Дилетант'ка

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

  32. antoniya21

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

  33. Антонина Туровская

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

  34. Apraxis

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

  35. Лена

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

  36. SEO-Дилетант'ка

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

  37. Irbis

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

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

  38. Вильдика

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

  39. Lyudmila

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

  40. antony007

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

  41. SEO-Дилетант'ка

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *