Рассмотрим интеграцию VK API на примере компонента публикации на странице ВКонтакте авторизованного пользователя.
Первым делом, регистрируемся/авторизуемся во ВКонтакте (Интеграция ВКонтакте обязательно подразумевает авторизацию в сервисе). После переходим в мои приложения. Создаём приложение, платформа “Веб-сайт”. Важно правильно указать Адрес сайта и Базовый домен. Компонент работает исключительно на указанных адресах.
После создания приложения в левом меню необходимо выбрать пункт “Настройки”. После открытия настроек вы увидите ваш ID приложения. Выпишите. Это APP ID он необходим для инициализации компонента.
Теперь приступим к технической части темы. Для работы компонента необходимо подключить VK API:
<script src="https://vk.com/js/api/openapi.js" type="text/javascript"></script> <script type="text/javascript" src="https://vk.com/js/api/share.js?90" charset="windows-1251"></script>
Подключаем сам компонент:
<script> var isLogin = false; var postVK = { init: function (param) { VK.init({ apiId: param, // app id }); VK.Auth.getLoginStatus(function (response) { if (response.status == 'connected') { isLogin = true; } }); }, // Пример публикации по клику onClick: function () { if (isLogin) { as.postVK.sendWallPost(); } else { as.postVK.doLogin(); } }, // Инициализация входа doLogin: function () { VK.Auth.login(function (response) { if (response.status == 'connected') { isLogin = true; } }) }, // Публикация на стене юзера sendWallPost: function () { VK.api("wall.post", { message: "Message" }, function (data) { if (data.response) { alert("Success") } else { alert("Fail") } }); }, }; </script>
Инициализируем компонент. APP ID:
<script> $(function () { postVK.init(000000); // app id }); </script>
И конечно же в теле страницы создаём кнопку, по которой будет происходить публикация:
<button class="" onclick="postVK.onClick">Опубликовать</button>
Важно. Не пытайтесь тестировать работу API локально. VK обрабатывает запросы только с базового домена, который указывался при создании приложения.
Ссылки, которые могут пригодится:
- Документация API VK;
- Документация по методу публикации, который используй в компоненте.