Главное меню

[Скрипт] Всплывающее окно с виджетом Vk и FB для uCoz

  • Обновлено:
    2016-04-14
  • Просмотров:
    2351
  • Отзывов:
    22
  • Рейтинг: 4.7
Для того, чтобы получить аналогичное всплывающее окно у вас на сайте, достаточно "подгрузить" мой скрипт, придав ему необходимые параметры.

Многие из вас могли заметить, что у меня на блоге появилось всплывающее окно, в которое интегрирован виджет с группой ВКонтакте. Сделано это было для набора подписчиков для моей странички: vk.com/uguide.

Я не приемлю различные способы накрутки, поэтому решил использовать максимально "белый" способ продвижения. Ну а теперь, собственно, самое интересное – как все было реализовано, а также что получилось в результате.

Теперь все посетители моего сайта видят "всплывашку", в которой рекламируется мое сообщество. Как показала практика этот метод отлично работает, и приблизительный рост аудитории находится в пределах 6-7% в неделю, что, согласитесь, довольно таки неплохо.

Как установить "всплывашку" на сайт

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

Всплывающий виджет VK для uCoz

Заходим в "ПУ" - "Управление дизайном (шаблоны)" - "Глобальные блоки": "Верхняя (или Нижняя) часть сайта" и в самый низ шаблона вставляем скрипт:

Код
<script type="text/javascript" data-usocial="true" data-type="vk" data-width="400" data-height="271" data-days="3" data-subscribed="11" data-link="44736915" data-delay="5000" src="http://uguide.ru/usocial.js"></script>

Скрин:

Установка всплывающего окна с группой ВК

Сохраняем. Готово. По умолчанию, всплывающее окно появится через 5 секунд после открытия страницы.

Теперь детальнее по параметрам:

  • data-usocial="true" - обязательный параметр;
  • data-type="vk" - обязательный параметр;
  • data-width="400" - ширина виджета соц.сети;
  • data-height="271" - высота виджета соц.сети;
  • data-days="3" - как часто показывать виджет. 3 - означает раз в 3 дня; 
  • data-subscribed="11" - как часто показывать виджет тем, кто нажал "я уже подписан";
  • data-link="44736915" - для ВКонтакте - id сообщества, для Facebook - ссылка на сообщество;
  • data-delay="5000" - задержка начала отображения в мс (1000 - при открытии страницы поп-ап покажется только после 1 секунды, при 10000 - после 10 секунд).

Чтобы сделать фон виджета прозрачным зайдите в "Панель Управления" - "Управление дизайном" и добавьте следующий код в конце "Таблицы стилей (css)":

Код
#fancybox-overlay{opacity: 0 !important;}

Примечание: вместо цифр 44736915 вам нужно подставить id своей группы Вконтакте: чтобы его узнать, заходим на главную страницу своего сообщества Вконтакте, нажимаем "Управление сообществом" и в поле "Адрес страницы" копируем свой id:

Узнать ID группы ВК

Если вместо цифр у вас установлен персональный поддомен, то узнать цифровой id своей группы можно следующим способом:

  1. Зайдите на страницу нужной группы;
  2. Скопируйте ссылку блока "Участники" и вставьте в адресную строку;
  3. Последние цифры в ссылке и есть id группы.

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

Скрипт для Facebook

Кроме того, данный скрипт можно использовать и для социальной сети Facebook.

Пример:

Код
<script type="text/javascript" data-usocial="true" data-type="fb" data-width="400" data-height="271" data-days="3" data-subscribed="11" data-link="https://www.facebook.com/uGuide.ru" data-delay="5000" src="http://uguide.ru/usocial.js"></script>

