صندوق إعجاب الفيسبوك منبثق مع التحكم فى إعداداته لمدونات بلوجر

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

أولا: الدخول الى لوحة التحكم ثم تخطيط وإضافة أداة HTML 

ثانيا: نضع بداخل الأداة (وتكون غير معنونة) الكود التالى بعد اجراء بعض التعديلات التى سنذكرها بعد الكود

<!-- Facebook Popup Widget START --><!-- Brought to you by www.abu-iyad.com - www.abu-iyad.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#MorganAndMen {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#TheBlogWidgets {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXr0RwwCbjnZE7nz2yWDHJa6HRTyskYE2BwU7JmR8_7_vpMJI_2Fgkacrmw7IthrZeMl02cOZDWDWBeSQsURmf1bFFcY7Am8LeM3av3Q7_T6jvyJSXhxMqxwNd_lg-KljUax0IfUvp7eYz/s1600/TheBlogWidgets.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set 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(''));
}
// key and possibly options given, get 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_user_login') != 'yes'){
$('#fanback').delay(20000).fadeIn('medium');
$('#TheBlogWidgets, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='MorganAndMen'>
<div id='TheBlogWidgets'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=http://www.facebook.com/abuiyad007&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px;height: 230px;'></iframe><center>
<span id="linkit">Powered by <a href="http://abu-iyad.com">Blog</a> - <a href="http://www.abu-iyad.com">Abu iyad Blog</a></span></center>
</div>
</div>
<!-- Facebook Popup Widget END. Brought to you by www.abu-iyad.com - www.abu-iyad.com -->

1- يمكنك التغيير فى إعدادات الكود التالى للتحكم فى وقت ظهور الصندوق للزوار. الـ 20000 تعادل 20 ثانية فاذا أحببت ظهوره بعد 1 ثانية عليك تغيير 20000 الى 1000 أو مثلا 3 ثوانى تغيره الى 3000 وهكذا.

.delay(20000)

2- يمكنك إظهار الصندوق للزائر عند زيارته لمدونتك فى كل مرة يدخل الى موضوع جديد حتى ولو قام بالإعجاب بها! وأنا اعتبرها طريقة تزعج الزائر منك ولا أنصح بها ولكن الخيار بيدك أنت. لتقوم بإلغاء ظهور الصندوق مع كل تحديث للزائر داخل صفحات مدونتك لا تحذف الكود التالى واذا أردت ظهوره مع كل تحميل لصفحات مدونتك قم بحذفه

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

3- يمكنك أيضا تغيير عرض وطول الصندوق من خلال width و height.

4- يجب عليك تغيير abuiyad007 الى اسم صفحة مدونتك على الفيسبوك.

هناك البعض سيريد إظهار صندوق الإعجاب عند زيارة الصفحة الرئيسية فقط فكيف ذلك؟ تابع الخطوة التالية لتعرف :)

<b:if cond='data:page.type == "index"'>
ضع هنا كود الإضافة بعد تعديله
</b:if>

بعد إضافة كود الإضافة قم بنسخة والذهاب الى تحرير HTML وابحث عن الوسم التالى وضع الكود فوقه أو قبله.

 </body>

تنبية: تظهر مشكلة وهو مع الوقت لا يظهر الصندوق لك وستلاحظ ذلك والحل لهذه المشكلة هو حذف الكوكيز من متصفحك ولتفعل ذلك يجب عليك الاطلاع على هذا الرابط بعنوان (كيفية حذف الكوكيز من مختلف المتصفحات)

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