Главная / wordpress / Как привязать группу в контакте к сайту. Новости, участники группы ВК на сайте.
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...

Как привязать группу в контакте к сайту. Новости, участники группы ВК на сайте.

Итак буду описывать как привязать группу вконтакте к сайту. На движке WordPress, хотя принцип везде один и тот же, всё очень просто.

ВИДЖЕТ вк НА САЙТЕ

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

Я покажу как вывести блок с участниками (другие блоки делаются по тому же принципу). Обратите внимание на сайте HandicapNews.ru с правой стороны этот блок уже есть, он подогнан по размерам колонки, стилистика вконтакте сохранена, впрочем её можно менять – заточить под свой ресурс.

Шаг№1. Копируем ссылку Вашей группы ВК, верхняя строчка браузера с адресом.

строчка браузера

Шаг№2. Прокручиваем страницу вконтакте в самый низ и нажимаем на ссылку «разработчикам»

разработчикам

Шаг№3. На появившейся страничке, нажимаем «подключение сайтов и виджетов»

подключение сайтов

Шаг№4. Пролистываем страницу чуть ниже и выбираем виджет по своему вкусу, в зависимости от того какой вам функционал нужен!

Мы привязываем группу – поэтому выбираем «сообщества». (а так вариантов там много на любой вкус)

сообщества вк

Шаг№5. Задаем размеры виджета и его стилистику. Настройка.

виджет настройка

 

0 — Сюда вставляем скопированную ссылку на вашу группу, адрес из браузера

1- Выбираем тип блока

2 – Настройка размеров блока, остановимся и разберемся подробней

Чтобы определить размеры блока, его ширину и высоту, вам необходимо открыть ваш сайт, определиться с местом размещения. Например в правом сайдбаре. Наводим на него мышку, нажимаем вторую кнопку мыши, выбираем «код элемента»(или что-то в этом роде – зависит от браузера). Смотрим размеры элемента и подгоняем под него размеры виджета ВК. Я ориентировался по картинке в сайдбаре – её ширина 300 а высота 90 пикселей. Значит ширина мне нужна 290-300. А высоту я оставил в виджете без изменений.

ПРОСМОТРЕТЬ КОД

размер изображения

3,4,5 – Выбираем цветовую схему. То есть цвет для фона, текста и кнопок. Я оставил без изменений. Но если у Вас есть желание подогнать блок виджета под стилистику сайта, можете поменять цвета. Для точного определения цветов на вашем сайте используйте программу Пикси, она выдает код цвета элементов в любой части экрана (подробней о ней, скачать и посмотреть видео можно здесь)

6 – код виджета, его надо будет скопировать!

Переходим к Шагу №6. Теперь нам надо вставить скопированный код виджета на сайт. Для этого заходим в админку сайта (на примере WordPress)

ВНЕШНИЙ ВИД - ВИДЖЕТЫтекст вид

вставка кода

Выбираем раздел «Текст», его ориентацию (вставляем в нужный сайдбар) и вставляем в него свой скопированный код виджета. И нажимаем сохранить.

Всё готово. Наслаждайтесь своей работой и красивым блоком ВК на своём сайте.

ВИДЖЕТ НА САЙТЕ

За сим всё! Читайте HandicapNews.ru

С нами интересно!!!

Опубликовать на своей стене в:
Итак буду описывать как привязать группу вконтакте к сайту. На движке WordPress, хотя принцип везде один и тот же, всё очень просто. Поехали! Вы часто видите как на том или ином сайте отображается блок группы в контакте, как правило это либо участники группы с кнопочкой «подписаться на группу», либо новости паблика с такой же кнопочкой, либо комментарии и другое. Я покажу как вывести блок с участниками (другие блоки делаются по тому же принципу). Обратите внимание на сайте HandicapNews.ru с правой стороны этот блок уже есть, он подогнан по размерам колонки, стилистика вконтакте сохранена, впрочем её можно менять – заточить под…

Обзор

Итог: Дайте свою оценку статье. На сколько она была Вам полезна и интересна?!

Рейтинг пользователей 4.8 ( 2 голосов)
браузеры

Добавить страницу в закладки браузера - Нажмите Ctrl+D

   

О Александр Муратов

Авторский Блог Муратова Александра. Тематика: сайтостроение - wordpress. Продвижение, раскрутка, монетизация и оптимизация сайтов. Администратор Live-Net Журнала HandicapNews.ru Все статьи автора.

Оставить комментарий

Яндекс.Метрика

Watch Dragon ball super