Способы продвижения группы

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

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

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

  • Постоянное развитие сообщества. Постоянная поддержка активности сообщества – один из важнейших этапов работы. Никто не захочет присоедениться к мертвой группе! Регулярный постинг, соблюдение основной тематики, ответы на вопросы и т.д. – все это покажет вашим посетителям, что сообщство "живое" и есть смысл к нему присоедениться;
  • Кнопки социальных сетей. Постарайтесь максимально облегчить задачу тем посетителям, которые хотели бы поделиться вашим контентом. Социальные кнопочки, расшарки и т.д. – все это должно быть доступно вашей аудитории. Если вы еще не интегрировали их в свои проекты – исправляйте эту ошибку;
  • Авторизация через социальные сети. Настоятельно рекомендую предоставить возможность комментировать ваши материалы при помощи авторизации через социальные сети.
  • Повышение эффективности сайта. Ваше сообщество должно быть "проведено" через весь сайт. Посетители должны иметь возможность подписаться на ваши новости с любой страницы сайта. Изначально у меня был блок "Присоединяйтесь". С его помощью любой желающий мог подписаться на мои новости и получать их в удобном виде, через любую из соц. сетей. Этот блок справлялся со своей задачей, но я решил повысить эффективность, дополнительно запустив всплывающее окно с виджетом. 

На этом все, успехов!

  • Автор: Дмитрий Луценко

avatar

Комментариев:22

Аватар Alnazirka
22 vk Алина Зирка • 12:28, 2016-04-27
После установки скрипта начала всплывать ненужная реклама на сайте?
Это так и есть? Или что то не так?
uGuide.ru: Скорее всего, что-то не так.
С какой бы то ни было рекламой этот виджет никак не связан.
Если это видео-реклама, то вы можете отключить ее в разделе "Настройка баннера и копирайта uCoz":

