BloGGood.ru

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

WordPress, PHP, HTML, CSS, Windows

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

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

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

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

У вас есть группа ВКонтакте и вы хотите разместить на сайте или блоге участников вашей группы?! Все это можно сделать с легкостью и без особой сложности. Социальная сеть ВКонтакте предоставляет такую возможность. Всего в пару кликов вы сможете установить виджет группы ВКонтакте на 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.

Удачи!

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

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

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

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

  1. Игорь

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

  2. Avatar photo Степан => автор блога

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

    <!-- это в файл "header.php" -->
    <script ENGINE="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>
    
  3. Игорь

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

  4. Даша

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

  5. Даша

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

  6. Avatar photo Степан => автор блога

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

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

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

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

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

  9. Avatar photo Степан => автор блога

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

  10. Avatar photo Степан => автор блога

    …и что было?

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

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

  12. Avatar photo Степан => автор блога

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

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

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

  14. Avatar photo Степан => автор блога

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

  15. Дмитрий

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

  16. Avatar photo Степан => автор блога

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

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

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

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

  17. Александр

    Спасибо))))

  18. Татьяна

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

  19. Avatar photo Степан => автор блога
    <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 ENGINE="text/javascript">var delay_popup = 5000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script>
    </body>
    </html>
    

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

  20. Татьяна

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

  21. Avatar photo Степан => автор блога

    В заголовок (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 ENGINE="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);
    }
    

  22. Татьяна

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

  23. Avatar photo Степан => автор блога

    Татьяна, это моя ошибка, не дописал предложение.
    В заголовок (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 ENGINE="text/javascript">var delay_popup = 5000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script>
    

  24. Андрей

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

  25. Марина

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

  26. Avatar photo Степан => автор блога

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

  27. Елена

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

  28. Avatar photo Степан => автор блога

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

  29. Егор

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

  30. Avatar photo Степан => автор блога

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

    width:"220"

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

    width:"100%"
  31. Алексей

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

  32. Avatar photo Степан => автор блога

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

  33. Михаил

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

  34. Oleg

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

  35. Avatar photo Степан => автор блога

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

  36. Avatar photo Степан => автор блога

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

  37. Oleg

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

  38. Игорь

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

  39. Миша

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

  40. Avatar photo Степан => автор блога

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

  41. Андрей

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

  42. Avatar photo Степан => автор блога

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

  43. Наталья

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

  44. Иван

    Все получилось! Спасибо :!:

  45. Avatar photo Степан => автор блога

    Пожалуйста, Иван

  46. Александра

    Здравствуйте! Прошу совета. Пытаюсь воспользоваться вашим способом №1. При заполнении виджета кодом из ВКонтакте, WordPress ругается на строчки <script ENGINE="text/javascript" и пишет, что Tag is not allowed. Соответственно, сохранить не даёт.
    Моих знаний не хватает, чтобы разобраться, в чём проблема, и как решить её решить.

  47. Александра

    Tag script is not allowed. Вот что пишет.

  48. Святослав

    Привет! Делаю всё как написано в способе #1, но в итоге на сайте отображается код, а не виджет.

  49. Avatar photo Степан => автор блога

    Здравствуйте, Святослав!
    А в коде прописаны теги

  50. Расима

    Спасибо за полезную статью!!!

  51. Антон

    Спасибо, все получилось!

  52. Екатерина

    Спасибо за доступную и полезную статью.

  53. Avatar photo Степан => автор блога

    Пожалуйста!!!

  54. Анна

    Спасибо, установила такой себе на сайт. Сейчас в WP есть виджет Html-код. Лучше пользоваться им.

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

;-) :| :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]

Метки: , ,

Мои цели на 2018-2019:

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

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

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

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

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

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

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

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