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

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

How To Add POP UP Facebook Like Box For Blog & Website?
لذلك في هذه التدوينة سنتعلم سويا طريقة انشاء هذه النافذة المنبثقة بتقنية 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,#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/AVvXsEjOcdGkT02-MRuMCNszSFy84r4VdEYu0K7d0jtIBdZEed3QWNh7hFmWOroKdWcrDCFm0TKxhhGoNuW5x6NC7Ipgqah1vaG4_B3is6xys2snYcoLlBgkY8kT75LeQA0sU7MJzz-XXgCLYyk/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqqaxJz5DF1_Kc5mnkkrdaj-smeVqrObOLUjykuSeNcoWObugiwCtUaTBRLy_UdDOosXOoCBV_v9gd58YFDcVhJxlM-_ug7xFUnLetaswXh9MbhSasj6jcW_gYZXDkHk4nlSmJqNcVIg/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOcdGkT02-MRuMCNszSFy84r4VdEYu0K7d0jtIBdZEed3QWNh7hFmWOroKdWcrDCFm0TKxhhGoNuW5x6NC7Ipgqah1vaG4_B3is6xys2snYcoLlBgkY8kT75LeQA0sU7MJzz-XXgCLYyk/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOcdGkT02-MRuMCNszSFy84r4VdEYu0K7d0jtIBdZEed3QWNh7hFmWOroKdWcrDCFm0TKxhhGoNuW5x6NC7Ipgqah1vaG4_B3is6xys2snYcoLlBgkY8kT75LeQA0sU7MJzz-XXgCLYyk/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqqaxJz5DF1_Kc5mnkkrdaj-smeVqrObOLUjykuSeNcoWObugiwCtUaTBRLy_UdDOosXOoCBV_v9gd58YFDcVhJxlM-_ug7xFUnLetaswXh9MbhSasj6jcW_gYZXDkHk4nlSmJqNcVIg/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOcdGkT02-MRuMCNszSFy84r4VdEYu0K7d0jtIBdZEed3QWNh7hFmWOroKdWcrDCFm0TKxhhGoNuW5x6NC7Ipgqah1vaG4_B3is6xys2snYcoLlBgkY8kT75LeQA0sU7MJzz-XXgCLYyk/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOcdGkT02-MRuMCNszSFy84r4VdEYu0K7d0jtIBdZEed3QWNh7hFmWOroKdWcrDCFm0TKxhhGoNuW5x6NC7Ipgqah1vaG4_B3is6xys2snYcoLlBgkY8kT75LeQA0sU7MJzz-XXgCLYyk/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOcdGkT02-MRuMCNszSFy84r4VdEYu0K7d0jtIBdZEed3QWNh7hFmWOroKdWcrDCFm0TKxhhGoNuW5x6NC7Ipgqah1vaG4_B3is6xys2snYcoLlBgkY8kT75LeQA0sU7MJzz-XXgCLYyk/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/AVvXsEhHj3NpFInd5V3Io1KpfdC-99U9LQqahQ27VedzEFrxCx3Ld5SO5hFx3XzBq6dInTK_xhXkdP1Xm0lKIsR78uY1Vy0ULd54XOSwfyKYqDwq4RxWFqWNOEZ6n6-cT1JX89tONFcm2MpV52o/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFP4Mj4K98Jqb-F23ks613zPw8mxfRepOvWQTOiBxeYRigB_TlPV_WOshxasrnSyhBTVMhj_9vequtcTK_uYr3dt0pAfKQJYw7Jsq1tIW35m1OL0aidAFn_iEkJ9DT3AXD88brFKSK2qE/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/AVvXsEjOcdGkT02-MRuMCNszSFy84r4VdEYu0K7d0jtIBdZEed3QWNh7hFmWOroKdWcrDCFm0TKxhhGoNuW5x6NC7Ipgqah1vaG4_B3is6xys2snYcoLlBgkY8kT75LeQA0sU7MJzz-XXgCLYyk/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%2F4weeb&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>

لا تنس تغيير :
ان اعجبك الموضوع لا تنس الضغط على زر العجاب اسفل . او الإشتراك في صفحة المدونة على الفيسبوك


هناك 9 تعليقات:

  1. الأضافة لاتعمل فى مدونتى يا أخى

    http://www.3rab-tech.com

    ردحذف
  2. أخي الكريم الإضافة تعمل ،،
    وتعمل أيضا مع أشخاص أضافوها لديهم :
    مدونة حوحو للمعلوميات
    أعد اضافتها ورد علي

    ردحذف
  3. نعم لقد رأيتها عن حوحو
    وقمت بإضافتها لمدونتى ولم تعمل

    ولكنى جربتها على مدونة أخرى و هى تعمل جيداً

    تعتقد المشكلة فى القالب ؟

    وما هو الحل ؟

    ردحذف
  4. أخي الكود يتم اضافته في أداة HTML/JAVASCRIPT
    لا أضنه القالب لأن الكود لايوضع فيه .

    ردحذف
  5. نعم أضفته كما فى الشرح بالضبط

    ولكن من الممكن أن يكون احد الأسكربتات فى القالب بها أخطاء لتمنع ظهور الأضافه

    لانها تعمل بشكل جيد فى مدونة أخرى

    ردحذف
  6. من الممكن كذالك لأن بعض الاضافات لا تتوافق مع بعض الأكواد في القالب

    ردحذف
  7. شكرااااا تم التطبيق على مدوناتي :

    www.alribah.blogspot.com

    www.saifeduc.blogspot.com

    شكراااا لك بالتوفيق

    ردحذف
  8. مشكووور اخي كريم على الاضافة الرائعة

    ردحذف

شاركنا بتعليقك، وشكرا لك


جميع الحقوق محفوظة لمدونة المساعد العربي ©2013-2014 | فهـرس الـموقــع | سياسة الخصوصية