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

في درسنا اليوم سوف نتكلم عن اضافة صندوق الفيسبوك المنبثق بطريقة احترافية و انا اعرف ان هذه الإضافة تم تداولها او اضافتها في كثير من المدونات و يوجد الاف المواضيع عن هذه الاضافة و لكن اليوم سوف تكون بشكل مختلف بحيث سنجعلها احترافية اكثر و بنفس الوقت اكثر بساطة و تستخدم هذه الإضافة من اجل زيادة معجبين صفحات فيسبوك Facebook لذلك يجب اضافتها لتعزيز صفحة الفيسبوك و الحصول على المزيد من المسخدمين [ الزوار ] الذي يزورون المدونة الخاصة بك و يتم ذلك عبر اضافة صندوق فيسبوك منبثق و هي واحد من افضل الطرق لزيادة معجبين صفحات الفيس بوك يمكنك معاينة الإضافة عبر الزر التالي

معاينة

شرح تركيب الإضافة

هنا يا صديقي تحتاج إلى اضافة الكود التالي في أداة
من لوحة تحكم المدونة > تخطيط > انقر على إضافة أداة HTML/JavaScript > ثم نسخ الكود التالي و لصقه بالادة ثم اضغط على حفظ

<style scoped='' type='text/css'>
#fb-fanbox {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;right:0;z-index:99999;}
#fb-boxclose {width:100%;height:100%;}
#fb-boxview {background:#fff;border:8px solid #03a9f4;width:340px;height:230px;position:absolute;top:33%;right:37%;border-radius:3px;}
#fb-closebox {float:left;cursor:pointer;position:absolute;left:-1px;top:-2px;}
#fb-closebox:before {content:"CLOSE";padding:5px 8px;background:#03a9f4;color:#fff;font-weight:normal;font-size:10px;font-family:inherit;}
#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Pengaturan cookie
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() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// Dapatkan cookie
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_facebook_box') != 'yes'){
$('#fb-fanbox').delay(3000).fadeIn('fast');
$('#fb-closebox, #fb-boxclose').click(function(){
$('#fb-fanbox').stop().fadeOut('fast');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fb-fanbox'>
<div id='fb-boxclose'>
</div>
<div id='fb-boxview'>
<div id='fb-closebox'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/mudwnp&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border:none;overflow:hidden;width:339px;height:200px;'></iframe>
</div>
</div>

اهم الإعدادات

استبدل https://www.facebook.com/mudwnp بعنوان صفحتك على فيس بوك

لإظهار الصندوق في كل مرة يتم فتح المدونة احذف هذا الكود$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
لضبط الوقت و تأخير ظهور الصندوق المنبثق استبدل هذه.delay(3000)

اتمنى ان تعجبكم الإضافة اي سؤال او استفسار لا تنسى وضع تعليق