Виджет комментариев вконтакте для вашего сайта и хранение количества комментариев на сервере

Сегодня хочу рассказать Вам о том как установить комментарии вконтакте на сайте и показать статистику одного своего сайта.

Честно сказать я даже не думал что будет какой-то ощутимый результат от этого виджета… но об этом немного позднее.

И так начнем по порядку.

У меня есть сайт развлекательной тематики и проблема в том, что через стандартную форму комментариев, за месяц оставляли около 20 комментов.Что очень мало как мне кажется, особенно если учесть что на других сайтах схожей тематики в каждой публикации минимум по 5-10 комментов.

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

И тут на одном сайте СМИ тематики я увидел форму комментариев от вконтакте. Я прочитал на том сайте новость и легко отправил свой комментарий. И до меня дошло, что как все это просто и удобно.

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

А вот аккаунт вконтакте есть у всех (за исключением некоторых особей которые игнорируют соц. сети ) и мы всегда там авторизованны.

Так почему же не поставить виджет комментариев вконтакте на свой сайт и облегчить ВАШИМ посетителем жизнь? Или хотя бы поставить на неделю, чтобы посмотреть какой от него будет толк? Тем более займет это все несколько минут вашего драгоценного времени.

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

Размещение виджетов во вкладках используя jquery

Мне больше нравится вариант, если эти формы комментирования раскидать по вкладкам, чтобы это выглядело вот так:

$(function(){ $(‘dl.tabs dt’).click(function(){ $(this).siblings().removeClass(‘selected’).end().next(‘dd’).andSelf().addClass(‘selected’); }); });

Если jquery уже определен в шаблоне то можно прописать только вот это:

$(function(){ $(‘dl.tabs dt’).click(function(){ $(this).siblings().removeClass(‘selected’).end().next(‘dd’).andSelf().addClass(‘selected’); }); });

Если не заработает, то вместо знака доллара «$» пишем «jQuery» вот так:

jQuery(function(){ jQuery(‘dl.tabs dt’).click(function(){ jQuery(this).siblings().removeClass(‘selected’).end().next(‘dd’).andSelf().addClass(‘selected’); }); });

В файле style.css пишем этот код:

#page {width:70%;margin:10px auto;} .tabs {width:100%;overflow:hidden;font-size:0.9em;margin:2em 0;zoom:1;padding:1px;position:relative;} .tabs dt {float:left;line-height:2;height:2em;background:#e8f0f5;border:1px solid #e8f0f5;border-bottom:0;padding:0 1em;position:relative;left:35px;margin-right:1px;cursor:pointer; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px;} .tabs dt:hover {background-color:#bfdff4;} .tabs dt.selected {border-color:#b0d0e9;background:#fff;z-index:3;cursor:auto;} .tabs dd {background:#fff;display:none;float:right;width:100%;margin:2em 0 0 -100%;position:relative;z-index:2;} .tabs dd.selected {display:block;} .tabs .tab-content {border:1px solid #b0d0e9;padding:20px; -webkit-border-radius:20px; -moz-border-radius:20px;}

В файле comments.php пишем вот это:

Приложения для виджетов

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

«Виджет в сообществе»

Это самое простое бесплатное приложение, содержащее 4 шаблона для виджетов.

Даже несмотря на свою простоту, это приложение весьма полезно и обладает достаточным функционалом для закрытия большинства потребностей.

Отзывы

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

Spycat

Данное приложение позиционирует себя как конструктор лид-виджетов для сообществ ВКонтакте. Внутри доступно 9 различных шаблонов для виджетов. Однако из представленных шаблонов бесплатен лишь текстовый виджет приветствие. Ежемесячная стоимость приложения — 590 рублей.

В будущем SpyCat обещают автоматическую сегментацию аудитории в зависимости от характеристик пользователя. Иначе говоря, пол, возраст, место проживания посетителя сообщества будет влиять на то, какая информация будет представлена в сообществе специально для данного пользователя.

HotWidgets – Конструктор

На текущий момент — это самое мощное и развитое приложение как по функционалу, так и по количеству доступных виджетов. Всего планируется 8 бесплатных виджетов (сейчас доступно 6). Платных виджетов на текущий момент 7 штук. Суммарно 15 различных виджетов.

Кроме того, в данном приложении доступна платная возможность написания виджетов с абсолютного нуля. Это полезный инструмент для тех, кто владеет необходимыми знаниями в сфере разработки.

