Вставляем кнопку “Мне нравится” от ВКонтакте

15
Дек
2010

Как вставить кнопку "Мне нравится" ВКонтакте

Привет! Сегодня я расскажу Вам, как быстро создать приложение и вставить кнопку "Мне нравится" от социальной сети ВКонтакте без лишних плагинов.

Может Вы заметили, я на днях, наконец-то, прикрутил данную кнопочку у себя после постов. "Наконец-то" я написал не даром, так как были проблемы с подключением данной кнопки к API ВКонтакте, в результате чего я получал надпись "Open API security breach" и бесконечно бегающий прогресс-бар. Как оказалось, все дело было в банальном написании адреса сайта в настройках "Open API" в самом ВКонтакте (об этом я напишу чуть ниже).

Итак, давайте прикрутим кнопку "Мне нравится".

Для начала зайдем через свой профиль в ВК (обязательно через свой, так как нам нужно будет создавать приложение). Далее переходим на страничку создания виджета и видим подобную форму:

Настройка виджета "Мне нравится" ВКонтакте

Первое поле "Сайт/приложение" - здесь мы сразу же сможем создать приложение без лишних телодвижений, но Вы знаете, я так поклацал и оно создается как-то через *опу криво.

Создание и настройка приложения

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

Все! Приложение создано и перед нами форма с его настройкой:

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

Следующая вкладка "Настройки", она самая важная! Обратите внимание, в самом верху жирным выделен ID номер Вашего приложения (он и будет коннектить Вашу кнопку), далее идет "Защищенный ключ", его не трогайте.

Далее "Настройки Open API", вот тут аккуратно, вводите адрес сайта точно так же, как это показано на примере:

Настройка Open API ВКонтакте

Адрес сайта: http://yoursite.com/ (адрес к которому Вы подключаете Open API. Если использовать это приложение на другом сайте или на локалхосте, работать не будет. Приложение полностью привязывается к адресу сайта, который тут указан.)

Лишний слэш в настройках адресов и Ваша кнопка не законнектится, будет выводить ошибку "Open API security breach".

Все, сохраняете изменения, остальные вкладки можете не настраивать.

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

Возвращаемся к форме создания кнопки и вот тут уже в поле "Сайт/приложение" в выпадающем списке должно появится Ваше приложение, выбираем его.

Следующий пункт "Варианты кнопки" - выбираем, какая Вам больше подходит под дизайн, внизу под формой сразу приводится наглядный пример кнопки. На данный момент существует 4 вида кнопки:

  • Кнопка с текстовым счётчиком
  • Кнопка с миниатюрным счётчиком
  • Миниатюрная кнопка
  • Миниатюрная кнопка, счётчик сверху

Тип кнопки выбрали, теперь пункт "Название кнопки", пока что есть 2 варианта (выбирайте любой понравившийся):

  • Мне нравится
  • Это интересно

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

Первый кусок кода:

<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?20"></script>
<script type="text/javascript">
  VK.init({apiId: ID__ВАШЕГО_ПРИЛОЖЕНИЯ, onlyWidgets: true});
</script>

нужно вставить внутри тега:

<head></head>

А второй кусок:

<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script>

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

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

А так все, Ваша кнопка готова! ;)

Обтекание кнопки

Как Вы заметили, кнопка помещается в div с айдишиником "vk_like", где прописан стиль её отображения. И в этом стиле разработчики втулили правило:

clear: both;

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

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

на

<div id="vk_like" style="clear:none !important;"></div>

Так мы отменяем отмену (:-D) обтекания элемента, а "!important" повышает приоритет вашего стиля, т.е., Ваше правило в глазах браузера будет главным.

Ну, вроде бы все сказал, что хотел)))) Надеюсь, что Вы все поняли и у Вас получилось вставить кнопку! ;)

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

Подписаться на RSSВы можете подписаться на RSS или на E-mail рассылку:

Оставить комментарий с помощью формы ВКонтакте

