Как да си добавим в сайта „Facebook Popup box“

x-top100
X-Top100 – World Sites Ranking
12 декември 2014
note 4
Samsung Galaxy Note 4 – Ревю
27 декември 2014
facebook popup

Описание

Всеки път, когато някой потребител отвори уеб сайт или блог, след няколко секунди ще се появи изскачащо прозорче на Facebook. В този урок ще ви кажа и покажа пълната процедура за вграждане на Facebook popup box. Това е полезен проект за увеличаване на Facebook харесванията на вашите страници.

Демо

Поставил съм го в един мой сайт: X-Top100. Отворете за да го видите как изглежда.
Ако не ви се покаже, изчистете вашите cookies от браузъра!

Свалете картинката:

facebook popup

 

Персонализиране на Facebook Popup Like Box:

  1. Настройка на времето за появяване на Facebook popup-a

    По подразбиране popup-a изкача на всеки 5 секунди след като страницата се зареди. Ако искате да промените това време, трябва да намерите в кода „.delay(5000)“. Заменете 5000 с каквото желаете. 1 секунда = 1000, 5 секунди = 5000, 10 секунди = 10000.

  2. Появяване на Facebook Popup всеки път когато страницата се отвори

    По подразбиране, Facebook прозореца се появява само първият път когато потребител посети страницата. Ако искате да промените това и да се показва винаги когато потребител зареди дадена страница, намерете в кода следният ред и го изтрийте:

    $.cookie(‘popup_user_login’, ‘yes’, { path: ‘/’, expires: 7 });

    Ако използвате този ред в кода, ще се показва Facebook Popup един път на всеки 30 дни. Трябва да изчистите вашите cookies от браузъра ви за да го видите отново

Ето го и кода

CSS

<style>
#popupwindow {
display:none;
background:rgba(0,0,0,0.6); /*Set Window Background Color*/
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#backgroundsetting {
width:455px;
height:255px;
position:relative;
background:#ffffff; /*Set Popup box Background Color*/
top:20%;
left:2%;
margin:0px auto;
}
#imagepopup {
cursor:pointer;
background:url(popupclose.png) repeat; /*Close Icon Url*/
height:40px;
width:40px;
margin-top:-258px;
margin-left:413px;
position:absolute;
}
</style>

HTML

<div id=’popupwindow’>
<div id=’backgroundsetting’>
<!– Only Replace Your Facebook Page Name and Facebook Page ID on Red Mark–>
<iframe allowtransparency=’true’ frameborder=’0′ scrolling=’no’ src=“http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FClick-Roots%2F215413452002080&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false“ style=’ border:5px solid #005387; overflow: hidden; width: 450px; height: 250px;’></iframe>
<span style=“margin-left:235px;margin-top:-43px; font-family:Times New Roman; font-size:12px; color:#005387; position:absolute;“>Like Our Facebook Page For More Updates</span>
<div id=’imagepopup’>
</div>
</div>
</div>

