تعتبر النوافذ المنبثقة من أهم الوسائل التي يلجأ اليها المدون (صاحب المواقع) للفت انتباه الزائر بشيء معين، سواء كان اعلان (لا أقصد إعلانات ادسنس لأنهذه الطريقة تعتبر مخالفة لقوانين وشروط جوجل) أو صندوق الفيسبوك او التويتر او صندوق الاشتراك عن
طريق البريد الالكتروني وهلم جرا .

لذلك في هذه التدوينة سنتعلم سويا طريقة انشاء هذه النافذة المنبثقة بتقنية jQuery وسنخصصها في هذا الشرح لصندوق اعجابات الفيسبوك (Facebook) لأن أغلب المستخدمين يتوفرون على صفحات فيسبوك لمدوناتهم، ويريدون الكثير من المشتركين عن طريق حث الزائر على الضغط على زر الاعجاب (J'aime/Like) .

مميزات الإضافة :

1. كود بسيط . بتقنية ( jQuery )
2. اضافة انيقة وجذابة.
3. الأهم من المميزات السابقة هو أن النافذة تظهر مرة واحدة للزائر، أي أنها لن تسبب له الازعاج والقلق .

سلبيات الإضافة :

1. للاضافة شئ سلبي واحد وهو : أنك عندما تريد التعديل على الإضافة بما يناسب مدونتك ستظهر لك مرة واحدة فقط ، مما ستضطر الى مسح ملفات الكوكيز (Kookies) لأنها تعتمد على حفظ إيبي Ip الزائر لكي لا تظهر له مرة ثانية. لكن لاتنس انك ستعدل عليها مدة واحدة فقط .

طريقة تركيب الإضافة :

• اذهب الى لوحة التحكم
• توجه الى تخطيط
• اختر اضافة أداة 
• اختر اداة HTML/JAVASCRIPT
• الصق الكود اسفله 
• ثم حفظ 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src="http://exeideasinternational.googlecode.com/files/jquery.colorbox-min.js"></script>

<script type="text/javascript">

jQuery(document).ready(function(){

if (document.cookie.indexOf('visited=true') == -1)

{

var fifteenDays = 1000*60*60*24*30;

var expires = new Date((new Date()).valueOf() + fifteenDays);

document.cookie = "visited=true;expires=" + expires.toUTCString();

$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});

}

});

</script>

<style type="text/css">

/*

ColorBox v1.3.16

(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)

*/

#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cb

oxBottomLeft{clear:left}#cboxContent{position:re

lative}#cboxLoadedContent{overflow:auto}#cboxTitle{margin:0}#cboxLoa

dingOverlay,#cboxLoa

dingGraphic{position:absolute;top:0;left:0;width:100%}#cboxPrevious,#cboxNext,#cboxClose,#cbox

Slideshow{cursor:pointer}.cboxPhoto{

float:left;margin:auto;

order:0;display:block}.cboxIframe{width:100%;height:100%;display:block;border:0}#cboxOverlay{bac

kground:#000;opacity

0.5 !important}#colorbox{box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4

;-webkit-box-shadow:0 0

15px rgba(0,0,0,0.4)}#cboxTopLeft{width:14px;height:14px;background:url(http://4.bp.blogspot.com/-_VSGG

UcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/G

Rny7olLbv8/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(http://4

.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat

-36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2

qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:4

3px;background:url(htt

p:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0C0M2sPsRnuEn5ZyS9AhBU-AGcMWxcsJMM9j1l-M86YPQzCWvLYDwj2_NTs9PGushJqBqg_iwSnPhCvOUgjGicCrdi0BUiseOp33gU4TqmMs5FbZGXOGfCJzDEGOUacs56lGY7mBh-vI/s400/border.png) repea

t-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE

/TwNIXL6W2qI/A

AAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;backgr

ound:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiNPWB770nKnT97U4jBhTUk8QcZ6ICKYLn5usQZPIrLSCGmtQGuzJRvQiuKvEqvVjzjhKA4lQ_foMZO-PrUttW46hLUlNl-H1GIJtVO4vMirCPLho9KAh4JZmWflOhp_NV0yPysvAtZAE/s1600/control

s.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/T

wNIXL6W2qI/AAA

AAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -211px 0}#cboxContent{background:#fff;overflow:visible}#cbox

LoadedContent{margin-bottom:5px}#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKTPr6GsOt-kVxj1sS5XaOCj6NcGjt30kjcT_g95fGxDkx8WwFPkA44I3Ty-dixRPiYc3-R55DvF2GSvAUlsRGQfJbDLGEEMHWqMkBgrH8dFZ6Bm2rVi0iC7PQ6-Ymb_Rs5aH5tkKwqss/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{http://3.bp.blogspot.com/-SKktU1-SCCw/TxohpRB19LI/AAAAAA

AAF0Y/iwIo3LnjoE0/s400/loading.gif) no-repeat center center}#cboxTitle{position:absolute;botto

m:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C}#cboxCurrent{position:absolu

te;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{position:absol

ute;bottom:-29px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk

/s1600/controls.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px}#cboxPrevious{left:0px;b

ackground-position:-51px -25px}#cboxPrevious.hover{background-position:-51px 0px}#cboxNext{left:27px;background-

position:-75px -25px}#cboxNe

xt.hover{background-position:-75px 0px}#cboxClose{right:0;background-position:-100px -25px}#cboxClose.hover{backgr

ound-position:-100px 0px}.cboxSlideshow_on #cboxSlideshow{bac

kground-position:-125px 0px;right:27px}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px}.cboxSlideshow_off #cboxSlideshow.hover{

background-position:-125px 0px}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666}#mdfb a,#mdfb a:ho

ver,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-

weight:bold;margin:10px 0;border:20px solid

#ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCC;paddi

ng:10px;line-height:25px;font-family:arial !important}

</style>

<div style='display:none'>

<div id='exestylepopups' style='padding:10px; background:#fff;'>

<center><h3 class="mdbox-title">Receive all updates via Facebook. Just Click the Like Butt

on Below...</h3></center><center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F04pro

&amp;width=300&amp;color

scheme=light&amp;show_faces=true&amp;border_color

=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no"

frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center><p style=" float:rig

ht; m

a

rgin-right:35px; font-size:9px;" >أ

حصل عليها <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://04pro.blogspot.com/2013/02/like-fa

cebook-jQuery.html">مدونة المحترفين</a></p>

</div></div>

• 04pro  بـ : اسم صفحتك على الفيسبوك مثال : www.facebook.com/04pro .