Или же перейдите на премиум-тариф для октлючения всей рекламы.
Аватар kovboy
21 vk Евгений • 16:46, 2016-04-23
Я писал, про то что перестал работать виджет, извиняюсь. ПЕрестал работать только в браузере Опера, последнее обновление
uGuide.ru: Проверил, виджет отображается во всех браузерах, в том числе и в последней версии Опера (37.0.2178.32)
Аватар nosex
20 uid microvoy • 21:52, 2016-04-17
Когда я вижу на сайте всплывающее окно, не важно какого содержания, автоматически игнорирую и заношу сайт в почти (или абсолютно) черный список. Считаю, что на такую наглость имеют право только очень большие сайты. Хотя для вебмастера это радует глаз и он думает, как круто все сделано.
Аватар Drskif
19 uid Drskif • 15:38, 2016-01-14
А оба виджета можно выводить? И как быть с Одноклассниками?
uGuide.ru: Вк и Fb можно выводить поочерёдно (например, используя ротатор баннеров). Для Ок этот скрипт не предназначен.
Аватар Valter
18 vk Valera Bolotov • 02:08, 2015-12-17
Спасибо помог! up
Аватар Владислав
17 vk Владислав Панарин • 21:36, 2015-11-30
Подскажите, пожалуйста, как поставить такой скрипт на Wordpress ?
uGuide.ru: Пока никак, только для сайтов на uCoz.
Аватар nomid
16 uid Дмитрий ВДД • 20:21, 2015-11-22
Поставил 3 секунды, то есть data-delay="3000" и виджет работает. Но 3 сек, как по мне, не хорошо. Лучше бы 7-10.
uGuide.ru: Тут вы уже сами вправе решать какую задержку ставить. Настоятельно рекомендую сначала посмотреть среднюю длительность сессий, чтобы не получилось, что у вас люди просто не успевают увидеть всплывашку )
Аватар decoin
15 vk Денис Лебедев • 22:53, 2015-10-27
А на битриксе будет работать!?
uGuide.ru: К сожалению, нет((
Аватар avklips
14 uid Владимир • 19:36, 2015-08-18
Отличный скрипт! А для ОК группы нет возможности? И просто для соцкнопок?
uGuide.ru: Нет, только ВК и ФБ(
Аватар SmotrelovaSA
12 uid Светлана Смотрелова • 14:50, 2015-07-10
У меня есть "Нижняя часть сайта", "Первый контейнер и "PRОМО" "Верхней части нет".... куда код-то вставить?
uGuide.ru: Можете ставить в "Нижнюю часть сайта"
Аватар defaultNick7158
11 vk Светлана • 21:03, 2015-06-21
Спасибо! Очень нужный скрипт. smile
Аватар HONDA
10 vk АЛЕКСАНДР ПЛЕСНЫЙ • 08:40, 2015-04-06
подскажите пожалуйста, на дле как поставить?
Аватар Serj
13 fb Сергей Гаврилов • 15:02, 2015-07-10
HONDA, на других движках скрипт работать не будет, только на uCoz.
Аватар TP
9 uid Talysh Post • 22:45, 2015-03-25
Добрый вечер.
Подскажите пожалуста как переделать на Facebook
uGuide.ru: В статье указано как сделать для Фейсбука
Аватар Grabber
8 uid Vladimir • 07:39, 2015-02-07
Отличный скрипт, большое спасибо автору!
Есть такой косяк, работает норм везде кроме IE браузеров.
Я конечно потестил только на своем штатном, он у меня может быть кривоват.
Проблема в следующем: после нажатия кнопки я с вами или уже подписан проходит положенное время как будто я первый раз вошел и скрипт срабатывает снова и снова(выскакивает постоянно).
Конечно можно на Ие не ориентироваться, но все же.
Пользователей которые заходят с этого браузера можно смело отметать, никто заходить не будет после такого.
uGuide.ru: У меня Internet Explorer 11 - такой проблемы не наблюдаю
Аватар Adguard2014
7 vk Anony Mus • 17:58, 2014-12-12
Как сделать фон виджета прозрачным? Все испробовал, не получается
uGuide.ru: Зайдите в Панель Управления - Управление дизайном и добавьте следующий код в конце Таблицы стилей (css):
Код
#fancybox-overlay{opacity: 0 !important;}

Аватар Максимус
6 uid Макс Добров • 21:44, 2014-12-02
Здравствуйте!
Подскажите, пожалуйста, как совместить в таком окне два окошка с группами из vk и odnoklassniki?
Очень полезный скрипт! Спасибо!
uGuide.ru: Так сделать не получится, или же группа ВК, или ФБ
Аватар Iwi
5 vk Iwi Eds • 17:51, 2014-10-14
А как сделать такой же только с виджетом фейсбука?
Аватар Рокка_Максим
3 ya Максим Рокка • 15:28, 2014-09-16
Уточните пожалуйста
1) по какому принципу, запоминается пользователь, гость и подписанный в группу
2) по какому принципу определяется дельта дат для показа блока
3) есть ли вероятность блокировании этого блока антивирусами поисковиков... например яндекса?
uGuide.ru: 1. Такой принцип отсутствует, скрипт не запоминает эти данные.
2. Период показа определяется только двумя параметрами:
А) data-days="3", цифра 3 - это кол-во дней, виджет будет показываться один раз в три дня для тех посетителей, которые нажали "Спасибо, не сегодня" или закрыли окно крестиком.
Б) data-subscribed="11", число 11 - это кол-во дней, означает, что виджет будет показываться раз в одиннадцать дней для тех посетителей, которые нажали "Я уже подписан".
Вы можете сами задавать нужный вам период показа.
3. Такой вероятности нету, у меня этот скрипт стоит уже 7 месяцев и все отлично, никаких блокировок не было.
Аватар Рокка_Максим
4 ya Максим Рокка • 09:27, 2014-09-18
Спасибо за ответ. Я поставил скрипт на все проекты.
Не могу понять момент.
Как скрипт определяет, что этот пользователь уже что-то нажимал...
Нужно же записывать в какую-то базу, какие-то данные
Например, айпи заходил в этот день, нажал вот это, показать через столько дней ему.
Но есть провайдеры, у который айпи постоянно меняется или он один на сегмент человек.
Или может как-то по кукам ориентироваться? Если так, это самый правильный вариант.
Расскажи пожалуйста, как скрипт понимает, что пользователь, уже что-то когда-то нажимал
uGuide.ru: Запоминает по кукам браузера. Если вы зайдете на свой сайт с другого браузери или ip адреса, то вы снова увидите это всплывающее окно, даже если вы уже ранее подписались в группу.
Аватар Nacccta
2 uid Анастасия Мосалева • 18:58, 2014-08-31
А можно поменять синий цвет  на свой, и если можно то как?
Аватар
1 vk Андрей Солдатенко • 16:48, 2014-08-02
Очень хорошая идея.
Но хотелось бы вставить туда приветствие и инструкции с кнопка я читал (я подписан и т.п)
Кто может помочь?
uGuide.ru: Андрей, подставить свой текст в этом скрипте не получится
Добавить комментарий