Javascript & JQuery

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’ type=’text/javascript’></script>
<!– Jquery Code –>
<script type=’text/javascript’>
jQuery.cookie = function (key, value, options) {
if (arguments.length > 1 && String(value) !== „[object Object]“) {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === ‘number’) {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), ‘=’,
options.raw ? value : encodeURIComponent(value),
options.expires ? ‘; expires=’ + options.expires.toUTCString() : “,
options.path ? ‘; path=’ + options.path : “,
options.domain ? ‘; domain=’ + options.domain : “,
options.secure ? ‘; secure’ : “
].join(“));
}
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp(‘(?:^|; )’ + encodeURIComponent(key) + ‘=([^;]*)’).exec(document.cookie)) ? decode(result[1]) : null;
};
</script>
<script type=’text/javascript’>
jQuery(document).ready(function($){
if($.cookie(‘popup_user_login’) != ‘yes’){
$(‘#popupwindow’).delay(5000).fadeIn(‘medium’);
/*You can change Popup window appearing time according to your wish. Note: 1sec = 1000*/
$(‘#imagepopup, #fan-exit’).click(function(){
$(‘#popupwindow’).stop().fadeOut(‘medium’);
});
}
$.cookie(‘popup_user_login’, ‘yes’, { path: ‘/’, expires: 7 });/*By default, the Facebook Popup like box only first time appear when user visits your page. If you would like the facebook like box to popup every time when the page loads, then remove this line of code*/
});
</script>

Червеният ред е този който трябва да изтриете ако искате прозореца да се появява на всяко зареждане на страницата.

Пълен код

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8″ />
<title>Facebook Like Popup Box</title>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’ type=’text/javascript’></script>
<!– Jquery Code –>
<script type=’text/javascript’>
jQuery.cookie = function (key, value, options) {
if (arguments.length > 1 && String(value) !== „[object Object]“) {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === ‘number’) {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), ‘=’,
options.raw ? value : encodeURIComponent(value),
options.expires ? ‘; expires=’ + options.expires.toUTCString() : “,
options.path ? ‘; path=’ + options.path : “,
options.domain ? ‘; domain=’ + options.domain : “,
options.secure ? ‘; secure’ : “
].join(“));
}
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp(‘(?:^|; )’ + encodeURIComponent(key) + ‘=([^;]*)’).exec(document.cookie)) ? decode(result[1]) : null;
};
</script>
<script type=’text/javascript’>
jQuery(document).ready(function($){
if($.cookie(‘popup_user_login’) != ‘yes’){
$(‘#popupwindow’).delay(5000).fadeIn(‘medium’);
/*You can change Popup window appearing time according to your wish. Note: 1sec = 1000*/
$(‘#imagepopup, #fan-exit’).click(function(){
$(‘#popupwindow’).stop().fadeOut(‘medium’);
});
}
$.cookie(‘popup_user_login’, ‘yes’, { path: ‘/’, expires: 7 });/*By default, the Facebook Popup like box only first time appear when user visits your page. If you would like the facebook like box to popup every time when the page loads, then remove this line of code*/
});
</script>
<style>
#popupwindow {
display:none;
background:rgba(0,0,0,0.6); /*Set Window Background Color*/
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#backgroundsetting {
width:455px;
height:255px;
position:relative;
background:#ffffff; /*Set Popup box Background Color*/
top:20%;
left:2%;
margin:0px auto;
}
#imagepopup {
cursor:pointer;
background:url(popupclose.png) repeat; /*Close Icon Url*/
height:40px;
width:40px;
margin-top:-258px;
margin-left:413px;
position:absolute;
}
</style>
</head>
<body>
<div id=’popupwindow’>
<div id=’backgroundsetting’>
<!– Only Replace Your Facebook Page Name and Facebook Page ID on Red Mark–>
<iframe allowtransparency=’true’ frameborder=’0′ scrolling=’no’ src=“http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FClick-Roots%2F215413452002080&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false“ style=’ border:5px solid #005387; overflow: hidden; width: 450px; height: 250px;’></iframe>
<span style=“margin-left:235px;margin-top:-43px; font-family:Times New Roman; font-size:12px; color:#005387; position:absolute;“>Like Our Facebook Page For More Updates</span>
<div id=’imagepopup’>
</div>
</div>
</div>
</body>
</html>

  • На мястото на „Click-Roots“ въведете името на вашата страница
  • След него има „215413452002080“, там въведете ID-то на вашата страница. Ако не знаете къде да го намерите посетете http://findmyfacebookid.com/ и поставете страницата си.

Ако имате някакви проблеми или въпроси относно кода, не се колебайте да се свържете с мен. Ще помогна с каквото мога.

 

Станимир Стоянов
Станимир Стоянов
Собственик и основател на Web Visuality. И помнете: Ако имате 8 часа работно време – работете 11 часа. Това е вашият дялов капитал в живота. А ако работите 15 часа, ще забогатеете. Един час на денонощието мисъл за бъдещето ще сте по-предвидливи. Без работа няма просперитет, няма богатство, няма слава и пари.

Вашият коментар