我在Popup div中有一个Facebook Like Box。但是,我希望只有当用户直接从Facebook进入网站时才会显示Facebook Like Box。
简而言之:
用户来自Facebook:show
用户直接输入了网址:不显示
用户来自谷歌:不显示
如何查看并验证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>
答案 0 :(得分:0)
您可以使用JavaScript检测引荐来源,然后在引用网址使用.match(regex)
与Facebook匹配时显示一个元素:
var fblike = document.getElementById('fblike');
var ref = document.referrer;
if (ref.match(/^https?:\/\/([^\/]+\.)?facebook\.com(\/|$)/i)) {
fblike.style.display = 'block';
}
&#13;
#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;
}
&#13;
<div id="parent_popup">
<div id="popup">
<div id="fblike"><p>Like us on Facebook!</p></div>
</div>
</div>
&#13;
请注意#fblike
默认情况下display:none
的方式。当用户从Facebook访问时,div将显示使用纯JavaScript代码:document.getElementById('fblike').style.display = 'block';