الدرس 91: شرح كيفية اضافة كود صندوق منبثق الفايس بوك على مدونة بلوجر

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

طبعا فائدة هذه الاضافة انك عبرها يمكن من زيادة عدد متتبعي صفحتك على الفيسبوك عبر مدونتك , وفى الدرس سوف نشرح :
- طريقة اضافة صندوق فيسبوك منبثق به زر اغلاق
- كيفية التحكم فى وقت ظهور صندوق المنبثق الخاص بالفيسبوك عند دخول الزائر الى مدونتك
- كيفية جعل الاضافة تظهر للزائر مرة واحدة
- كيفية جعل الاضافة تظهر للزوار كل مرة يزورن فيها مدونتك او مواضيعك عبر اعدادت الكوكيز

طريقة اضافة كود صندوق الفايسبوك مبيثق facebook popup like box على مدونة بلوجر

تابع الفيديو التالي التى يشرح فيها طريقة اضافة صندوق فيسبوك منبثق على مدونتك مع التخصيص 

- كود صندوق الفيسبوك المنبثق على مدونة بلوجر

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> <style type="text/css"> #fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}#fbox-display{background:#eaeaea;border:5px solid #828282;width:340px;height:230px;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#fbox-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#fbox-button:before{content:"CLOSE";padding:5px 8px;background:#828282;color:#eaeaea;font-weight:700;font-size:10px;font-family:Tahoma}#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px} </style> <script type='text/javascript'> //<![CDATA[ jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null}; //]]> </script> <script type='text/javascript'> jQuery(document).ready(function($){ if($.cookie('popup_facebook_box') != 'yes'){ $('#fbox-background').delay(5000).fadeIn('medium'); $('#fbox-button, #fbox-close').click(function(){ $('#fbox-background').stop().fadeOut('medium'); }); } $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); }); </script> <div id='fbox-background'> <div id='fbox-close'> </div> <div id='fbox-display'> <div id='fbox-button'> </div> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php? href=https://www.facebook.com/infoarabe&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe> <div id="fbox-link"> للحصول على الاضافة : <a style="padding-left: 0px;" href="http://www.arabes1.com/2016/11/facebook-popup-like-box-blogger-widget.html" rel="dofollow">علوم وتقنيات</a></div> </div> </div>

- ان اردت تغيير وقت ظهور الصندوق عند زيارة مدونتك
غير فى الكود التالى : .delay 5000
حيث (5000) تعني 5 ثواني

- ان اردت ان تظهر الاداة كل مرة يزور فيها الزوار مدونتك قم بحذف الكود التالي :
ارجوا ان تنال التدوينة اعجابكم ننتظر تقييمك للدرس .