BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Wordpress » Как установить виджет группы ВКонтакте для WordPress сайта

Как установить виджет группы ВКонтакте для WordPress сайта

2014-04-24 / Вр:21:02 / просмотров: 41483

У вас есть группа ВКонтакте и вы хотите разместить на сайте или блоге участников вашей группы?! Все это можно сделать с легкостью и без особой сложности. Социальная сеть ВКонтакте предоставляет такую возможность. Всего в пару кликов вы сможете установить виджет группы ВКонтакте на WordPress сайт. С чего начать? Для начала нужно получить код виджета группы ВКонтакте, а потом разместить код на сайте. Приступим к пошаговой установке. Как установить виджет группы ВКонтакте для WordPress сайта

Как получить код виджета группы ВКонтакте?

1). Чтобы получить код виджета группы, вам нужно скопировать из адресной строки url-адрес вашей группы:

Как получить код виджета группы ВКонтакте
2). Зайти в свой аккаунт ВКонтакте, а потом перейти по ссылке:

http://vk.com/dev/Community

3). В открывшейся форме нужно сделать такие настройки:

--> «Ссылка на страницу» - здесь вставьте скопированный url-адрес вашей группы;
--> «Вид» - здесь выберите, что должно выводиться в блоке: «Участники», «Новости» или только «Название»;
--> «Ширина» и «Высота» блока, «Цвет фона», «Цвет текста» и «Цвет кнопок» - здесь объяснять, думаю, не нужно;
--> «Код для вставки» - это код, который нужно скопировать и разместить на сайте/блоге в том месте, где вы хотите видеть блок группы:

Как получить код виджета группы ВКонтакте

Как установить код виджета группы ВКонтакте на сайт?

Способ №1

1). Чтобы установить код виджета группы на WordPress сайт, вам нужно зайти в админ-панель во вкладку «Виджеты» («Внешний вид» => «Виджеты»):

Как установить код виджета группы ВКонтакте на сайт?
2). Перетащите виджет «Текст (Произвольный текст или HTML-код)» на рабочую зону, то есть в колонку справа:

Как установить код виджета группы ВКонтакте на сайт?
3).  Заполните виджет:

--> «Заголовок» - назовите группу, например, «Наша группа ВКонтакте»;
--> В следующем поле вставьте код, который вы скопировали на сайте ВКонтакте из поля «Код для вставки».

4). Жмите кнопку «Сохранить»:

Как установить код виджета группы ВКонтакте на сайт?
Способ №2

Чтобы установить код виджета группы на WordPress сайт, вам нужно зайти в админ-панель WordPressи перейти к редактированию файла «sidebar.php»  («админ панель» => «Внешний вид» => «Редактор» => «Боковая колонка (sidebar.php)») и поместите код в то место, где вы хотите видеть блок группы ВКонтакте.

Ну, у меня все!

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

Удачи!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

