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

wir, школьник может забадяжить так, что будет ужас...)

Лучше бы за 10 баксов, но не школьнику)) а тому, кто просто сделает такой же вариант как на примере или найдет готовый вариант и переделает его в такой как на примере))

Это называется модальное окно.

это в секцию head

<script src="/js/jquery.bpopup.min.js" type="text/javascript"></script>

 

<script src="/js/jquery.cookie.js" type="text/javascript"></script>

 

<script src="//vk.com/js/api/openapi.js?115" type="text/javascript"></script>

Это в body

    <noindex> 

    

    <!-- init VK API + some javascript -->

<script type="text/javascript">

 

VK.init({  // инициализируем API вконтакте

apiId: 4507856  // тут должен стоять ваш apiId, об этом ниже

});

//-----------------

function setcookie(name, value, expires, path, domain, secure) // функция установки кукисов

{

 document.cookie = name + "=" + escape(value) +

 ((expires) ? "; expires=" + (new Date(expires)) : "") +

 ((path) ? "; path=" + path : "") +

 ((domain) ? "; domain=" + domain : "") +

 ((secure) ? "; secure" : "");

} // конец функции установки кукисов

</script>

    

<!-- popup jQuery -->

<script>

(function($) {

 function Nya(){  // сама функция обработки события готовности страницы в браузере, она делает основную работу

  var date = new Date();

  var minutes = 1440; // 1440 – число минут, которое будет жить кукис-отметка, что пользователь выидел поп-ап, показываем попап человеку не чаще 1 раза в сутки

  date.setTime(date.getTime() + (minutes * 60 * 1000)); // готовми дату истечения кукиса-отметки

  $.cookie("isawNya", "1", { expires: date, path: "/", domain: "kino-prosmotr.net" }); // устанавливаем кукис-отметку, пользователь видел поп-ап!

  $('#element_to_pop_up').bPopup(); // показываем поп-ап

}

 

// DOM Ready

 

 $(function() { // эта функция исполняется автоматически по готовности html страницы у пользователя

  if(!$.cookie("isawNya")) // проверяем, видел ли пользователь куку?

  setTimeout(Nya, 12000); // если нет, то через 2 (120 000 миллисекунд) минуты запускаем вышеописанную функцию function Nya()

 });

})(jQuery);

    </script>  

    

    

    <div id="element_to_pop_up" style="display: none; border: black 1px solid; margin: 10px; background-color: white; padding: 20px; text-align: center; box-shadow: 0 0 20px 5px;">

<b>Не жалейте лайки !!!</b> <br>

<div style="margin: 0 auto;" id="vk_like"></div><br>

Новые фильмы в отличном качестве 2014 года!

Специально для наших подписчиков.<br><br>

<!-- VK Widget --><center>

<div id="vk_groups"></div>

<script type="text/javascript">

VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "300", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 66106163);

</script>

        </center>

<!-- VK Vidgets -->

<script type="text/javascript">

 VK.Widgets.Like("vk_like", {type: "button"}); //это виджет кнопки лайк, как его получить смотри ниже

 VK.Observer.subscribe("widgets.like.liked", function f() // это подписка на событие – пользователь нажал лайк

 {// month cookie

  setcookie('isawNya', '1', (new Date).getTime() + (30 * 24 * 60 * 60 * 1000),'/'); // если пользователь нажал лайк, мы ставим ему кукис-метку на месяц

 });

 

 VK.Observer.subscribe("widgets.groups.joined", function f() // это подписка на событие – пользователь вступил в группу

 {// 5 years cookie

  setcookie('isawNya', '1', (new Date).getTime() + (5 * 365 * 24 * 60 * 60 * 1000), '/'); // если вступил в группу он получает кукис-метку на 5 лет

 });

</script>

</div>

</noindex> 

А где взять эти js?))

http://trendymen.ru/js/jquery.cookie.js - это с примера из первого поста.

jquery.bpopup.min.js - https://yandex.ru/yandsearch?&clid=2186623&text=jquery.bpopup.min.js

Где тут? На searchengines.guru ничего не всплывает. А на .ru я не захожу.

---------- Добавлено 09.09.2015 в 01:53 ----------

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

Другое дело - если я зашел, почитал, мне понравилось, и в конце статьи я увидел "подпишись на интересные новости" ну и т.д. С радостью подпишусь.

На скрине, адрес же видно.)

Разлогинься и будет такое окно.

Ну я вроде как ответил на Ваш вопрос, не?

Немного подумал и сделал для этой темы Скрипт модального окна с предложением подписаться на группу в соцсети ☝

Сам скрипт - в коде страницы.

Запускается при загрузке и закрывается сам через 30 секунд или по кнопке - на 31 день.

Если документ теряет фокус (например, человек нажал кнопку подписки) то ставятся куки на 365 дней.

Все можно изменить и настроить.