Привет! Сегодня я расскажу Вам, как быстро создать приложение и вставить кнопку "Мне нравится" от социальной сети ВКонтакте без лишних плагинов.
Может Вы заметили, я на днях, наконец-то, прикрутил данную кнопочку у себя после постов. "Наконец-то" я написал не даром, так как были проблемы с подключением данной кнопки к 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" повышает приоритет вашего стиля, т.е., Ваше правило в глазах браузера будет главным.
Ну, вроде бы все сказал, что хотел)))) Надеюсь, что Вы все поняли и у Вас получилось вставить кнопку!
А если Вам до вставки кнопки еще долго, так как своего сайта, пока что, нету, то, может быть, создание сайтов Чебоксары Вам в этом поможет.
ФИ: Михайленко Олег.
Доброго времени суток! Проблема уже обсуждалась тут http://www.mykhailenko.com/blog/2010-12-15/insert-vkontakte-like-button.html/comment-page-3#comment-16762 но я никак не поуму, куда и как прописать этот page_id подскажите?
Я выше приводил ссылку на Документацию по кнопке: http://bit.ly/ep7NN7
Там описывается где и куда вставлять “page_id “. В примере есть “321″ – это и есть ID страницы.
привет. большое спасибо за подробное объяснение! кнопку настроил. но вот в один ряд ее поставить не получается (как вы описывали)… сайт делаю на блоггере
Можно создать “табличку”, то бишь
у меня другая проблема. или я не так что-то делаю – хотя не знаю как это можно или … кароче. если делать кнопку, допустим в ФБ, то при нажатии на кнопку будет идти переадресация на весь сайт, а не на отдельную статью где эта кнопка стоит. я пля задолбаюсь ставить эту кнопку в каждую статью. может у кого решение есть???
Код моей blogger-кнопки: http://pastie.org/1750356
Скажите што лучше кнопка “Мне нравится” или кнопка “Сохранить”
Смотря какие цели вы преследуете) С помощью “Мне нравится” вы сможете делиться ссылкой у себя на стене. А вот с помощью “Сохранить” вы сможете сохранять ссылку, как заметку, а также публиковать у себя на стене.
А если два домена на один сайт, как сделать чтобы счетчик считал все вместе?
Точно ответить не могу, возможно через параметр “page_id”. Описание в документации плагина: http://vkontakte.ru/pages.php?o=-1&p=%C4%EE%EA%F3%EC%E5%ED%F2%E0%F6%E8%FF%20%EA%20%E2%E8%E4%E6%E5%F2%F3%20%CC%ED%E5%20%ED%F0%E0%E2%E8%F2%F1%FF
Добрый вечер! Застрял на кнопках. Задача состоит в следующем: прилепить на сайт 4 кнопки (2 контакт, 2 фейсбук) -2 мне нарвится и 2 рассказать друзья (контакт+ фейсбук). Помогите, пожалуйста, нигде не найду код кнопки “рассказать другу” как для контакта так и для фейсбука. Заранее спасибо.
Здравствуйте!
Для Контакта: http://vkontakte.ru/developers.php?o=-1&p=Share
Фейсбук убрал с документации данную кнопку, вместо неё теперь “Лайк”: http://developers.facebook.com/docs/reference/plugins/like/
Но, если у вас WordPress, то можете воспользоваться вот этим плагином: http://wordpress.org/extend/plugins/facebook-fb-share-wordpress-plugin/ для Фейсбука. Хоть кнопка и убрана с официальной документации Фейсбук, но этот плагин работает
Как вытащить список всех людей, которые кликнули “мне нравится” на моем сайте? в OpenAPI не разбираюсь.
Сам не пробовал, так что не подскажу, извините. Нужно изучать документацию: http://vkontakte.ru/pages.php?o=-1&p=likes.getList
Вечер добрый.
Есть необходимость разместить у себя кнопку “Мне нравится” для сторонней страницы. Т.е. – страницы своего друга, к исходнику которой у меня нет. Правильно понимаю, что для размещения кнопки у себя на сайте, – нужно знать “apiId: ID__ВАШЕГО_ПРИЛОЖЕНИЯ”?
Вопрос в следующем, можно ли его узнать без доступа к странице-исходника?
Здравствуйте! Сейчас я вижу только 2 способа:
Первый: зайти на сайт друга, открыть исходный код страницы посредством браузера и найти похожий код:
<script type="text/javascript"> VK.init({apiId: ТРЕБУЕМЫЙ_ID, onlyWidgets: true}); </script>Этот код обычно размещается вверху страницы, внутри тега
Но это сработает в том случае, если у Вашего друга на сайте установлена кнопка “Мне нравится”.
Второй способ: На странице настройки виджета в поле “Сайт/приложение:” выбрать “Подключить новый сайт“, заполнить соответствующие поля и “Сохранить“. По идее, должен присвоится ID для сайта, который Вы внесете в поля. Но я точно не уверен, что сработает, нужно пробовать
Получилось, с помощью первого способа.
Спасибо большое.
Возник второй вопрос, может сталкивались – как у себя на странице разместить кнопку “Мне нравится” на фотографию со страницы Пользователя вКонтакте – или неправильно смотрю, или не там – найти указаннуювами конструкция с апи-айди не могу…
На самой странице пользователя ВКонтакте вы и не найдете этот айди. Он размещается только на сайтах, которые используют функциональные кнопки и/или виджеты от ВКонтакте.
Такой бред этот вконтакте, чтобы разместить кнопку обыкновенную нужен apiId и на локалхосте не протестируешь.
Привет, Олег. Не могу никак вставить эту кнопку на свой сайт.
Движок Word Press.
Какую часть кода и в какой именно php файл надо вставлять?
Привет.
Я в посте описал какие куски кода куда вставлять. Первый кусок в файл “header.php” внутри тега:
Второй кусок – в тот файл шаблона, в котором должна отображаться кнопка. Обычно это “single.php” и “page.php“.
Классный плагин. Все работает.