Всплывающее окошко соц группы

[Yworld_garry]

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

Стили добавляем себе или цепляем отдельным файлом.

Код Выделить Развернуть

#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;
        max-width: 460px;
        margin: 10% auto;
        padding: 5px 5px 5px 5px;
        border: 5px solid #ddd;
        position: relative;
        /*--CSS3 CSS3 Тени для Блока--*/
        -webkit-box-shadow: 0px 0px 20px #000;
        -moz-box-shadow: 0px 0px 20px #000;
        box-shadow: 0px 0px 20px #000;
        /*--CSS3 Закругленные углы--*/
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
.popup1 a.logo {
    background-image: url(images/facebook-dialog-logo.png);
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    width: 108px;
    height: 28px;
}
.popup1 {
    background-color: #3b5998;
    color: #fff;
    padding: 5px 5px 47px 5px;
    background-image: url(images/facebook-dialog-background.png);
    background-position: bottom center;
    background-repeat: no-repeat;
}
    #popup h1 {
        font: 28px Monotype Corsiva, Arial;
        font-weight: bold;
        text-align: center;
        color: #008000;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    }
    #popup h2 {
        font: 24px Monotype Corsiva, Arial;
        color: #008000;
        text-align: left;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    }
    /* кнопка закрытия */
    .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);
    }
Код самого окошка со скриптом, можно инклюдить себе в тему скачав архив ниже или просто добавить все это дело.

Код Выделить Развернуть

   <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
 <style type="text/css">

</style>
<script type='text/javascript'>//<![CDATA[
$(window).on('load', function() {
/*!
 * jQuery Cookie Plugin v1.4.1
 * https://github.com/carhartl/jquery-cookie
 *
 * Copyright 2006, 2014 Klaus Hartl
 * Released under the MIT license
 */
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// CommonJS
factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {

var pluses = /\+/g;

function encode(s) {
return config.raw ? s : encodeURIComponent(s);
}

function decode(s) {
return config.raw ? s : decodeURIComponent(s);
}

function stringifyCookieValue(value) {
return encode(config.json ? JSON.stringify(value) : String(value));
}

function parseCookieValue(s) {
if (s.indexOf('"') === 0) {
// This is a quoted cookie as according to RFC2068, unescape...
s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
}

try {
// Replace server-side written pluses with spaces.
// If we can't decode the cookie, ignore it, it's unusable.
// If we can't parse the cookie, ignore it, it's unusable.
s = decodeURIComponent(s.replace(pluses, ' '));
return config.json ? JSON.parse(s) : s;
} catch(e) {}
}

function read(s, converter) {
var value = config.raw ? s : parseCookieValue(s);
return $.isFunction(converter) ? converter(value) : value;
}

var config = $.cookie = function (key, value, options) {

// Write

if (arguments.length > 1 && !$.isFunction(value)) {
options = $.extend({}, config.defaults, options);

if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setTime(+t + days * 864e+5);
}

return (document.cookie = [
encode(key), '=', stringifyCookieValue(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path    ? '; path=' + options.path : '',
options.domain  ? '; domain=' + options.domain : '',
options.secure  ? '; secure' : ''
].join(''));
}

// Read

var result = key ? undefined : {};

// To prevent the for loop in the first place assign an empty array
// in case there are no cookies at all. Also prevents odd result when
// calling $.cookie().
var cookies = document.cookie ? document.cookie.split('; ') : [];

for (var i = 0, l = cookies.length; i < l; i++) {
var parts = cookies[i].split('=');
var name = decode(parts.shift());
var cookie = parts.join('=');

if (key && key === name) {
// If second argument (value) is a function it's a converter...
result = read(cookie, value);
break;
}

// Prevent storing a cookie that we couldn't decode.
if (!key && (cookie = read(cookie)) !== undefined) {
result[name] = cookie;
}
}

return result;
};

config.defaults = {};

$.removeCookie = function (key, options) {
if ($.cookie(key) === undefined) {
return false;
}

// Must not alter options, thus extending a fresh object...
$.cookie(key, '', $.extend({}, options, { expires: -1 }));
return !$.cookie(key);
};

}));



if( $.cookie('name') ) return false;
var delay_popup = 9000;
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
$.cookie('name', 'value', { expires: 7, path: '/' });
});//]]>  

</script>



    <div id="parent_popup">
<div id="popup">
          <div class="popup1"><a href="https://www.facebook.com/promo.yworld" target="_blank" class="logo"></a>Нажмите «Нравится», присоединяйтесь к нашему сообществу в Facebook</div>
                  
          <div class="fb-page" data-href="https://www.facebook.com/promo.yworld" data-width="440" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/promo.yworld"><a href="https://www.facebook.com/promo.yworld">Promo Yworld</a></blockquote></div></div>
          <a class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>
        </div>
    </div>
var delay_popup = 9000;  через сколько секунд появится

$.cookie('name', 'value', { expires: 7, path: '/' });  сколько дней не будет показываться, сейчас стоит 7

Если качнете архив то надо будет архив залить в корень форума и в index.template.php  подцепить файл из него
гденить над </body> таким образом :

include_once('soc/soc.php');  Самый простой вариант подключения, все что потребуется это добавить стили и подключить файл.

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

Код Выделить Развернуть

<div class="fb-page" data-href="https://www.facebook.com/promo.yworld" data-width="440" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/promo.yworld"><a href="https://www.facebook.com/promo.yworld">Promo Yworld</a></blockquote></div></div>
Архив цепляю, там поменять пути до картинок в стилях, файл стилей так же там.

Пример смотрим Тут , всплывет через 10 сек.



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

[Beer]

А существует ли вариант чтобы всплывающее окно появлялось только при прокрутке страницы в самый низ?
А если чел не зарегистрирован ни в одном соцобществе - ему будет всплывать?

[Yworld_garry]

А существует ли вариант чтобы всплывающее окно появлялось только при прокрутке страницы в самый низ?

Наверняка))

А если чел не зарегистрирован ни в одном соцобществе - ему будет всплывать?

Будет))

[gorbi]

А как показывать всплывающее окно только гостям?

[kak2z]

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

Код Выделить Развернуть

if($user_info['is_guest']) include_once('soc/soc.php');

[gorbi]

А в мод сложно собрать всплывающее окно с текстом?

[kak2z]

А в мод сложно собрать всплывающее окно с текстом?

не сложно)) надо только четко поставлено ТЗ)) какие настройки должны быть.. там вижу в коде отображдение чего от с ФБ есть.. нужно ли оно.. в общем нужно четкое описание того чего хочется)

[gorbi]

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

[kak2z]

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

я не знаю как ПС относятся к всяким всплывающим окнам... не люблю я такого))

[gorbi]

Есть такое. Но тем не менее, это практически стандарт, по-модному это называется сценарий взаимодействия с клиентом 

[Yarik]

Негативно ПС относятся к тому что мешает просмотру страницы.Различные всплывающие окна к этому и относятся.Бот не будет разбираться что там в всплывающем окне,классифицирует это как попандер который мешает просмотру страниц и всё.

[gorbi]

Негативно ПС относятся к тому что мешает просмотру страницы.Различные всплывающие окна к этому и относятся.Бот не будет разбираться что там в всплывающем окне,классифицирует это как попандер который мешает просмотру страниц и всё.

Удивительно на фоне на фоне моды "подпишись на нашу рассылку" или "присоединяйся к нам в соцсетях".

[Yarik]

Удивительно на фоне на фоне моды "подпишись на нашу рассылку" или "присоединяйся к нам в соцсетях".

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