Привет! Сегодня я расскажу Вам, как быстро создать приложение и вставить кнопку "Мне нравится" от социальной сети ВКонтакте без лишних плагинов.
Может Вы заметили, я на днях, наконец-то, прикрутил данную кнопочку у себя после постов. "Наконец-то" я написал не даром, так как были проблемы с подключением данной кнопки к 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" повышает приоритет вашего стиля, т.е., Ваше правило в глазах браузера будет главным.
Ну, вроде бы все сказал, что хотел)))) Надеюсь, что Вы все поняли и у Вас получилось вставить кнопку!
А если Вам до вставки кнопки еще долго, так как своего сайта, пока что, нету, то, может быть, создание сайтов Чебоксары Вам в этом поможет.
ФИ: Михайленко Олег.
[...] This post was mentioned on Twitter by Natasha Klever and lex, Oleg Mykhailenko. Oleg Mykhailenko said: Вставляем кнопку "Мне нравится" от ВКонтакте в любое место Вашего сайта http://bit.ly/gxZe9F #like #vkontakte #WordPress #WP [...]
Полезно! Спасибо!
Ага, пожалуйста!
да спасибо, как раз хотел добавить такую кнопку)
Отлично, надеюсь мой мануал поможет
Олеже, а в чем разница между этой кнопкой и простой “Поделится”?
“Поделиться” – ты можешь создать заметку в своем профиле + опубликовать упоминание с ссылкой на стене.
“Мне нравится” – аналог фейсбучного лайка, так сказать, “+1″ + ты можешь также опубликовать твой лайк с ссылкой на стене.
Ну так насколько я знаю, жмакая на “поделится” ты так-же публикуешь запись у себя на стене + добавляется “+1″ к счетчику.
Тут наверняка главная фишка в том, что ты можешь видеть кто плюсанул?
Когда жмакаешь на “Поделиться”, ты можешь отмечать галочками, публиковать ли на стене/заметке. Ну, а в “Мне нравится” ты можешь только плюсануть и если хочешь на стену добавить, ну и + как ты правильно подметил, тут еще лица людей можешь видеть
ВОТ ЗА ЭТО – СПАСИБО!
Вот за это – пожалуйста!)))))))
Спасибо, благодарен за небольшой мануальчик)
Пожалуйста!
Все эти плюсовалки бесполезны пока не будет виджета с рейтингом записей.
А кнопку можно не добавлять – такая функция есть в пакете addthis.com – чт гораздо лучше.
А как контактовский виджет сможет подсчитывать рейтинг записей на сторонних сайтах? По количеству проголосовавших?
Для рейтинга есть свой функционал в ВП или же плагины, можно их поставить и не парить мозги. Уверен, что на многих движках есть и свои модули с рейтингами.
Когда-то юзал “addthis”, бесполезная вещь в русскоязычном сегменте. Практически за год кнопкой воспользовались только 10 раз. Пока с того огромнейшего списка выберешь, что тебе нужно, то уже и перехочется делится материалом в соц. сетях.
Add This может теперь и стала полезной. Тут автор рассказывается как добавить виджет Мне нравится прямо в функционал AddThis _http://spiderlab.ru/component/content/article/49-joomla/65-add-a-button-counter-vkontakte-like-a-social-bookmarking-service-addthis
Ну, наконец-то я понял, почему у меня эта кнопка ставилась криво.
Спасибо!
Ооо, я не один такой))
отличный рерайт оф справки)
Здесь с картинками
Очень часто подобные посты намного понятнее, чем официальная справка от сервисов.
И чаще это не зависит от качества справки, а лишь подтверждает уровень тех, кто ставит подобные вещи
Ну не могут же все хорошо разбираться в интеграции подобных фишек на свои сайты.
В этом и проблема, что такие “фишки” все еще в почете у русских блоггеров, как, например и смайлы в комментариях.
В чем проблема то?
Ага, а аналоговые фейсбуковские кнопки на западных блогах, нормальный тон, да?
А что плохого в смайлах. Чем они мешают?
Было полезно.
Воспользовался.
Заодно добавил твиттер и фейсбук до кучи )