إضافة نافذة منبثقة بتقنية jQuery لصندوق إعجابات الفيسبوك لمدونات بلوجر

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

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

لإضافة هاته الأداة الجديدة كما  هي ضاهرة في الصورة أعلاه أمر سهل جدا ، فقط تقوم بنسخ الكود الذي سوف أضعه أسفل ، ثم تتوجه إلى لوحة تحكم مدونتك ، وتقوم بالضغط على تخطيط ، ثم إضافة أداة ، وتقم باختيار html/java script ، ثم تقوم بلصق الكود التالي

<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,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block}.cboxIframe{width:100%;height:100%;display:block;border:0}#cboxOverlay{background:#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4n-WtH_xX1RiUcKSFcK8PiCysc9na7gYsCbj9CvouM6xc2VyffypmiWucsOUzJAVpVATSpMD-7MloLkhveJv7RLOekwlOe94hhztsJXX6M7QSc3DFR85I-8BTjteKdRWdrLyFF11orpw/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXVtTiVUFttDeSraWx8D4lk8GTokgw6DvLcLXueKJfGaTRJslkq7xVCn3HFrfEg7kC0W1S_iWW8ztiGzNj97VRjqiBzuZnQZmnAi20qS-Ln67uSKV6kBaEVS5LLrj3dm1NUmuYehPcV94/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4n-WtH_xX1RiUcKSFcK8PiCysc9na7gYsCbj9CvouM6xc2VyffypmiWucsOUzJAVpVATSpMD-7MloLkhveJv7RLOekwlOe94hhztsJXX6M7QSc3DFR85I-8BTjteKdRWdrLyFF11orpw/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4n-WtH_xX1RiUcKSFcK8PiCysc9na7gYsCbj9CvouM6xc2VyffypmiWucsOUzJAVpVATSpMD-7MloLkhveJv7RLOekwlOe94hhztsJXX6M7QSc3DFR85I-8BTjteKdRWdrLyFF11orpw/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXVtTiVUFttDeSraWx8D4lk8GTokgw6DvLcLXueKJfGaTRJslkq7xVCn3HFrfEg7kC0W1S_iWW8ztiGzNj97VRjqiBzuZnQZmnAi20qS-Ln67uSKV6kBaEVS5LLrj3dm1NUmuYehPcV94/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4n-WtH_xX1RiUcKSFcK8PiCysc9na7gYsCbj9CvouM6xc2VyffypmiWucsOUzJAVpVATSpMD-7MloLkhveJv7RLOekwlOe94hhztsJXX6M7QSc3DFR85I-8BTjteKdRWdrLyFF11orpw/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4n-WtH_xX1RiUcKSFcK8PiCysc9na7gYsCbj9CvouM6xc2VyffypmiWucsOUzJAVpVATSpMD-7MloLkhveJv7RLOekwlOe94hhztsJXX6M7QSc3DFR85I-8BTjteKdRWdrLyFF11orpw/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4n-WtH_xX1RiUcKSFcK8PiCysc9na7gYsCbj9CvouM6xc2VyffypmiWucsOUzJAVpVATSpMD-7MloLkhveJv7RLOekwlOe94hhztsJXX6M7QSc3DFR85I-8BTjteKdRWdrLyFF11orpw/s1600/controls.png) repeat-y -211px 0}#cboxContent{background:#fff;overflow:visible}#cboxLoadedContent{margin-bottom:5px}#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisYl7M3jpPQGv64PSQ0E7M_-D6wwP1O_GzimAukRcKQQmciJ3S6z9rjpkuPdgB_rQNAsCIsJHC_9ssZq77wPi47R8nBkLg3me1_-37uauX8Z1siZja_L0i9bWQKUm8LUILr210h5Y_MWY/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPADzNuP8UjeWrWSEI32OdREY2zUiMyG55oGoZJ27wBB2uB6U8cXsjmW-e3kkeacF15_zy64zJLqc9IH6ubcf-FgsC0Geb3J-pBQYc9kBCjcwthKlUpnLjBBjmJvPSi22PY2yF1Jwp018/s400/loading.gif) no-repeat center center}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{position:absolute;bottom:-29px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4n-WtH_xX1RiUcKSFcK8PiCysc9na7gYsCbj9CvouM6xc2VyffypmiWucsOUzJAVpVATSpMD-7MloLkhveJv7RLOekwlOe94hhztsJXX6M7QSc3DFR85I-8BTjteKdRWdrLyFF11orpw/s1600/controls.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px}#cboxPrevious{left:0px;background-position:-51px -25px}#cboxPrevious.hover{background-position:-51px 0px}#cboxNext{left:27px;background-position:-75px -25px}#cboxNext.hover{background-position:-75px 0px}#cboxClose{right:0;background-position:-100px -25px}#cboxClose.hover{background-position:-100px 0px}.cboxSlideshow_on #cboxSlideshow{background-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:hover,#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;padding: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 Button Below...</h3></center><center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fhuhu1981ful&amp;width=300&amp;colorscheme=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:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.4we-eb.blogspot.com">4we-eb</a></p>
</div></div>

أخيرا وقبل حفظ التغييرات ، لا تنسى تغيير الإسم التعريفي لصفحتي على الفيسبوك  باللون الأحمر إلى الإسم  الخاص بصفحتك على الفيسبوك

 ملاحظة : الإسم التعريفي لصفحتك على الفيسبوك هو الإسم الأخير في رابط الصفحة

 مثلا : www.facebook.com/huhu1981ful