Виджет вк для сайта


Как же это сделать?

1. Заходим на сайт ВКонтакте.

2. Авторизовываемся.

3. Переходим на страницу «Мои Настройки».

 my-nastroiki

4. Прокручиваем страницу вниз и в подвале сайта находим меню с ссылкой «разработчикам». Переходим по данной ссылке.

 vid-vneshnii

5. Нам понадобится раздел «Авторизация и виджеты для сайтов».

 prilozheniya

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


vidzhet

Начнём по порядку.

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

Переходим на страницу этого виджета.

comment

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

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

Например, разрешить пользователю кроме текста прикреплять к своим комментариям фотографии, видео и ссылки, а рисовать графити и добавлять аудиозаписи запретить.

chto-delat

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


razmer

Например, если ширина области под контент равна 600 пикселей, то и ширину блока «Коммертарии» указываем аналогичную. Не беда, если вы не угадаете с шириной изначально, потом её можно будет исправить в коде вручную.

cod

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

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

Виджет «Запись на стене» — для чего он нужен? Попробую объяснить на примере.

Допустим, вы на своём блоге размещаете новость об увольнении Павла Дурова из ВКонтакте, и хотели бы процитировать его мнение по этому поводу. Вам всего-навсего необходимо найти нужную запись в социальной сети. Скопировать её URL.


primer

Перейти на страницу виджета «Запись на стене».

zapis-stena

В поле «Ссылка на запись» вставить только что скопированный URL, указать ширину блока и код для вставки готов!

Спросите зачем такие сложности, если в HTML для этого есть специальный тег «Цитата»? Отвечаю: функция данного виджета — это достоверность информации. Ваши читатели будут уверены, что информация, так сказать. из первых уст и в ней нет «отсебятины».

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

 soobthestva

 В поле «Ссылка на страницу» указываем URL вашего сообщества.

 zavershenie

 В пункте «Вид» выбираем, что будет отображаться в виджите.

 


vibor

 — Участники: фотографии подписчиков и их количество.

 vid

 — Новости: последние опубликованные новости в сообществе.

 vidget-vkontakte

 — Только название: в виджете будет отображаться логотип вашего сообщества и его название.

 mini-vidget-vkontakte

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

 dizain

Пример-шутка: внешний вид виджета от социальной сети ВКонтакте настроен под дизайн сайта «Одноклассники»


:)

tsvet

После всех настроек, вы так же копируете «Код для вставки» и добавляете его в отведённую область на сайте.

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

Здесь также как и для комментариев указываем название сайта, его адрес, основной домен и тематику. Далее жмём кнопку «Сохранить».

parametri-vk

Теперь необходимо настроить внешний вид кнопки. Здесь на ваше усмотрение. Далее выбираем высоту кнопки — для всех вариантов кнопок предложенные значения одинаковые: 18, 20, 22 или 24 пикселя. Так же если вы выбрали вариант кнопки «Кнопка с миниатюрным счётчиком» или «Кнопка с текстовым счётчиком», то можно в пункте «Название кнопки» выбрать текст, который будет отображаться на кнопке. Вариантов всего два: «Мне нравится» или «Это интересно».


knopka

Всё! Копируем код и добавляем на страницы сайта.

Следующий виджет «Рекомендации» без установки предыдущего («Мне нравится») работать не будет, так как отображает наиболее популярные статьи вашего веб-ресурса по мнению читателей. С помощью этого виджета вы сможете упростить пользователю поиск наиболее интересных постов на вашем блоге.

С первыми пунктами настройки данного виджета думаю вам о так уже всё ясно, поэтому начну с «Количества записей». Здесь вы выбираете количество отображаемых популярных страниц. Их может быть 3, 5 или 10.

 chislo-zapisei

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

 period

В пункте «Формулировка» выбираем наиболее приемлемую фразу («Понравилось» или «Интересно») и вновь копируем «Код для вставки».


formulirovka

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

Например, вы сменили дизайн своего блога и хотите узнать мнение своих читателей. Идём в раздел виджета «Опросы». Заполняем форму (вы конечно для своего сайта описание добавляете):

propishem

Нажимаем кнопку «Сохранить».

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

dobavit

Когда анкета опроса сформулирована, указываем ширину блока с опросом и нажимаем кнопку «Получить код».


podluchit-kod

Появится всплывающее окошко, из которого вы сможете скопировать Код для вставки.

kopirovat

После вставки кода на сайт, ваши читатели увидят вот такую форму опроса:

opros

