إضافة عدد المشاهدات لجميع المواضيع - iN4sser

إضافة عدد المشاهدات لجميع المواضيع

إضافة عدد المشاهدات لجميع المواضيع iN4sser 5من 5
بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته في هذ الشرح سنقوم بإضافة و اظهار عدد المشاهدات للمواضيع/التدوينات في ب...
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته


في هذ الشرح سنقوم بإضافة و اظهار عدد المشاهدات للمواضيع/التدوينات في بلوجر أو ووردبريس أو اي صفحة 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>

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

www.iN4sser.com

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

إرسال تعليق