ブランド、ブロガー、その他の誰もが加入者データベースの構築を開始します。 この記事では、コミュニティからのメッセージを購読するためのボタンを備えたランディングページを生成する、小さくても機能的なアプリケーションを作成する方法を説明します。 VKを使用した訪問者の別名ランディングページ。
運転した
ドメイン、ホスティング、VKコミュニティトークンの構築、CSSスタイルの作成には約15分かかります。
トークンキーは、コミュニティを管理し、コミュニティに代わってvk apiにリクエストを送信するために必要です。 ユーザーコミュニティIDを見つけるために一度必要です。 作成は簡単です。VKontakteコミュニティ管理に移動し、[apiの操作]セクションで[キーの作成]をクリックするだけです。 コミュニティの1つで行うか、このビジネス用に新しいコミュニティを作成してください。
受信したトークンは、pr索好きな目用ではありません
「コミュニティによる書き込みを許可」ウィジェットのコードは非常にシンプルで、次のようになります。
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を取得する方法についての大きな指示を書かないために、私たちは彼らのためにすべてをします。 コミュニティのショートアドレスをコピーして、your_application_domain / short_address /という形式のリンクを作成するように依頼する方が簡単です。ここで、ショートアドレスはVKontakteコミュニティのアドレスです。
誰かがあなたのサイトに直接アクセスすると、トークンを使用しているコミュニティがロードされます。 また、アプリケーションを使用する各コミュニティの設定でウィジェットの使用を許可するオプションを有効にしてください。
少し残っています。
- ブラウザバーからコミュニティの短いアドレスを取得します。
- VK APIにリクエストを行い、コミュニティIDを見つけます。
- ウィジェット内の受信データを置き換えます。
.htaccessファイルを作成し、サーバーが意図を理解できるように構成します。
<IfModule mod_rewrite.c> RewriteEngine on RewriteBase / RewriteRule ^([^/]+)/$ /index.php?vkgr=$1 [L] </IfModule>
次に、リンクyour_domain_name / habr /がdomain_your_application /？Vkgr = habrに変わります。 GETからデータを取得します。 ここで、file_get_contents（）を介してvk apiにリクエストを収集し、コミュニティに関するデータを見つけます。 ユーザーの名前、説明、および数を取得します。 そのため、ページでは、「コミュニティへの書き込みを許可」ウィジェットのボタンだけでなく、より多くの情報を訪問者に追加できます。 VKontakteは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>
コミュニティデータを活用します。 この説明により、訪問者は購読しているものを理解でき、購読者の数は一種の社会的証拠です。
次は好みの問題です。 スタイルで遊ぶ。 追加されたアイコン、背景、接続されたフォント、そしてそれが起こったことです。