Виджет «Авторизация» я пока пропущу, так как это отдельная большая тема.

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

Настройки данного виджета элементарные: вы выбираете стиль кнопки (с прямыми или закруглёнными краями, просто иконка или кнопка с текстом, со счётчиком публикаций или без), можете изменить текст на ней (например, заменить слово по умолчанию «Сохранить» на «Рассказать друзьям») и вариант логотипа.

ssilki-publikatsiya


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

Думаю этот виджет можно ещё использовать в том случае, если, например, вам на блог пишут статьи другие люди (как у Александра Борисова), где в конце статьи вы указываете ссылку-имя автора на его сайт. А если сайта нет? Вот тогда можно воспользоваться этим виджетом и отправлять всех желающих познакомиться с автором на его страничку в соцсети.

ssilki-kod

На этом всё! Удачных вам экспериментов!

Автор статьи: Анна Вечеркина

isif-life.ru

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

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


vidget-kommentarii-vkontakte-na-sayt

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

Ссылка на виджет: https://vk.com/dev/Comments

Виджет «Запись на стене»

Виджет «Запись на стене» позволяет встраивать на любую страницу своего сайта комментарий пользователя, отдельную запись пользователя или запись сообщества Вконтакте. Не покидая страницу с размещённым на ней виджетом «Запись на стене», можно посмотреть прикреплённые к ней видеозаписи, фотографии, послушать музыку, оценить запись, подписаться на страницу автора записи или комментария, а также поделиться ею с друзьями.

vidget-zapis-na-stenei-vkontakte-na-sayt

Ссылка на виджет: https://vk.com/dev/Post

Виджет для сообществ

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

vidget-dlya-soobshestv-vkontakte-na-sayt

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

Ссылка на виджет: https://vk.com/dev/Community

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

Виджет «Мне нравится» позволит посетителям вашего сайта поставить «Мне нравится» понравившейся им записи или поделиться ссылкой на эту запись со своими друзьями. Пользователь, поставивший лайк какой-либо записи с вашего сайта, увидит в своём профиле в разделе «Закладки» ссылку на эту запись со своей отметкой.

vidget-mne-nravitsya-vkontakte-na-sayt

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

Ссылка на виджет: https://vk.com/dev/Like

Виджет рекомендаций

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

vidget-rekomendacii-vkontakte-na-sayt

Ссылка на виджет: https://vk.com/dev/Recommended

Виджет опросов

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

vidget-oprosov-vkontakte-na-sayt

Ссылка на виджет: https://vk.com/dev/Poll

Виджет для авторизации

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

Ссылка на виджет: https://vk.com/dev/Auth

Публикация ссылок

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

Ссылка на виджет: https://vk.com/dev/Share

Виджет «Подписаться на автора»

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

Ссылка на виджет: https://vk.com/dev/Subscribe

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

8uh.ru

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

Первым из виджетов, который заслуживает особого внимания является Виджет для комментариев. Он очень прост, гораздо проще социального плагина комментариев 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).

nikel-blog.ru

В статье рассмотрим как создать виджет вконтакте. Например, Вы можете установить вот такой виджет на главную страницу сайта (рис.1)

Вы можете установить вот такой виджет на главную страницу сайта
Рисунок 1.

Создание и установка виджета

Для того, чтобы установить виджет "Мы вКонтакте" на главной странице вашего интернет-магазина, вам нужно сделать следующее.

1) Перейти на сайт http://vk.com/dev

Далее выбрать в меню "Продукты", слева, в меню, выбрать пункт "Виджеты для сайтов", далее на странице, перейти в пункт "Сообщества" (рис.2).

Далее выбрать в меню "Продукты", слева, в меню, выбрать пункт "Виджеты для сайтов", далее на странице, перейти в пункт "Сообщества"
Рисунок 2.

2) На открывшейся странице будет конструктор виджетов.

1. Нужно вставить ссылку на свою группу в поле "Ссылка на страницу"

2. Ширина блока на сайте по умолчанию 295px, поэтому мы рекомендуем изменить ширину на 265px. 

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

Также, вы можете поменять высоту и цвет блока на своё усмотрение. 

3. В принципе, с виджетом всё готово, копируем весь код из поля "Код для вставки" (рис.3).

В принципе, с виджетом всё готово, копируем весь код из поля "Код для вставки"
Рисунок 3.

3) Переходим в часть администрирования магазина.

