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

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. Антон пишет:

    Приветствую, а подскажите, как мне поставить кнопку “мне нравится” от вконтакте на разные страницы, чтобы на разных страницах она была уникальной, т.е. собирала информацию о кликах только с той страницы, к которой она привязана.

    • Oleg Mykhailenko пишет:

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

      • Антон пишет:

        Олег, спасибо за ответ, но вы меня немного не поняли.
        Дело в том, что у меня кнопка то отображается на всех страницах, но она дает одну и туже информацию, т.е. например лайкнули 4ре пользователя на главной странице, так и на всех остальных = автоматически проставляется 4ре лайка. Т.е. если например я лайкнул однажды, то другую страницу я уже не могу пометить, как – “нравится”, потому, что я уже делал это на главной. Т.е. кнопка лайка не уникальная везде, а одна и та же. Даже разные id у кнопок не помогают.

        • Антон пишет:

          А сайт мой = просто html ))

        • Oleg Mykhailenko пишет:

          Очень странно. У меня кнопка на Главной и на внутренних страницах не зависят друг от друга.
          Даже не знаю, что Вам конкретно подсказать в этом плане. Разве что посмотрите в полной документации: http://bit.ly/ep7NN7 в разделе “Дополнительные настройки“.

  2. Антон пишет:

    Олег, спасибо вам за ответы )
    Все решилось довольно быстро и просто, как говорится “сам виноват”, в коде данной кнопки можно поставить page_id, т.е. не id кнопки, а id страницы. У меня id страницы = одинаковая, потому и один и тот же счет на лайки ))
    Так, что поставил разные page_id на каждой странице и все встало на свои места )
    Еще раз спасибо!

    • Oleg Mykhailenko пишет:

      Не за что! ;) Значит, все-таки, предыдущий мой коммент с ссылкой на “Дополнительные настройки” Вам помог)) Я очень рад, что все получилось! Успехов! ;)

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

    Подскажите куда вставлять второю часть кода. первую вставил в Заголовок (header.php), а вторую надо вручную на каждую страницу ставить или можно в шаблоне где-то, что бы она автоматически в каждой записи появлялась?

    • Oleg Mykhailenko пишет:

      Нужно вставлять в шаблон. Если Вы хотите, чтобы кнопка отображалась в полной новости, то второй кусок кода нужно вставить в файл «single.php». Если на Главную (в коротких новостях), то в файл «index.php». Если на статических страницах, то в «page.php».

      • Дмитрий пишет:

        спасибо! но у меня потом проблема появилась, все кнопки были взаимно связаны, зашёл на http://bit.ly/ep7NN7 в разделе “Дополнительные настройки“ и сделал как там написано, всё работает! =)

        • Oleg Mykhailenko пишет:

          Ну, такая же проблема была и в Антона (комментарии выше) :) Хорошо, что и у Вас тоже все заработало!

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

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

  5. Юрий пишет:

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

    • Oleg Mykhailenko пишет:

      Нужно указать позиционирование справа:

      <div id="vk_like" style="float:right;"></div>

      А чтобы кнопка выводилась в начале поста, вставьте код кнопки в шаблоне перед функцией, которая отвечает за показ всего поста:

      <?php the_content(''); ?>
  6. KoffeIn пишет:

    Доброго времени суток! Есть вопрос, немного наверно не в тему, но все же может быть кто-то подскажет или направит где искать. Я новичок в этом деле, в верстке пока мало чего понимаю, в общем,суть такова:

    Хочу вывести на сайте кнопку Vk like сразу после поста.
    Ставлю код сразу после в single.php
    Все отображается так как нужно нареканий нет, НО…
    Когда я активирую плагин к примеру “Simple Tags” и включаю вывод related posts( в принципе не важно какой плагин, любой который выводит что-то после контента), то моя кнопка “Фкантакте” становиться после related posts.

    Подскажите пожалуйста как решить проблему???

    • Oleg Mykhailenko пишет:

      Смотрите внимательно в коде, скорей всего Вы просто вставили код кнопки после функции, которая отвечает за вызов “похожих постов” (related posts). Вам просто нужно код кнопки вставить перед функцией “related posts”. И будет Вам счастье ;)
      Чтобы быть 100% уверенным, вставляйте код кнопки сразу после вот этой функции:

      <?php the_content(''); ?>
      • KoffeIn пишет:

        Прошу прощения, я немного не корректно, оставил предыдущий коммент.
        Предложение должно было выглядеть так:
        ” Ставлю код сразу после

        <?php the_content(''); ?>

        в single.php”

        Так вот, вопрос в чем, вставил то я видимо все верно сразу после the_content, но при активации related posts плагин, то не добавляет никаких тэгов в single.php , то есть свое место расположение плагин получает каким-то другим способом (т.к я нуб ещё в php, не знаю как плагины выводятся в тело сайта ), но четко задано что related posts должен появиться после контента, и ему по сараю есть ли после контента какие то дивы с кнопочками “Фкантакта” и т.п. Так вот, к вопросу =), как объяснить плагину что там после контента есть ещё див, который приоритетом выше и что плагин должен расположить свой блок после него , а не перед ним?
        Прошу прощения, изложил суть проблемы слишком запутанно, т.к не силен в терминах =(
        Заранее Благодарю!

        • Oleg Mykhailenko пишет:

          Если я правильно понял Вашу проблему, то могу посоветовать следующее:
          создайте еще один див:

          <div style="clear:both;"></div>

          после дива с кнопкой “Вконтакте”, но перед дивом с плагином “related posts“.
          Этот див очистит с обеих сторон все элементы и тогда див с плагином должен стать на свое место.

          Кстати, я так и не понял, Вы добавили функцию вызова плагина “related posts” в “single.php” или нет?
          Если нет, то Вам конечно же нужно вставить её.
          Если Вы используете вот этот плагин: http://wordpress.org/extend/plugins/wordpress-23-related-posts-plugin/ , тогда функция вызова будет выглядит следующим образом:

          <?php if(function_exists('wp_related_posts')) { wp_related_posts(); } ?>

          В итоге:
          1. Вам нужно вставить див с кнопкой ВКонтакте.
          2. Вставить “очищающий” див.
          3. Вставить функцию вызова плагина “related posts“.

  7. deSiter пишет:

    Здравствуйте, Олег. Борюсь с этой кнопкой уже около месяца с переменным успехом))) В общем, изменение кода не помогает. Она всё также гордо располагается в одиночку на всей строке. Не знаете, что ещё можно с ней сотворить?

    • Oleg Mykhailenko пишет:

      Хммм, а мой совет по обтеканию не помог, да?
      Может у Вас в дивах с другими кнопками стоит правило?:

      div { clear:both; }

      Тогда его у них нужно убрать.

      • deSiter пишет:

        Про обтекание давно читал, и на другом моём блоге помог. А на том, что в подписи не помогает. В других дивах этого правила не нашёл. Надоело возиться – поставил кнопку в боковую панель, где она, как и хотела, в одиночку занимает всю строку.

  8. omarcheek пишет:

    Аналогично, попробовал, так как написано в тексте статьи, все равно кнопка гордо красуется на отдельной строке..
    А в отдельной строке она вообще не по фен-шую..
    что делать ?

  9. omarcheek пишет:

    решил проблему другим способом..

  10. omarcheek пишет:

    Убрал кнопку “мне нравится” и вместо нее поставил ряд кнопок “поделиться вконтакте”, “поделиться на фейсбуке ” и т.д.

    вручную вставил код в страницу ) и вуаля, эффект тот же

    код взял у Шакина, за что ему спасибо
    _http://shakin.ru/other/social-buttons.html