Комментариев (129) к “Вставляем кнопку “Мне нравится” от ВКонтакте”

  1. Basil_CHe пишет:

    :( http://warezok.pp.ua/ всё сделал как в описании и не грузится кнопочке :(

    • Oleg Mykhailenko пишет:

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

  2. Настюша пишет:

    У нас все получилось! Спасибо =)

  3. USAdvice пишет:

    Здравствуйте. Очень надеюсь на Вашу помощь, не могу сама разобраться с кнопкой “Мне нравится” ВКонтакте.

    Добавила ее по всем правилам, но на главной странице блога кнопки со всех статей сползаются наверх: http://s016.radikal.ru/i336/1109/b8/6fdee7d85814.jpg
    Как видите, с Фейсбуком и Твиттером таких проблем не возникает… И на страницах отдельных статей все впорядке.

    Подскажите, пожалуйста, в чем может быть проблема…

  4. Дмитрий пишет:

    А как сделать чтобы кнопки мне нравятся были в один ряд?

    • Ян пишет:

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

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

      заменить на

      <div id="vk_like" style="clear:none !important;"></div>

      Таким способом запрещается не обтекание кнопки вконтакте и всё будет на одной строке.

    • Oleg Mykhailenko пишет:

      Дмитрий, в конце поста в разделе «Обтекание кнопки» я описал, как это сделать.

  5. Ян пишет:

    Спасибо большое за статью! Вы единственный, кто написал всё подробно :)
    А именно про создание приложения, т.к. без него ничего не выходит. *THUMBS UP*

  6. Алена пишет:

    подскажите, пожалуйста, в чем может быть причина:
    вставлен скрипт “Миниатюрная кнопка”, но
    1)при наведении не всплывает “Понравилось людям”
    2)по нажатию перекидывает на страницу вконтакте на “результаты поиска” урла, с адресом типа этого:
    http://vkontakte.ru/feed?section=search&q=url%3Ahttp%3A%2F%2Fдоменсайта

    • Oleg Mykhailenko пишет:

      Скорее всего вставлен неправильный код. Видите, Вам выдает урл с текстом «доменсайта». Наверное, в коде, которые Вы скопировали, был этот текст.

      • Алена пишет:

        «доменсайта» – это я для примера написала. Но выяснила, что это происходит везде при нажатии именно на “+1″, а при наведении на “в” или сердечко список людей все-таки появился (просто до этого никто не нажимал :) )). Извините, что ввела в заблуждение :)

        Но есть вопрос номер два:
        Как здесь например http://www.dostavka-sushi.tomsk.ru
        добились того, что кнопки “вконтакте” каждые для отдельного продукта?
        У меня он хоть и показывает несколько кнопок, но воспринимает все как одно…
        и кнопки у меня все показываются в столбик…

        • Oleg Mykhailenko пишет:

          Решение Вашей проблемы было описано в комментариях (от ВКонтакте) к этому посту. Автор ответа Антон Парфенов.

  7. укр лодка пишет:

    Обязательно нужно ставить эту кнопку, соцсети рулят!
    Единственное мне нужно удачно подобрать место размещения кнопки, нужно подумать..
    Или может быть кто-то на свой взгляд подскажет??

  8. Виктор пишет:

    Спасибо за статью, все получилось. Только добавлю, что если страница сайта сверстана в Notepad или Dreamweaver, то первый кусок кода надо вставить между тэгами body. Иначе кнопка не отображается, по крайней мере у меня было так, например на этой странице http://prizmaznaniy.ru/stat_types_of_students.html

  9. Demon cache пишет:

    А может подскажете: как очертить область репоста? например, страница с кучей новостей, под каждой такая кнопка. При нажатии такого лайка с “рассказать друзьям” – репоститься ВСЯ страница…. а как сделать, что бы постилась одна новость? В коде – сухой html с внешним файлом css, накрученные на modX.
    Спасибо

    • Фавор пишет:

      огромный респект за статью. Всё очень лаконично и доходчиво. Мы теперь тоже с кнопочками 8) .

  10. mcmimik пишет:

    Помог такой слегка поправленный код, добавляющий уникальные id div’ам:

    VK.Widgets.Like(‘vk_like’, {type: ‘button’, pageTitle: ”, pageUrl: ”, height: 24});