Размер виджета в ВК для группы

Виджет группы Вконтакте

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

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

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

На самом деле инструкция по созданию виджета VK для сайта очень проста. Выглядит она так:

• Войти в свой профиль ВКонтакте.
• Внизу под левым меню найти кнопку Разработчикам и нажать на неё.

Добавление виджета Senler в ВК и его настройка

• На странице разработки приложений нажать на кнопку Показать все.

• В группе ссылок Виджеты для сайтов найти строку Сообщества и нажать на нее.

На следующем этапе нужно настроить правильную работу виджета.

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

На открывшейся страничке Виджет для сообществ можно настроить виджет в соответствии со своими потребностями и ожиданиями.

Внимание! Все поля в форме заполнены автоматически. Эти данные нужно рассматривать в качестве примера. Их легко изменить на соответствующие конкретной группе.

Для настройки предназначены следующие строки:

• Ссылка на страницу, где нужно прописать адрес группы.

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

Рекомендуем: Как добавить администратора в группе Вконтакте

• В строке Ширина можно задать это значение в процентах от ширины родительского элемента.
• Цвет текста и Цвет кнопок — цветовые решения кнопки, фона и текста.
• Ниже формируется код виджета, который затем нужно будет вставить на сайт.

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

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

Установка блока сообщества на сайт

Процесс установки виджета на сайт настолько прост, что с ним справится даже человек, далекий от программирования и технического обслуживания веб-ресурсов. Если речь идет о работе с сайтом на WordPress, то инсталляция — это дело пары кликов. Инструкция выглядит так:

• Войти в панель администратора сайта.

• В левом меню найти вкладку Внешний вид.

• Найти раздел Виджеты и там перетащить блок Текст в сайдбар.

• В блоке Текст прописать название виджета и вставить скопированный ранее код. Нажать кнопку Сохранить.

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

Источник: vkbaron.ru

Как динамически изменить ширину виджета комментариев Вконтакте?

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

11 сен 2013 в 11:53

Нет, все просто. Есть виджет комментариев на своем сайте. встроен через JS — и соответственно IFrame. Вот как в Iframe изменить параметры длины. а то при растягивании страницы все сджимается/расжимается, а ширина виджета остается неизменной

11 сен 2013 в 11:58
А там разве не параметрами и настройками приложения задаётся?
11 сен 2013 в 12:34

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

11 сен 2013 в 15:07

6 ответов 6

Сортировка: Сброс на вариант по умолчанию

