Как сделать кнопку ВК для сайта

Небольшой тьюториал с инструкцией по добавлению виджета Вконтакте «Нравится» на сайт

Как сделать кнопку ВК

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

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

Создание приложения

Для начала перейдем по ссылке «Разработчикам» (находится внизу интерфейса) и выберем вкладку «Мои приложения». Если ранее вы не создавали виджеты ВК, список приложений будет пуст. Вам необходимо создать новое. Сделать это можно, кликнув по ссылке «Создать приложение».

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

Создание виджета

Откроем вкладку «Документация» и выберем подраздел «Сайты и виджеты». В блоке «Виджеты для сайта» выберем необходимый виджет – «Мне нравится».

В открывшейся форме выберем наше приложение, вариант кнопки и ее оформление. Из текстового блока заберем код для вставки.

Размещение виджета в шаблоне Котонти

Откроем шаблон header.tpl и в блоке head разместим код, который примерно выглядит так:

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?116"></script>
<script type="text/javascript">
	VK.init({apiId: 4752432, onlyWidgets: true});
</script>

Там, где необходимо разместить непосредственно саму кнопку лайков, например в шаблоне page.tpl, добавим код:

<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "mini"});
</script>

Вот и все, удачной верстки!

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.

К посту «Как сделать кнопку ВК для сайта» комментариев пока нет

Новый комментарий

Для редактирования комментария осталось 10 минут