Стоимость доступа к платным сервисам 399 рублей в месяц.

Виджеты сбора подписчиков для рассылки

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

Какой виджет выбрать

Не существует какого-либо железного правила, какой виджет подходит тому или иному бизнесу. Главная рекомендация — отталкивайтесь от потребностей вашего бизнеса.

Например, если необходимо показать новинки товара, то однозначно подойдёт виджет с товарами. Если необходимо предоставить персональную ссылку посетителю — подойдёт приветственный виджет. Нужно показать социальное доказательство — смело устанавливайте виджет с отзывами.

И, конечно же, не забывайте время от времени обновлять установленный виджет, поскольку пользователи постепенно к ним привыкают и перестают замечать.

Достоинства

Главное, что получает веб-мастер, упомянуто выше. Это своеобразная вирусность – сообщения читателей под статьёй на сайте могут сразу публиковаться на их личных страницах в ВК. То есть ещё и в ленте новостей их друзей. А это очень важно для продвижения и для роста аудитории, ведь в новости будет ссылка на сайт и на исходную статью. А модерацию дискуссии можно производить прямо на сайте.

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

Кроме этого, у софта есть и некоторые другие преимущества, о которых можно узнать прямо на странице его настройки.

Как установить виджет отзывы ВКонтакте

Перейдите на сервис для разработчиков, расположенный по адресу «vk.com/dev». Кликните по голубой кнопке «показать всё», и на открывшейся странице выберите пункт «комментарии».

Появится страница с предварительными настройками. В соответствующих полях формы, которая расположена ниже описания виджета, нужно ввести данные о сайте: название, адрес, основной домен, тематику. Здесь же можно выбрать, сколько комментариев будет отображаться на странице — остальные будут показаны после клика по клавише «показать еще».

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

Стоит обратить внимание на поле «ширина», позволяющее задать размер формы комментов. Это особенно важно для сайтов, где используются широкие шаблоны.

После настройки параметров, виджет готов для вставки в HTML-код сайта. Его можно скопировать из окна «Код для вставки» внизу формы настроек. Все действия, которые потребуется произвести с полученным кодом, подробно описаны в инструкции на той же странице. Для ее вывода на монитор кликните по ссылке «Перейти к подробной документации виджета».

Когда код скопирован, вставьте его в заголовок нужного файла, располагающегося в шаблоне. Если сайт собран на наиболее популярном сейчас движке «WordPress», используется файл «header.php» из папки с темой. Вставляйте фрагмент кода между тегами «

» и «».

Вторая часть кода должна быть вставлена в том месте, куда планируется установка формы — обычно под текстом, в самом низу страницы.

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

Виджет для сообщества во вк

Аналогичный виджет существует и для сообщества в ВК, чтобы его установить, используйте ссылку на приложение

https://vk.com/app6326142_251476967

Выберите вкладку «Управление» и кликните по кнопке «Установить». После этого выберите сообщество, в которое планируется выполнить установку. Далее потребуется выбрать один из двух предложенных стилей отображения и кликнуть по клавише «Установить виджет».

Либо, на этот приложение — виджет «Отзывы», можно попасть через кнопку «Управление»\»Приложения».

Важный момент — в каждое сообщество может быть установлено максимум 3 приложения.

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

Получение и настройка виджета комментариев.

Для получения виджета комментариев переходим на сайт VK вот по этой ссылке

В разделе Подключение комментариев к вашему сайту видим примерно такую картину:

Первым делом из выпадающего списка в поле Сайт/приложение выбираете ваш сайт.

Если вашего сайта нет в выпадающем списке, то нужно выбрать Подключить новый сайт.

При подключении нового сайта вам предложат заполнить поля: Название сайта, Адрес сайта, Основной домен сайта, Тематика сайта. После чего жмете на кнопку Сохранить.

Далее выбираете количество комментариев, которое будет отображаться на одной странице.

Установленная галочка в поле Медиа позволяет при создании комментария прикрепить граффити, фотографию, видеозапись, аудиозапись.

Если вы не хотите, чтобы у пользователей была такая возможность, то снимите галочку.

В поле Ширина укажите ширину виджета комментариев в пикселях. Советую оставить данное поле пустым. В этом случае форма комментариев станет адаптивной и будет хорошо смотреться даже на телефонах.

На рисунке выше нам предлагают код, состоящий из трех абзацев, который нам нужно установить на сайт для отображения виджета. Далее рассмотрим установку кода виджета на сайты Joomla и WordPress.