إضافة عداد التحميلات للروابط والملفات لمدونات بلوجر باستخدام موقع Firebase

عدد مشاهدات الموضوع:

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

معاينة

اولا: عليك انشاء حساب على موقع firebase من هنا (هام جدا)
ثانيا: قم بانشاء قاعدة بيانات ستجد صندوق قم بوضع الid الخاص بك ثم قم بالضغط علىCreat New APP كما بالصورة

قمت بالحصول على الid الذي انشأت به قاعدة البيانات لاننا سنحتاجه لاحقا
لاضافة عداد التحميلات لمدونتك اتبع الخطوات
1-اذهب الى بلوجر >> القالب
2-خذ نسخة احتياطية من قالبك
3-اضغط على تعديل HTML
4-ابحث(CTRL+F) عن الوسم التالي </body>
5-قم بلصق الكود التالي فوقه مباشرة

 <script type='text/javascript'> 
    window.setTimeout(function() { 
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;); 
      }, 10); 
  </script> 
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script> 
$.each($(&#39;[data-download-count=true]&#39;), function (i, e) { 
    var elem = $(e).parent().find(&#39;#download-count&#39;).addClass(&#39;mbtloading&#39;); 
    var id = $(e).closest(&#39;.post-body&#39;).siblings(&#39;a[name]&#39;).attr(&#39;name&#39;) + &quot;-&quot; + $(e).attr(&#39;id&#39;); 
                          var downloadStats = new Firebase(&quot;https://sweup.firebaseio.com/downloads/id/&quot; + id); 
    var data = {}, isnew = false; 
    downloadStats.once(&#39;value&#39;, function (snapshot) { 
        data = snapshot.val(); 
        if (data == null) { 
            data = {}; 
            data.value = 0; 
            data.url = window.location.href; 
            data.id = id; 
            isnew = true; 
        } 
        elem.removeClass(&#39;mbtloading&#39;).text(data.value); 
    }); 
    $(e).click(function (e) { 
        data.value++; 
        if (isnew) downloadStats.set(data); 
        else downloadStats.child(&#39;value&#39;).set(data.value); 
    }); 
}); 
//<![CDATA[ 
$(document).ready(function () { 
  //checks if the number of posts on this page are more than one then return. 
  if($('.post-outer').length > 1) 
  return; 
  //selects the element to be made sticky. 
  var stickElement = $('.date-header'), 
    //selects the element which would trigger the sticky elem to go away 
    hideTrigger = $('#comments'), 
    //class name to be added (it should match the class in CSS) 
    fixed = "fixed", 
    top = stickElement.offset().top; 
  $(window).scroll(function (event) { 
    var y = $(this).scrollTop(); 
  var maxY = hideTrigger.offset().top; 
    if (y >= top && y < maxY) { 
      stickElement.addClass(fixed); 
    } else { 
      stickElement.removeClass(fixed); 
    } 
  }); 
}); 
//]]> 
</script>

ملاحظة مهمة-قم باستبدال الid الخاص بي (sweup) بالid الخاص بك في موقعfirebase
6-قم بالبحث عن الوسم التالي </b:skin> , اضغط فوق السهم الاسود لتوسيع التعليمات

7-قم بلصق كود الcss التالي فوق الوسم التالي مباشرة </b:skin>

 .mbtloading { 
background: url('http://4.bp.blogspot.com/-PZMStRDcchY/USOp3xFp4yI/AAAAAAAAJOo/rm5FSsaSKh0/s320/mbtloading.gif') no-repeat left center; 
width: 16px; 
height: 16px; 
}
.blog-stats { 
color: #289728; 
font: bold italic 18px georgia, arial; 
float: right; 
}

8-اخيرا قم بالبحث عن الوسم <head> وقم بلصق الكود الخاص بمكتبة JQuery اسفله مباشرة وان كنت قد قمت باضافتها سابقا بأى اضافة لا تقم باضافتها مرة أخرى.

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

9- قم بحفظ القالب ومبارك عليك الاضافة الجديدة
10- لتضمين رابط تحميل مرفق بعداد التحميلات ما عليك الا استخدام كود الHTML التالي في مشاركاتك

 <div style="width:120px;"> 
<a data-download-count="true" href="#">تحميل</a> 
<div class="blog-stats" id="download-count"> 
</div> 
</div>

11-قم بتغيير ال# برابط التحميل الخاص بك

الى هنا اترككم في رعاية الله واي استفسارات حول الموضوع يمكنك ترك تعليق. يمكنكم الأنضمام لأعضاء المدونة كما يمكنك الأنضمام للقروب الخاص بنا حيث سيصلك كل جديد . مصدر: mybloggertricks و sweup

مدونة أبو إياد