Пункт меню Магазин — CMS — Статические блоки, в списке находим статический блок с названием "Виджет Вконтакте "Группа" (ключ VK) и переходим в его редактирование (иконка карандаша).

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

Нажимаем "Сохранить" (рис.4).

Нажимаем "Сохранить"
Рисунок 4.

4) Переходим на главную страницу магазина чтобы проверить результат (рис.5).

Переходим на главную страницу магазина чтобы проверить результат
Рисунок 5.

www.advantshop.net

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

Вот так виджет вконтакте выглядит на сайте. Можете и «в живую» его увидеть — он как раз находится справа от вас. Прокрутите колесико мышки немного вниз и сами сможете его лицезреть ?

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

Зачем нужен виджет вконтакте

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

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

Причем, посетитель сайта буквально в один клик может подписаться на новости вашей группы. И это здорово! Ну не любят люди делать лишних телодвижений и ничего с этим не поделаешь. Лень-матушка… )

Запомните, что каждый лишний клик мышкой — это очередной барьер, который проходят далеко не все ваши посетители и подписчики.

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

Как создать виджет вконтакте для сайта

Для того, чтобы создать виджет вконтакте откройте свою страницу в этой социальной сети.
Затем спускайтесь в самый низ экрана и слева, под таргетированными объявлениями, ищите кнопку «Разработчикам». Пару раз ко мне обращались за помощью начинающие администраторы и писали, что не могут внизу страницы найти эту самую кнопку.

Если вы тоже устали крутить колесико мышки, то поднимитесь на самый верх вашей страницы, кликните на треугольничек возле вашего имени и найдите кнопку «Помощь»

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

Перед вами откроется страница, внизу которой вы без труда найдете кнопку «Разработчикам»

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

 

Вы попадете на страницу разработки приложений. Кликните на кнопку «Подключение сайтов и виджеты»

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

Найдите раздел «Виджеты для сайтов» и кликните на кнопку «Сообщества».

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

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

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

Вы увидите перед собой 5 блоков:

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

  1. В поле «Ссылка на страницу» введите адрес своей группы.
  2. В поле «Вид» — выбираете наиболее интересную для вас опцию:
    • Участники — на виджете будут отображаться аватарки участников вашего сообщества;
    • Новости — будут видны последние новости группы;
    • Только название — у вас на сайте будет только название вашего сообщества.
  3. В третьем блоке вы сможете настроить размеры виджета — его ширину и высоту.
  4. В четвертом — по своему усмотрению изменить цвет фона, текста и кнопок.
  5. В самом нижнем поле (в красном квадрате) находится как раз тот самый код, который нам нужно будет вставить на сайт.

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

Как установить блок сообщества вконтакте на сайт

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

Зайдите в админку сайта. В панели управления найдите  «Внешний вид».

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

Затем там же кликните на вкладку «Виджеты». Вам нужно перетащить блок «Текст» (произвольный текст или HTML-код) в ваш сайдбар.

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

 

В блоке «Текст» можно придумать заголовок к виджету, вставить код и обязательно сохранить. Кстати сказать, заголовок — вещь не обязательная ?

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

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

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

Собственно, все. Ну и по традиции предлагаю вам посмотреть видеоурок, в котором я показываю все то, о чем написано в статье. Если у вас возникнут вопросы, то задавайте их в комментариях — я с радостью отвечу!

 

vzletonline.ru

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

Предварительные условия:
Необходимо создать iframe приложение и добавить его в сообщество. Насколько я понял — это необходимо только для создания ключа ( чтобы можно было управлять виджетом на стороне сервера ) и первоначального добавления виджета на страницу.

Iframe приложение должно «смотреть» на страницу где будет вот такой вот код:
index.html:

<!doctype html> <html lang="ru"> <head>  <meta charset="UTF-8">  <meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title>   <!-- Подключаем jquery -->  <script src="https://code.jquery.com/jquery-1.12.4.min.js" defer></script>  <!-- Подключаем VK -->  <script src="https://vk.com/js/api/xd_connection.js?2" type="text/javascript" defer></script>	 	  <!-- Подключаем скрипт регулировки высоты -->  <script src="/vk_height.js" defer></script> 	 </head> <body style='text-align:center;padding-top:50px;' id='body'> 	<a href="javascript:void(0)" id="set-permission">Создать ключ доступа к виждету сообщества</a> 	<br> 	<br> 	<a href="javascript:void(0)" id="set-widget">Добавить виждет в сообщество</a> </body> </html>

vk_height.js:

