Pygmy-sized web application
Another week has not passed since the announcement of the new api VKontakte methods. For community owners, the ability to subscribe users to notifications from the community has been rolled out, which gives owners the right to write to subscribers unlimitedly. The application is just around the corner, aka mailing by community subscribers, with statistics, templates, delayed mailing and in general.
Brands, bloggers and someone else will start collecting subscriber bases. In this article I will tell you how to create a tiny, but functional application that generates a landing page with a button to subscribe to messages from the community. Aka Landing Page for visitors with VC.
We need about 15 minutes to build, domain, hosting, community token-key vk and some time for CSS styles.
')
The token key is needed to manage the community and send requests to VK api on behalf of the community. We need it once to find out the community ID of the user. It’s easy to create it, you need to go to the VKontakte community management and click on create a key in the section working with api. Do this in one of your communities or create a new one for this business.
The code for the “Allow community write” widget is very simple and looks like this.
Where 53495256 is a unique community id. Instead of these numbers, we substitute the id of any community for which we generate a subscription page.
In order not to write for users of the application huge instructions on how to get the id of their community, we will do everything for them. It is easier to ask them to copy the short community address and create a link like your_domain_application / short_address /, where the short address is the address of their VKontakte community.
If someone comes directly to your site, then the community whose token you are using will be uploaded. And surely in the settings of each community who will use your application, the option to allow the use of the widget should be enabled.
It remains for us a little:
Create a .htaccess file and set the configuration so that the server understands our intention.
Then for us the link your_domain_application / habr / turns into the_domain_of your_application /? Vkgr = habr. Get data from GET. Now we will collect the request via file_get_contents () to VK api and find out some information about the community. Take the name, description and number of users. So on the page we can add more information for visitors than just the button “Allow community write” widget. VKontakte returns data in json format, you need to process the data.
Now it is necessary to concoct a page and substitute the data in the right place. I will have this markup.
I will use the obtained data about the community. The description will give visitors an idea of ​​what they are subscribing to, and the number of subscribers is a sort of social support.
Next is the matter of taste. Play with styles. I added icons, backgrounds, connected fonts and this is what happened.
Brands, bloggers and someone else will start collecting subscriber bases. In this article I will tell you how to create a tiny, but functional application that generates a landing page with a button to subscribe to messages from the community. Aka Landing Page for visitors with VC.
Drove off
We need about 15 minutes to build, domain, hosting, community token-key vk and some time for CSS styles.
')
The token key is needed to manage the community and send requests to VK api on behalf of the community. We need it once to find out the community ID of the user. It’s easy to create it, you need to go to the VKontakte community management and click on create a key in the section working with api. Do this in one of your communities or create a new one for this business.
The resulting token is not for prying eyes
The code for the “Allow community write” widget is very simple and looks like this.
Where 53495256 is a unique community id. Instead of these numbers, we substitute the id of any community for which we generate a subscription page.
<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> In order not to write for users of the application huge instructions on how to get the id of their community, we will do everything for them. It is easier to ask them to copy the short community address and create a link like your_domain_application / short_address /, where the short address is the address of their VKontakte community.
If someone comes directly to your site, then the community whose token you are using will be uploaded. And surely in the settings of each community who will use your application, the option to allow the use of the widget should be enabled.
It remains for us a little:
- Get a short community address from a browser string.
- Make a request to api vk and find out the community id.
- Substitute the data in the widget.
Create a .htaccess file and set the configuration so that the server understands our intention.
<IfModule mod_rewrite.c> RewriteEngine on RewriteBase / RewriteRule ^([^/]+)/$ /index.php?vkgr=$1 [L] </IfModule> Then for us the link your_domain_application / habr / turns into the_domain_of your_application /? Vkgr = habr. Get data from GET. Now we will collect the request via file_get_contents () to VK api and find out some information about the community. Take the name, description and number of users. So on the page we can add more information for visitors than just the button “Allow community write” widget. VKontakte returns data in json format, you need to process the data.
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); Now it is necessary to concoct a page and substitute the data in the right place. I will have this markup.
<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> I will use the obtained data about the community. The description will give visitors an idea of ​​what they are subscribing to, and the number of subscribers is a sort of social support.
Next is the matter of taste. Play with styles. I added icons, backgrounds, connected fonts and this is what happened.
Source: https://habr.com/ru/post/312974/
All Articles