43 Ответов на комментарий - Как установить виджет группы ВКонтакте для WordPress сайта

  1. Игорь

    Здравствуйте! Пробую сделать всё, как у вас описано, но после вставки кода в виджет “Текст” WordPress не сохраняет виджет. После нажатия на кнопку “Сохранить” из исходного кода исчезают строки до абзаца, начинающегося с VK.Widgets и потом этот код отображается, как текст на странице WordPress

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Игорь! Проверил еще раз свои примеры, у меня все работает!
    Попробуйте верхний код (тот, что исчезает) установить в файле “header.php” между тегами , а другую часть кода добавьте в виджет. Ниже в коде я указал подсказки, посмотрите и сделайте все так же:

    <!-- это в файл "header.php" -->
    <script type="text/javascript" src="//vk.com/js/api/openapi.js?115"></script>
    
    <!-- это в виджет" -->
    <!-- VK Widget -->
    <div id="vk_groups"></div>
    <script type="text/javascript">
    VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 75949932);
    </script>
    

    Ответить

  2. Игорь

    Спасибо! Попробую. У вас наверное уже изменён файл header.php, поэтому всё и получается через виджет wordpress

    Ответить

  3. Даша

    Привет! Делаю всё как написано в способе #1, но в итоге на сайте отображается код, а не виджет. Подскажи плиз почему так? Не могу понять ((((

    Ответить

  4. Даша

    Сорри, прочитала коммент выше) всё понятно :oops:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте! Я рад, что проблема решилась! Будут вопросы, пишите, с большим удовольствием помогу!

    Ответить

  5. Татьяна Сова

    Здравствуйте! Спасибо, все очень понятно, все получилось. Но есть вопрос. У меня в виджете отображается только 2 человека, точнее только 2 фото и большого размера. Увеличение виджета в размерах не помогает, остается так же только 2 фото, остальное белый фон. Как можно уменьшить размер фото и выставить так, что бы хотя бы штук 9 высвечивалось фотографий?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте! Странно, что у вас выводиться так мало фотографий? По умолчанию, виджет выводить по 12 фотографий. Может проблема с шаблоном сайта? Если хотите, попробуйте для эксперимента установить другую тему для WordPress. Если проблема исчезнет, значит проблема была в CSS файле.

    Ответить

  6. Татьяна Сова

    Вроде разобралась… Правда хотелось бы размер фото поменьше…

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    …и что было?

    Ответить

    Татьяна Сова отвечает:

    Размер шаблона увеличила – это первое. И второе, появляются участники в виджете не сразу, а спустя какое-то время. И что интересно, в разных браузерах промежуток времени разный. В Яндекс-браузере через минут 20, в Мазиле часа через 1,5

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Спасибо, Татьяна, за ответ! У Вас красивый и полезный блог.

    Ответить

    Татьяна Сова отвечает:

    Спасибо большое за оценку! Омне очень и очень приятно! :oops: Заходите в гости!

    Степан => автор блога

    Степан => автор блога отвечает:

    Татьяна, спасибо за приглашение, буду частым гостем

  7. Дмитрий

    Добрый вечер! Вопрос немного не по теме. Добавил на свой сайт основной виджет вконтакте (с фото участников группы) и виджет комментариев вконтакте. Всё работает.
    Когда добавляем основной виджет, то есть возможность выбрать цвет фона, цвет текста.
    Когда добавляем виджет комментариев, то такого нет. Есть ли способ изменить цвета?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Дмитрий! Попробуйте в коде поменять цвет!

    color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 
    

    Вместо FFFFFF – на свой
    Вместо 2B587A – на свой
    Вместо 5B7FA6 – на свой

    Код цвета можете посмотреть здесь

    Ответить

  8. Александр

    Спасибо))))

    Ответить

  9. Татьяна

    А как вставить виджет ВК во всплывающее окно с приглашением вступить в группу? У многих видела на сайтах такое – окно всплывает где-то секунд через 5-10 после открытия страницы?
    Спасибо.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    <html>
    <head>
    <title>заказ</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <style>
    #parent_popup{
        background-color: rgba(0, 0, 0, 0.8);
        display: none;
        position: fixed;
        z-index: 99999;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    #popup{
        background: #fff;
        width: 520px;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border: 10px solid #ddd;
        position: relative;
        -webkit-box-shadow: 0px 0px 20px #000;
        -moz-box-shadow: 0px 0px 20px #000;
        box-shadow: 0px 0px 20px #000;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
         border-radius: 15px;
    }
    .close{
        background-color: rgba(0, 0, 0, 0.8);
        border: 2px solid #ccc;
        height: 24px;
        line-height: 24px;
        position: absolute;
        right: -24px;
        cursor: pointer;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
        top: -24px;
        width: 24px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
        border-radius: 15px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
         box-shadow: 1px 1px 3px #000;
    }
    .close:hover{
        background-color: rgba(0, 122, 200, 0.8);
    }
    </style>
    
    </head>
    <body>
    <div id="parent_popup">
    <div id="popup">
    Тут вставляем необходимый html-код
    <a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>
    </div>
    </div>
    <script type="text/javascript">var delay_popup = 5000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script>
    </body>
    </html>
    

    5000 миллисекунд = 5 секунд
    Пробуйте!

    Ответить

  10. Татьяна

    Ого… Спасибо! Э… а куда его вставить?
    Тут вставляем необходимый html-код – вроде код ВК – это джава-скрипт – подходит? Его вставлять?
    Я на Вы с вордпрессом. Понимаю, что кусок … надо вставить в файл стилей, а вот начало кода и конец… можно еще подсказочку? Спасибо.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    В заголовок (header.php) сразу после :

    <div id="parent_popup">
    <div id="popup">
    Тут вставляем необходимый html-код
    <a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>
    </div>
    </div>
    <script type="text/javascript">var delay_popup = 5000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script>
    

    А вот это в Таблицу стилей (style.css):

    #parent_popup{
        background-color: rgba(0, 0, 0, 0.8);
        display: none;
        position: fixed;
        z-index: 99999;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    #popup{
        background: #fff;
        width: 520px;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border: 10px solid #ddd;
        position: relative;
        -webkit-box-shadow: 0px 0px 20px #000;
        -moz-box-shadow: 0px 0px 20px #000;
        box-shadow: 0px 0px 20px #000;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
         border-radius: 15px;
    }
    .close{
        background-color: rgba(0, 0, 0, 0.8);
        border: 2px solid #ccc;
        height: 24px;
        line-height: 24px;
        position: absolute;
        right: -24px;
        cursor: pointer;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
        top: -24px;
        width: 24px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
        border-radius: 15px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
         box-shadow: 1px 1px 3px #000;
    }
    .close:hover{
        background-color: rgba(0, 122, 200, 0.8);
    }
    

    Ответить

  11. Татьяна

    Степан, вроде понятно, а первые 4 строки из первого кода – тоже в хедер вставлять? Наверное, ДО div ID? Боюсь запутаться…

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Татьяна, это моя ошибка, не дописал предложение.
    В заголовок (header.php) вставляете сразу после :

    <div id="parent_popup">
    <div id="popup">
    Тут вставляем необходимый html-код
    <a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>
    </div>
    </div>
    <script type="text/javascript">var delay_popup = 5000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script>
    

    Ответить

  12. Андрей

    Спасибо. Всё доступно и просто.

    Ответить

  13. Марина

    Спасибо!! :smile: Всё получилось быстро и просто!! Очень доходчиво написано!! ;-)

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, Марина! :rose:

    Ответить

  14. Елена

    Спасибо, совершенно ничего сложного как оказалось нет, установила виджет группы к себе за пару минут, всё работает прекрасно!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, Елена!

    Ответить

    Егор отвечает:

    Здравствуйте! Как можно сделать этот виджет резиновым? Дизайн адаптативный, при изменении размера экрана виджет остаётся большим и вылазит за края сайтбара.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Егор! В коде от группы ВКонтактов, находите “width”. Меняете значение под 100%. Например, было так:

    width:"220"

    сделайте вот так:

    width:"100%"

    Ответить

  15. Алексей

    Спасибо за статью. Находил похожие, но все не то было :) А тут именно то, что надо и доступно очень :!:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, Алексей!

    Ответить

  16. Михаил

    Полезная и доходчивая статья.Спасибо.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, Михаил

    Ответить

  17. Oleg

    Добрый день, Степан!
    А есть нормальные решения, чтобы код грузился асинхронно?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Олег!
    Думаю, что нету.

    Ответить

    Oleg отвечает:

    Я за это время нашел решение, спасибо Степан.
    Есть вполне нормальный асинхронный вариант, который не останавливает загрузку страницы. Я его реализовал в виде плагина у себя на сайте, если кому нужно могу залить на GitHub.

    Ответить

    Наталья отвечает:

    Олег,не подскажите название плагина, пожалуйста. Сайт грузит медленнее при вставке виджета VK сообщества на сайт

    Ответить

  18. Игорь

    Спасибо, просто, как все гениальное) вставилось, работает, что и требовалось)

    Ответить

  19. Миша

    Спасибо за инфу!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, Михаил.

    Ответить

  20. Андрей

    Спасибо. Все получилось и работает. А такое же для Фейсбука есть?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста! Еще нет, но я так понял, что уже пора начинать писать )))

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 784
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4296