Показать Facebook, как всплывающее окно, если referrer является Facebook

Question

У меня есть Facebook, как ящик внутри всплывающего div. Тем не менее, я бы хотел, чтобы Facebook Like Box отображался ТОЛЬКО, когда пользователь вошел в сайт непосредственно из Facebook.

Короче:

Пользователь вышел из Facebook: показать

Введенный пользователем URL напрямую: не показывать

пришел пользователь Google: не показывать

---

Как я могу проверить и проверить, что facebook является реферером пользователя? Вот мой код:

if (document.cookie.indexOf('_visited=1') == -1) { 
 
    var delay_popup = 1000; 
 
    setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup); 
 
    var date = new Date; 
 
    date.setDate(date.getDate() + 1); // текущая дата + 1 день 
 
    document.cookie = '_visited=1; path=/; expires=' + date.toUTCString(); 
 
}

#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: 380px; 
 
    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: 10px; 
 
    -moz-border-radius: 10px; 
 
    border-radius: 10px; 
 
} 
 

 
#popup h4 { 
 
    font: 28px Monotype Corsiva, Arial; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    color: #008000; 
 
    text-shadow: 0 1px 3px rgba(0, 0, 0, .3); 
 
} 
 

 
#popup h5 { 
 
    font: 24px Monotype Corsiva, Arial; 
 
    color: red; 
 
    text-align: center; 
 
    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: 16px; 
 
    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); 
 
}

<div id="parent_popup"> 
 
    <div id="popup"> 
 
    <font size="2" style="font-size: 15pt;"> 
 
     <b style="color: rgb(255, 0, 0);"><center>pls like us !</center></b> 
 
    </font> 
 
    <center>like box code </center> 
 
    <p style="text-align: center;"> 
 
     <strong><a class="button" href=""></a></strong> 
 
    </p> 
 
    </div> 
 
</div>

Answer 1

Вы можете использовать JavaScript для обнаружения реферера, а затем показать элемент, если реферер URL соответствует фейсбук с помощью .match(regex):

var fblike = document.getElementById('fblike'); 
 
var ref = document.referrer; 
 
if (ref.match(/^https?:\/\/([^\/]+\.)?facebook\.com(\/|$)/i)) { 
 
    fblike.style.display = 'block'; 
 
}

#parent_popup { 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    position: fixed; z-index: 1; 
 
    top: 0; right: 0; bottom: 0; left: 0; 
 
    text-align: center; 
 
} 
 

 
#popup { 
 
    background: #fff; 
 
    margin: 10% auto; 
 
    width:50%; 
 
    padding: 5px 20px 13px 20px; 
 
    border: 10px solid #ddd; 
 
    position: relative; 
 
    border-radius: 10px; 
 
} 
 

 
#fblike { 
 
    display: none; 
 
}

<div id="parent_popup"> 
 
    <div id="popup"> 
 
    <div id="fblike"><p>Like us on Facebook!</p></div> 
 
    </div> 
 
</div>

Уведомление о том, как #fblike h как display:none по умолчанию. Когда пользователь посещает от Facebook, то DIV будет отображаться не используя чистый код JavaScript: document.getElementById('fblike').style.display = 'block';

Referer код регулярок от: Checking the referrer with JavaScript