بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
في هذ الشرح سنقوم بإضافة و اظهار عدد المشاهدات للمواضيع/التدوينات في بلوجر أو ووردبريس أو اي صفحة HTML بإختصار
1- قم بإنشاء حساب على موقع Firebase التابع لـ Google
2- إضغط على كلمة Add Project
3- قم بوضع إسم و ID للـ Project
[ الـ ID سيكون مهم للرابط ]
4- إضغط على كلمة [ DEVELOP ] ثم [ Database ] ثم عند كلمة [ Realtime Database ]
إضغط على [ GET STARTED ]
5- إضغط على كلمة [ RULES ]
وإستبدل الكود الموجود بهذا الكود
{
"rules": {
".read": true,
".write": true
}
}
ثم إضغط على كلمة [ PUBLISH ]
بكذا نكون خلصنا الجزء الأول من الشرح و الرابط الخاص بك سيكون بهذا الشكل
https://in4sser.firebaseio.com
[ مع تغيير in4sser إلى الـ ID الخاص بك ]
##
الآن إتجه إلى قالب بلوجر مثلاً و قم بإضافة الكود التالي أسفل <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
الآن ضع الكود التالي أعلى </head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('.post').each(function(){
var fdb = 'https://in4sser.firebaseio.com';
var $this = $(this),
$title = $this.find('.post-title').text().trim();
var dataRef = new Firebase(fdb + $title);
dataRef.transaction(function(curr){
if (window.location.pathname!='/'){
return (curr||0) + 1;
} else {
return (curr||0);
}
}, function(e,c,s){
$this.find('.iview-counter>span').removeClass('iview-loading').empty().html(s.val());
});
});
});
//]]>
</script>
بدل كلمة in4sser بالـ ID الخاص بك
إبحث عن كلمة [ <div class='post-meta'> ] في القالب و أضف السطر التالي أسفله
<div class='iview-counter'>المشاهدات: <span class='iview-loading'/></div>
أو ضع الكود في مكان ترغب لتظهر فيه عدد المشاهدات
في النهاية قم بإضافة كود الـ CSS إذا أردت قبل </body>
<style>
.iview-counter{font-weight:600;}
.iview-counter .iview-loading{display:inline-block;width:20px;height:20px;background:transparent url(http://i.imgur.com/F5nQxSs.gif) no-repeat 0 0;vertical-align:middle}
</style>
بهذا ينتهي الشرح, و بإمكانك التحقق من عمل الطريقة من خلال الذهاب إلى أي موضوع/تدوينه و عمل تحديث للصفحة للتأكد من عملية الحساب التلقائي