// инициализация вк VK.init(, function() {   console.log('Init successful');  }, function() {   console.log('Error init'); }, '5.73');   // функция дня изменения размера окна в зависимости от содержимого страницы function autosize(width) {  //Проверяем элемент body на наличие.  if (!document.getElementById('body')) {  alert('error');  return;  }  // Успешно ли подключен ВК скрипт  if (typeof VK.callMethod != 'undefined') {  /*  Вызываем функцию vk js api для управления окном.  VK.callMethod('функция', параметры)  В данном случае у нас - VK.callMethod('изменение_размеров_окна', ширина, высота);  Так же добавляем еще 60 пикселей что бы было небольшое расстояние.  */  VK.callMethod('resizeWindow', 840, document.getElementById('body').clientHeight + 60);  } else {  alert('error #2');  } }  $(document).ready( function(){  //Вызываем функцию регулировки высоты каждые пол секунды.  setInterval('autosize(607)', 500);  	 	$('#set-permission').on('click', function(e) { 		e.preventDefault(); 		 		// запрос прав доступа для дальнейшего обновления данных посредством крона 		// после запрса создается ключ, который можно посмотреть на странице управления сообществом 		// его и нунжно будет применить для обновления данных в виджете через сервер 		// дока прав тут https://vk.com/dev/permissions 		// дока метода тут https://vk.com/dev/clientapi?f=3.+showGroupSettingsBox 		VK.callMethod("showGroupSettingsBox", 64); 	}); 	 	$('#set-widget').on('click', function(e) { 		e.preventDefault(); 		 		// запрос установки виджета 		// типы виджетов можно глянуть тут https://vk.com/dev/objects/appWidget 		// как подключить виджет можно глянуть тут https://vk.com/dev/apps_widgets 		VK.callMethod('showAppWidgetPreviewBox', 'text', 'return {' +  			'"title": "Цитата",' +  			'"text": "Текст цитаты"' +  		'};'); 		 		// типы событий, генерируемых после выполнения запроса на установку виджета можно глянуть тут https://vk.com/dev/apps_widgets 		// работа с событиями вк https://vk.com/dev/Javascript_SDK?f=4.1.+VK.addCallback 		VK.addCallback('onAppWidgetPreviewSuccess', function f(data){  			alert("Виджет успешно добавлен");  		}); 	});	 	 });

После создания данных страниц у вас появится возмжность создать ключ (который будет доступен из управления сообществом) и создание простого виджета

Серверную часть я полностью описывать не буду и покажу только само тело запроса, главное запросить данные через culr по ссылке https://api.vk.com/method/ (Вот гайд)

Сам запрос:

$api = new AppApiMainVk(['access_token' => 'ключ_корый_мы_сгенерировали_первой_кнопкой']);  $api->request(  'appWidgets.update',  [  'type' => 'list',  'code' => '  var users = API.users.get({"user_ids": [11111, 22222, 33333]});    return {   "title": "Конкурс за призы",   "rows": [  {   "title": users[0].first_name + " " + users[0].last_name,   "icon_id": "id11111",  "descr" : "1 место - 2000 баллов",  "button" : "Результаты конкурса",  "button_url" : "https://vk.com/link"  },  {   "title": users[1].first_name + " " + users[1].last_name,   "icon_id": "id2222",  "descr" : "2 место - 1890 баллов",  "button" : "Правила и призы",  "button_url" : "https://vk.com/link"  },  {   "title": users[2].first_name + " " + users[2].last_name,   "icon_id": "id22222",  "descr" : "3 место - 1890 баллов",  "button" : "Хочу на марафон",  "button_url" : "https://vk.com/link"  }  ]  };'  ]  );

Подробности о теле запроса можно узнать тут
А как его правильно писать — тут

Вышенаписанный php код можно добавить в крон, автоматизировать и наслаждаться жизнью. И на последок — вот пример рабочего кода в сообществе (сорян за стили, и некоторые замазанные части, мне лень было делать нормальный скрин):
5a9e7f04c5275110898228.png

toster.ru

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

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

 <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 секунд
Пробуйте!

Ответить

bloggood.ru

Что делает новый виджет?

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

виджет сообщения сообщества

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

На что делают ставку разработчики?

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

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

Что необходимо для установки виджета Сообщения сообщества?

Чтобы установить виджет на сайт, компании необходимо:

  • вести сообщество в социальной сети ВКонтакте
  • в разделе «Управление сообществом» активировать виджет

подключение виджета сообщения сообщества

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

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

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

blog.getgoodrank.ru


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.