Веб-додаток розміром з пигмея

Ще тижня не минуло з анонсу нових методів api вконтакте. Для власників спільнот викотили можливість підписувати користувачів на повідомлення від спільноти, що дає право власникам писати передплатникам необмежено. Не за горами програми, ака розсилки передплатникам спільноти, зі статистикою, шаблонами, відкладеної розсиланням і взагалі.

Бренди, блогери і ще хто-небудь почнуть збирати бази передплатників. У цій статті я розповім як створити крихітне, але функціональне додаток генеруюче лендінгем c кнопкою підписки на повідомлення від спільноти. Ака лендінгем пейдж для відвідувачів з вк.

image

Погнали
Нам потрібно хвилин 15 на збірку, домен, хостинг, токен-ключ спільноти вк і скільки-то часу для CSS-стилів.

Токен-ключ потрібен для керування спільнотою і відправлення запитів до вк api від імені спільноти. Він Нам буде потрібно один раз, щоб дізнатися id спільноти користувача. Створити його просто, потрібно зайти в управління спільнотою вконтакте і натиснути створити ключ в розділі робота з api. Зробіть це в одному зі своїх спільнот або створіть нове під це діло.

image
Отриманий токен не для чужих очей
Код віджету «Дозволити писати спільноті» дуже простий і виглядає наступним чином.
Де 53495256 — це унікальний id спільноти. Замість цих цифр ми підставимо id будь-якої спільноти для якого генеруємо сторінку підписки.

< script type="text/javascript" src="//vk.com/js/api/openapi.js?133"></script>
<!-- VK Widget -->
<div id="vk_allow_messages_from_community"></div>
<script type="text/javascript">
VK.Widgets.AllowMessagesFromCommunity("vk_allow_messages_from_community", {height: 30}, 53495256);
</script>

Щоб не писати для користувачів програми величезних інструкцій як отримати id їх спільноти ми зробимо все за них. Простіше попросити їх скопіювати короткий адреса співтовариства і створити посилання виду домен_вашего_приложения/короткий_адрес/, де короткий адреса — це адреса їх спільноти вконтакте.

Якщо хтось буде заходити на ваш сайт, то буде подгружаться те співтовариство, чий токен ви використовуєте. І обов'язково у налаштуваннях кожного співтовариства, хто буде користуватися вашим додатком, повинна бути включена опція дозволити використання віджету.

image
Нам залишається небагато:

  1. Отримати короткий адреса товариства з рядка браузера.
  2. Зробити запит до api вк і дізнатися id спільноти.
  3. Підставити отримані дані в віджет.
Створимо файл .htaccess і задамо конфігурацію, щоб сервер розумів наш задум.

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteRule ^([^/]+)/$ /index.php?vkgr=$1 [L]
</IfModule>

Тоді для нас посилання домен_вашего_приложения/habr/ перетвориться в домен_вашего_приложения/?vkgr=habr. Отримаємо дані з GET. Тепер зберемо запит через file_get_contents() до вк api і дізнаємося деякі дані про співтовариство. Візьмемо назву, опис та кількість користувачів. Так на сторінці ми зможемо додати більше інформації для відвідувачів, ніж просто кнопку віджета «Дозволити писати спільноті». ВКонтакте повертає дані форматі json, потрібно обробити дані.

if (isset($_GET['vkgr'])) {
$group = htmlspecialchars(trim($_GET['vkgr']));
}
// токен вигаданий, вставити свій
$token = "b98908abcbcbasbbxabbcbabbabbb247823479823aasdasdwe345345345345354353345345345345353453";
$fields = "description,members_count";
$v = 5.58;
$url = 'https://api.vk.com/method/groups.getById?group_id='.$group.'&fields='.$fields.'&access_token='.$token.'&v='.$v;
$about = file_get_contents($url);
$result = json_decode($about, true);

Тепер залишилося зробити сторінку і підставити дані в потрібне місце. У мене буде така розмітка.

<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* для IE6-7 */
.clearfix {
zoom: 1;
}
.section {
width: 700px;
margin: 150px auto 0px;
min-height: 500px;
box-shadow: 0px 0px 3px 2px #eaeaea;
border-radius: 3px;
padding-top: 50px;
background: #fff;
}
.block-1 {
float: left;
width: 200px;
background-size: cover;
margin-left: 50px;
background-repeat: no-repeat;
}
.block-2 {
float: left;
margin-left: 50px;
width: 350px;
}
p.zag-gr {
font-size: 24px;
margin-bottom: 10px;
}
p.edsc-gr {
font-size: 16px;
padding-right: 20px;
}
p.count {
display: block;
width: 100%;
padding: 10px;
background: #f8384f;
color: #fff;
text-align: center;
border-radius: 3px;
}
.block-1 img {
display: block;
border-radius: 4px;
margin-bottom: 10px;
border: 1px solid #e0e0e0;
}
.btn-vk {
margin:60px auto;
display: block;
width: 195px;
}
</style>
<div class="section">
<div class="clearfix">
<div class="block-1">
<img src="<?=$result['response'][0]['photo_200']?>" alt="" width="200" height="200">
<p class="count"><?=$result['response'][0]['members_count'];?></p> 
</div>
<div class="block-2">
<p class="zag-gr"><?=$result['response'][0]['name'];?></p>
<p class="edsc-gr"><?=$result['response'][0]['description'];?></p> 
</div> 
</div>
<div class="btn-vk">
<!-- VK Widget -->
<div id="vk_allow_messages_from_community"></div>
<script type="text/javascript">
VK.Widgets.AllowMessagesFromCommunity("vk_allow_messages_from_community", {height: 30}, <?=$result['response'][0]['id'];?>);
</script> 
</div>
</div>

Скористаюся отриманими даними про співтоваристві. Опис дасть відвідувачам зрозуміти на що вони підписуються, а кількість передплатників отакий сошиал пруф.

image
Далі залишається справа смаку. Погратися зі стилями. Додав іконки, бекграунд, підключив шрифти і ось що вийшло.

image
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.