Привет! Сегодня я расскажу Вам, как быстро создать приложение и вставить кнопку "Мне нравится" от социальной сети ВКонтакте без лишних плагинов.
Может Вы заметили, я на днях, наконец-то, прикрутил данную кнопочку у себя после постов. "Наконец-то" я написал не даром, так как были проблемы с подключением данной кнопки к API ВКонтакте, в результате чего я получал надпись "Open API security breach" и бесконечно бегающий прогресс-бар. Как оказалось, все дело было в банальном написании адреса сайта в настройках "Open API" в самом ВКонтакте (об этом я напишу чуть ниже).
Итак, давайте прикрутим кнопку "Мне нравится".
Для начала зайдем через свой профиль в ВК (обязательно через свой, так как нам нужно будет создавать приложение). Далее переходим на страничку создания виджета и видим подобную форму:
Первое поле "Сайт/приложение" - здесь мы сразу же сможем создать приложение без лишних телодвижений, но Вы знаете, я так поклацал и оно создается как-то через *опу криво.
Создание и настройка приложения
Так что лучше сделаем лишние телодвижения и идем на страницу создания приложения, вписываем любое название в соответствующее поле, далее выбираем тип: "Веб-сайт", и заполняем поле с описанием, но это не обязательно. Далее жмем "Перейти к загрузке приложения" и вводим каптчу.
Все! Приложение создано и перед нами форма с его настройкой:
Первая вкладка "Информация", она у Вас сейчас активна, можете загрузить иконку для приложения, вписать данные, выбрать группу.
Следующая вкладка "Настройки", она самая важная! Обратите внимание, в самом верху жирным выделен ID номер Вашего приложения (он и будет коннектить Вашу кнопку), далее идет "Защищенный ключ", его не трогайте.
Далее "Настройки 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" повышает приоритет вашего стиля, т.е., Ваше правило в глазах браузера будет главным.
Ну, вроде бы все сказал, что хотел)))) Надеюсь, что Вы все поняли и у Вас получилось вставить кнопку!
А если Вам до вставки кнопки еще долго, так как своего сайта, пока что, нету, то, может быть, создание сайтов Чебоксары Вам в этом поможет.
ФИ: Михайленко Олег.
Приветствую, а подскажите, как мне поставить кнопку “мне нравится” от вконтакте на разные страницы, чтобы на разных страницах она была уникальной, т.е. собирала информацию о кликах только с той страницы, к которой она привязана.
Ну, если Вы используете на сайте любой из популярных движков, то в файле шаблона, который отвечает за вывод полной новости, т.е., страницы, Вам нужно вставить код данной кнопки. Тогда на всех страницах будет выводиться эта кнопка.
Олег, спасибо за ответ, но вы меня немного не поняли.
Дело в том, что у меня кнопка то отображается на всех страницах, но она дает одну и туже информацию, т.е. например лайкнули 4ре пользователя на главной странице, так и на всех остальных = автоматически проставляется 4ре лайка. Т.е. если например я лайкнул однажды, то другую страницу я уже не могу пометить, как – “нравится”, потому, что я уже делал это на главной. Т.е. кнопка лайка не уникальная везде, а одна и та же. Даже разные id у кнопок не помогают.
А сайт мой = просто html ))
Очень странно. У меня кнопка на Главной и на внутренних страницах не зависят друг от друга.
Даже не знаю, что Вам конкретно подсказать в этом плане. Разве что посмотрите в полной документации: http://bit.ly/ep7NN7 в разделе “Дополнительные настройки“.
Олег, спасибо вам за ответы )
Все решилось довольно быстро и просто, как говорится “сам виноват”, в коде данной кнопки можно поставить page_id, т.е. не id кнопки, а id страницы. У меня id страницы = одинаковая, потому и один и тот же счет на лайки ))
Так, что поставил разные page_id на каждой странице и все встало на свои места )
Еще раз спасибо!
Не за что!
Значит, все-таки, предыдущий мой коммент с ссылкой на “Дополнительные настройки” Вам помог)) Я очень рад, что все получилось! Успехов! 
Подскажите куда вставлять второю часть кода. первую вставил в Заголовок (header.php), а вторую надо вручную на каждую страницу ставить или можно в шаблоне где-то, что бы она автоматически в каждой записи появлялась?
Нужно вставлять в шаблон. Если Вы хотите, чтобы кнопка отображалась в полной новости, то второй кусок кода нужно вставить в файл «single.php». Если на Главную (в коротких новостях), то в файл «index.php». Если на статических страницах, то в «page.php».
спасибо! но у меня потом проблема появилась, все кнопки были взаимно связаны, зашёл на http://bit.ly/ep7NN7 в разделе “Дополнительные настройки“ и сделал как там написано, всё работает!
Ну, такая же проблема была и в Антона (комментарии выше)
Хорошо, что и у Вас тоже все заработало!
Проблема похожа, но решение было абсолютно другим. Пришлось код по-другому поделить, первая часть стала короче, не знаю почему но в вашей статье и на сайте в контакте по разному написано. Огромное спасибо за помощь!
Пожалуйста!
Странно, я писал на основе их документации.
подскажи пожалуйста как нужно изменить код чтобы кнопка выводилась в начале поста и справа, а не слева как по умолчанию?
Нужно указать позиционирование справа:
А чтобы кнопка выводилась в начале поста, вставьте код кнопки в шаблоне перед функцией, которая отвечает за показ всего поста:
<?php the_content(''); ?>Доброго времени суток! Есть вопрос, немного наверно не в тему, но все же может быть кто-то подскажет или направит где искать. Я новичок в этом деле, в верстке пока мало чего понимаю, в общем,суть такова:
Хочу вывести на сайте кнопку Vk like сразу после поста.
Ставлю код сразу после в single.php
Все отображается так как нужно нареканий нет, НО…
Когда я активирую плагин к примеру “Simple Tags” и включаю вывод related posts( в принципе не важно какой плагин, любой который выводит что-то после контента), то моя кнопка “Фкантакте” становиться после related posts.
Подскажите пожалуйста как решить проблему???
Смотрите внимательно в коде, скорей всего Вы просто вставили код кнопки после функции, которая отвечает за вызов “похожих постов” (related posts). Вам просто нужно код кнопки вставить перед функцией “related posts”. И будет Вам счастье
Чтобы быть 100% уверенным, вставляйте код кнопки сразу после вот этой функции:
<?php the_content(''); ?>Прошу прощения, я немного не корректно, оставил предыдущий коммент.
Предложение должно было выглядеть так:
” Ставлю код сразу после
<?php the_content(''); ?>в single.php”
Так вот, вопрос в чем, вставил то я видимо все верно сразу после the_content, но при активации related posts плагин, то не добавляет никаких тэгов в single.php , то есть свое место расположение плагин получает каким-то другим способом (т.к я нуб ещё в php, не знаю как плагины выводятся в тело сайта ), но четко задано что related posts должен появиться после контента, и ему по сараю есть ли после контента какие то дивы с кнопочками “Фкантакта” и т.п. Так вот, к вопросу =), как объяснить плагину что там после контента есть ещё див, который приоритетом выше и что плагин должен расположить свой блок после него , а не перед ним?
Прошу прощения, изложил суть проблемы слишком запутанно, т.к не силен в терминах =(
Заранее Благодарю!
Если я правильно понял Вашу проблему, то могу посоветовать следующее:
создайте еще один див:
после дива с кнопкой “Вконтакте”, но перед дивом с плагином “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“.
Здравствуйте, Олег. Борюсь с этой кнопкой уже около месяца с переменным успехом))) В общем, изменение кода не помогает. Она всё также гордо располагается в одиночку на всей строке. Не знаете, что ещё можно с ней сотворить?
Хммм, а мой совет по обтеканию не помог, да?
Может у Вас в дивах с другими кнопками стоит правило?:
div { clear:both; }Тогда его у них нужно убрать.
Про обтекание давно читал, и на другом моём блоге помог. А на том, что в подписи не помогает. В других дивах этого правила не нашёл. Надоело возиться – поставил кнопку в боковую панель, где она, как и хотела, в одиночку занимает всю строку.
Аналогично, попробовал, так как написано в тексте статьи, все равно кнопка гордо красуется на отдельной строке..
А в отдельной строке она вообще не по фен-шую..
что делать ?
Хмм, а можно ссылочку? Хочу посмотреть.
решил проблему другим способом..
Каким, если не секрет?
Убрал кнопку “мне нравится” и вместо нее поставил ряд кнопок “поделиться вконтакте”, “поделиться на фейсбуке ” и т.д.
вручную вставил код в страницу ) и вуаля, эффект тот же
код взял у Шакина, за что ему спасибо
_http://shakin.ru/other/social-buttons.html
Спасибо за ссылочку