VKontakte

Как добавить виджет Вконтакте на сайт?

Nikel, 07.11.2013

В чем преимущества в установке виджетов Вконтакте для сайта?

  • Пожалуй, главное – это отсутствие необходимости регистрации, поскольку ВКонтакте зарегистрировано большинство пользователей русскоязычного Интернета, появляется возможность комментировать не анонимно. Любой пользователь сможет прокомментировать вашу статью от своего имени с аватаром и ссылкой на аккаунт с информацией о себе.
  • Позволяет получить дополнительную аудиторию, так как комментарий, оставленный на сайте будет опубликован и на странице комментатора, и в ленте новостей его друзей. А он содержит ссылку на статью, что привлекает внимание новых пользователей к вашему сайту.
  • Также немаловажным фактором является высокая скорость работы виджета и простота установки.
  • При необходимости можно отказаться от интеграции с сетью и сохранить комментарии на своих серверах, используя API Вконтакте.

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

Виджет для комментариев

Первым из виджетов, который заслуживает особого внимания является Виджет для комментариев. Он очень прост, гораздо проще социального плагина комментариев Facebook и помогает создать комментарии на сайте всего за несколько минут.
Из выпадающего списка Сайт/приложение выберите Подключить новый сайт, введите адрес сайта, основной домен и краткое название.
Добавление нового сайта
Выберите количество комментариев на страницу, использовать или нет расширенные комментарии, задайте ширину (по умолчанию указано 520).
Добавление комментариев ВКонтакте
Ниже вы увидите сгенерированный код, его нужно разделить на две части: первую часть

вставляем между тегами head вашей страницы, вторую часть

помещаем непосредственно в то место страницы, где будут выводиться ваши комментарии.

Если ваш сайт работает на какой-то CMS, а это в большинстве случаев так, надо определить какие части шаблона отвечают за вывод этих частей страницы.

Вставка комментариев в WordPress

Первая часть скрипта вставляется в файл header.php до закрывающего тега head, а второй блок кода в файл single.php, перед комментариями, либо в начало или конец файла comments.php. Можно вообще удалить стандартные комментарии и оставить только комментарии Вконтакте.

Вставка комментариев в DataLife Engine

Первую часть кода нужно вставить в main.tpl, также в области head, а вторую – в fullstory.tpl, перед тегами{addcomments}{comments}.
В результате на вашем сайте появятся комментарии, которые будут иметь подобный вид
Комментарии ВКонтакте
Что здесь есть интересного для комментатора?

  • Возможность прикрепить граффити, картинки, видео, аудио (выбор открывается при наведении мышкой на ссылку Прикрепить). Она предоставляется в том случае, если в настройках вы указали Включить расширенные комментарии. Там же можно настроить какие типы комментариев из вышеперечисленных разрешены (открываются при клике на ссылку подробнее).
    расширенные комментарии
  • Оставленный комментарий может отображаться на странице ВКонтакте комментатора со ссылкой на статью. Для этого используйте значок B внизу окна добавления комментария.
    добавление комментариев
    Если он бледный, значит комментарий не будет показан, а если яркий, вы найдете его на своей стене в таком виде
    комментарий на стене ВК

Возможные неполадки! У меня например, виджет не захотел сразу работать, причина оказалась в wp-minify плагине вордпресс для минимизации css и js, так что нужно его деактивировать, либо исключить скрипт ВК, настройки плагина позволяют это сделать)).

Виджет Сообществ

Второй интересный виджет — это Сообщества.

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

Может отображаться в нескольких видах.

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

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

как обычно вставляем в head нашего сайта(файл header.php для wordpress, main.tpl для dle),
а часть

в сайдбар (Соответственно sidebar.php в WordPress и sidebar.tpl в DataLife Engine).

Виджет Мне нравится

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

    • Кнопка с текстовым счётчиком
      Мне нравится текстовый счетчик
    • Кнопка с миниатюрным счётчиком
      Мне нравится миниатюрный счетчик
    • Миниатюрная кнопка
      Миниатюрная кнопка
    • Миниатюрная кнопка, счётчик сверху
      счётчик сверху

В настройках, относящихся к этому виджету, помимо указания конкретного вида кнопки из вышеперечисленных можно указать размеры кнопки и текст, который будет выводиться (Мне нравится или Это интересно).
Настройки Мне нравится
Перейдем к генерируемому коду — первую часть вставляем между тегами head вашей страницы (WordPress -header.php, DLE — main.tpl)

вторую часть идущую со слов <!— Put this div tag to the place, where the Comments block will be —>

помещаем в нужном месте, до или после статьи, для DLE в файле fullstory.tpl, для WordPress — single.php.

На основе виджета Мне нравится разработчики ВКонтакте создали другой менее известный, но полезный плагин, который помогает вебмастерам, генерируя на страницах сайта блок популярных новостей. Естественно требуется виджет Мне нравится, предварительно установленный для каждой статьи.
Работает все элементарно: посетители клацая по кнопке, определяют какие материалы являются популярными. Это чудо называется виджет рекомендаций и выглядит примерно так
Виджет рекомендаций
Перейдем к настройкам.
Настройки виджета рекомендаций
Нам предоставлена возможность изменять количество записей, период выборки, в течение которого происходит подсчет лайков, и формулировку(понравилось или интересно такому-то числу людей).
Что касается кода,первую часть как обычно помещаем между тегами head, а вторую часть

например, в сайдбар. Размещение для WordPress и DLE аналогично тому, какое было при установке Виджета Сообществ.

Как всегда, традиционно видео по теме


На сегодня все, пока!

3 комментариев


    • купить сумку женскую кожаную
      Cancel Replay
    • Ноябрь 10, 2014

    И да пребудет с Вами сила!

    • по ссылке
      Cancel Replay
    • Ноябрь 12, 2014

    Огромное вам спасибо! а еще посты на эту тему будут в будующем?

    • Сергей
      Cancel Replay
    • Май 26, 2015

    Много букв, пока читал, забыл что хотел. На тему сообществ и страниц, есть норм виджет - ejfe.ru/widget , просто ссылку на страницу вк указал и уже есть код iframe. Вставляешь хоть куда и все ок! Все автоматом на сайт подтягивается, в красивую ленту. Еще и твиттер с инстаграмом и facebook поддерживает.