jQuery(document).ready(function(e) < var size_man = jQuery(‘#vk_groups’).width(); VK.Widgets.Group(«vk_groups», , XXXXXXX); >);
Отслеживать
ответ дан 4 июл 2015 в 16:50
21 3 3 бронзовых знака

Я просто убрал параметр width из скрипта

и все — виджет стал на 100% по ширине.

Отслеживать
ответ дан 21 дек 2014 в 16:08
11 1 1 бронзовый знак

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

HTML: JS: var globalTimer = null; window.onload = function() < // при загрузке устанавливаем параметры по умолчанию VK.Widgets.Comments(«vk_comments», ); >; window.onresize = function () < //при изменении размеров окна сначала очищаем наш блок с комментариями document.getElementById(‘vk_comments’).innerHTML = »; // вызываем через таймер функцию отрисовки (для правки бага с двойной отрисовкой) clearTimeout(globalTimer); globalTimer = setTimeout(doneResize, 300); >; function doneResize()< //заново инициализируем комментарии с новой шириной //тут можно придумать зависимость ширины комментариев от ширины чего-нибудь и вставлять вместо 320 любую другую велечину VK.Widgets.Comments(«vk_comments», ); >

Надеюсь суть ясна. Буду рад, если кто расскажет способ получше.

Отслеживать
ответ дан 11 сен 2013 в 21:22
Гена Царинный Гена Царинный
4,657 1 1 золотой знак 14 14 серебряных знаков 23 23 бронзовых знака

Наверняка кому-то мой ответ поможет. Сделал очень просто

VK.Widgets.Comments(«vk_comments», );
Отслеживать
23.2k 3 3 золотых знака 47 47 серебряных знаков 69 69 бронзовых знаков
ответ дан 15 апр 2015 в 9:54
VK.Widgets.Comments(«vk_comments», );

Вот так очень качественный резиновый стиль

Отслеживать
67.2k 195 195 золотых знаков 74 74 серебряных знака 216 216 бронзовых знаков
ответ дан 7 фев 2016 в 18:12
Roman Muradov Roman Muradov

Можно использовать класс (.container) с динамически изменяемой шириной блока, равный ширине страничного документа. При изменении размера окна, виджет перегружается с новым размером по ширине контейнера.

jQuery(document).ready(function(e) < size_man = $(‘.container’).width(); VK.Widgets.Comments(«vk_groups», , xxxxxxxxx); var globalTimer = null; window.onresize = function () < //при изменении размеров окна сначала очищаем наш блок с комментариями document.getElementById(‘vk_groups’).innerHTML = »; // вызываем через таймер функцию отрисовки (для правки бага с двойной отрисовкой) clearTimeout(globalTimer); globalTimer = setTimeout(doneResize, 300); // получаю ширину из резинового класса уже после того как размер изменился, DOM сформирована заново size_man = $(‘.container’).width(); >; function doneResize()< //заново инициализируем комментарии с новой шириной VK.Widgets.Comments(«vk_comments», , xxxxxxxxx); > >);
Отслеживать
ответ дан 6 апр 2019 в 16:19

Дмитрий Решетей Дмитрий Решетей
1 1 1 бронзовый знак

Добро пожаловать на SO. Извиините за замечание, но в данной теме ожидается конкретный ответ на вопрос заданный ТС. «но с учётом своих нужд» — вы можете сами задать вопрос и сами на него ответить с учётом ваших нужд. Так как этот ресурс не работает как привычные форумы, настоятельно рекомендую ознакомится с его механикой в справке или пройти тур, который вам был предложен при регистрации.

Источник: ru.stackoverflow.com

Адаптивный виджет ВКонтакте

В последние пару лет большую популярность приобрела адаптивная верстка сайтов, когда внешний вид сайта, расположение блоков и размер элементов меняется в зависимости от того, на каких экранах просматривается сайт. То есть, на узком экране смартфона сайт будет по прежнему красиво смотреться и им будет удобно пользоваться.

К сожалению, виджеты Вконтакте не поспевают за тенденцией. Например, виджет для сообществ имеет фиксированные размеры ширины и высоты, и при изменении размеров экрана (например, при изменении ориентации планшета) верстка сайта может “поплыть”.

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

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

function VK_Widget_Init()< document.getElementById(‘vk_groups’).innerHTML = «»; var vk_width = document.getElementById(‘vk_widget’).clientWidth; VK.Widgets.Group(«vk_groups», , 133929011); >; window.addEventListener(‘load’, VK_Widget_Init, false); window.addEventListener(‘resize’, VK_Widget_Init, false);

Здесь мы используем блок-обертку vk_widget , который у нас адаптивный, то есть он меняет свою ширину/высоту в зависимости от размеров экрана.

При загрузке страницы или изменении размеров экрана будет вызываться функция VK_Widget_Init() в которой происходит сначала занесение текущей ширины блока vk_widget в переменную vk_width , которая в дальнейшем используется в вызове функции VK.Widgets.Group .

Таким же образом можно заменить высоту блока, определив новую переменную для высоты блока vk_widget и подставив ее в VK.Widgets.Group .

Аналогичные манипуляции можно проводить и с другими виджетами Вконтакте и Фейсбука, делая их действительно адаптивными!

Источник: radioprog.ru

Баннер для ВКонтакте: 50 привлекающих внимание примеров

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

Не заметить это просто не возможно!

Давайте посмотрим, как это выгладит на скриншотах:

Я думаю, что вы уже догадались, – речь в этой статье пойдет о том, как установить виджет приветствия для группы ВК.

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

Виджет приветствия для группы ВК устанавливается по этой ссылке (первый способ)

Вы должны быть авторизированы во Вконтакте.

Подключите сообщество через соответствующую кнопку.

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

Далее – кнопка Добавить в нижнем правом углу.

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

Как в ВК убрать приложение с донатами с мобильного?

• Откройте в утилите ВК группу, управление которой осуществляете;

• Тапните по приложению с пожертвованиями;

• Перейдите в настройки (на примере виджета «Донаты» вам нужно открыть его «Панель управления». В других программах названия разделов могут незначительно различаться, но принцип везде един);

• Полистайте настройки, найдите клавишу «Удалить виджет»;

Настройка виджета «Приветствие» в группе ВК

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

Для этого перейдите во вкладку Управление сообществом – раздел Приложения.

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

Теперь перейдите к настройкам приложения по ссылке вверху – Создать виджет.

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

Платный пакет включает в себя 9 виджетов:

• Персональное предложение
• Акционные товары
• Точки продаж
• Обложки
• Акции и скидки
• Отзывы
• Наши клиенты
• Мероприятия
• Текстовый (бесплатный)

Ежемесячная подписка стоит 590 рублей.

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

Как удалить виджет с пожертвованиями с ПК?

• Перейдите в свое сообщество и тапните по клавише «Управление» (справа под аватаром);

• Найдите в колонке справа пункт «Приложения»;
• В перечне установленных виджетов найдите нужный;

• Внизу справа есть кнопка «Удалить», щелкните;

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

Настройка шаблона Текстовый виджета приветствия

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

После клика по кнопке Создать вам необходимо заполнить поля нового виджета.

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

Наименование виджета приветствия будет видно только вам.

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

Для этого вам необходимо воспользоваться кодом , если в заголовке вы хотите обратиться по имени. При необходимости можно добавить фамилию через код .

Переходим к заполнению основной части.

Придумайте основной текст (поле обязательное) до 200 символов.

Вы можете так же добавить описание.

Обратите внимание на возможность поставить галочку у функции Не показывать на мобильных устройствах.

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

Чтобы виджет приветствия для группы ВК заработал, кликните по кнопке Сохранить и включить.

В следующем окне установите виджет в группу.

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

Поменяйте настройки в Приложении. Видимость поставьте для Администраторов, видимость виджета приложения – Все пользователи.

В результате Текстовый виджет приветствия будет выглядеть примерно так:

Вы всегда можете внести изменения в виджет приветствия ВК через настройки (клик по шестеренке).

Основные моменты настройки виджетов приветствия

Для Текстового (бесплатного)

Для Персонального виджета (в составе платного пакета)

Обо всех особенностях виджета приветствия для группы ВК вы можете почитать в официальном источнике по этой ссылке https://vk.com/spycat?w=page-120826490_52167028.

Как отключить пожертвования на личной странице ВК

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

• Убрать проект, на который уже внесены деньги, до окончания сбора нужной суммы, нельзя;

• Как только средства будут собраны, линия прогресса станет зеленой, и вы сможете удалить сбор (он переместится во вкладку «Завершенные»);

• А вот деньги можно выводить по мере поступления каждого перевода.

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

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

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

Виджет Группа Вконтакте на сайте — это очень полезная вещь, которая позволяет связать ваше VK сообщество и интернет портал. Таким образом свой интернет ресурс можно продвигать не только в поисковых системах, но в такой популярной социальной сети, как VKontakte.

Если честно, я социальные сети не очень люблю. Только фильмы в VK вечерами смотрю, но на большее меня не хватает. Вот уже несколько раз реанимировал twitter, даже купил специальную программу для раскрутки twitter аккаунта, ведь на этом можно зарабатывать, но все равно до нее руки не доходят. Не лежит к этому у меня душа и все тут.

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

В работе с VK мне помогает моя девушка Вета. Помимо того, что Вета хороший экономист (а в ближайшем будущем мне это очень сильно пригодится), так еще и интересуется социальными сетями. Перспективный SMM специалист! Может я ее этой дрянью заразил. Так вот, именно благодаря ей мой блог обзавелся сообществом VK и тот виджет Вконтакте, о котором я сейчас буду рассказывать, уже красуется у меня в правой колонке.

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

Шаг №1. Настройка виджета.

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

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

Шаг №2. Добавление Группы Вконтакте на сайт.

Код состоит из 2 частей:

• Первая часть — выделена красным цветом. Ее надо вставить в исходный код страниц в пределах тега head. Если у вас блог на WordPress, то редактировать следует шаблон header.php.
• Вторая часть (выделена зеленом) отвечает за вывод виждета на сайте. Так что ее вставляем туда, где бы хотели видеть нашу Группу ВКонтакте. В том же WordPress можно воспользоваться стандартным виджетом «Текст».

Вот и все! Просто до безобразия. Пользуйтесь на здоровье! Спасибо за внимание.

Лучший способ выразить благодарность автору — поделиться с друзьями!

Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:

Следите за обновлениями в Twitter и RSS.

Эти статьи Вам могут быть интересны:

• Плагин ВКонтакте WordPress: виджет, коментарии и социльные кнопки VKontakte
• Кросспостинг ВКонтакте из WordPress — плагин VKontakte Wall Post
• Комментарии Facebook и ВКонтакте в Joomla
• Плагин и виджет часов для WordPress
• Что такое блог, его отличия от сайт
• WordPress плагин для FaceBook: комментарии, like и виджет
• Как самостоятельно создать сайт-каталог товаров

Что такое виджет в ВК

Многих интересует вопрос, что такое Виджет? Его можно назвать небольшим приложением, выполняющим полезную функцию. Они бывают разными. К примеру, могут показывать погодные условия на экране телефона либо часы на ПК. Такие утилиты в «ВК» связывают ваш ресурс с определенной группой либо страничкой «ВКонтакте».

Благодаря им, пользователи могут подписываться на новости группы, не уходя со страницы, узнавать об акциях, получать личное обращение.

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

Как можно использовать виджет приветствия «ВКонтакте»

Общий совет: не пишите размыто. Пока я писала пост, успела забыть, из какого сообщества взяла этот пример.

Невнятные характеристики вроде «много интересных записей» и «много прикольных картинок» в тексте виджета не помогли мне вспомнить. Лучше писать что-то конкретное и свойственное именно вашему сообществу. По крайней мере здесь есть призыв к действию «Подпишись» — это хороший ход.

А теперь расскажу, что можно делать при помощи виджета приветствия «ВКонтакте».

Рассылка

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

ЧаВо

Ещё с помощью виджета приветствия «ВКонтакте» можно направить пользователей на страницу FAQ, чтобы вам не пришлось тысячу раз объяснять новичкам в сообщениях и комментариях одно и тоже. Вот как это сделали фанаты ручкокручения:

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

Приятные бонусы

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

В этом виджете админы группы, которая продаёт духи, применили довольно редкую переменную — число. Видите, где написано 45? Число связывается с CRM-системой магазина. С каждым проданным по акции флаконом число будет уменьшаться.

Конечно, для нас с вами было бы понятнее, если бы вместо «всего 45 ароматов» было бы написано «осталось 45 ароматов». Возьмите себе на заметку такой способ обратного отсчёта.

Конкурс

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

Только не берите с них пример написания числительных.

Источник: accauntlol.ru