كيفية اضافة عدد المشاهدات التدوينة في الوقت الفعلي لـمدونات بلوجر

مرحباً ! بكم في مدونة عالم المدون بعد وقت طويل ، عدت بمقال بعنوان "Realtime View Counter using Firebase Database". اليوم ، سأشارك مشروع قاعدة بيانات Firebase Realtime الذي يحسب مشاهدات النشر أو أي حدث. 

©عالم المدون wdbloog.com | Firebase Realtime 

نظرًا لأنه يستخدم Firebase Javascript SDK ، فإن حجم الحزمة كبير قليلاً. حاولت استخدام واجهة Firebase Database REST ولكن الاستجابة كانت أبطأ من SDK ، لذلك اضطررت إلى استخدام Javascript SDK للحصول على أداء أفضل.

استخدامه كمقياس للعرض

 

 

يمكنك استخدامه كمقياس عرض لمشاركتك فقط عن طريق تحديد المسار . دعنا نحاول إضافته إلى موقع Blogger.

             مهم!قبل أن نبدأ في إضافة الأكواد في XML ، أوصيك بأخذ نسخة احتياطية لقالبك الحالي.  في حالة حدوث أي مشكلة ، يمكنك استعادتها لاحقًا.

الخطوة 1: أولاً وقبل كل شيء ، قم بتسجيل الدخول إلىلوحة تحكم Blogger.

الخطوة 2: في Blogger Dashboard ، انقر فوق Theme .

الخطوة 3: انقر فوق رمز السهم لأسفل بجوار الزر "تخصيص" .

الخطوة 4: انقر فوق تحرير HTML ، ستتم إعادة توجيهك إلى صفحة التحرير.

الخطوة 5: الآن ابحث في الكود والصق أكواد CSS]]></b:skin> التالية فوقه مباشرة.

            إذا كان القالب الخاص بك يحتوي على ميزة الوضع المظلم ، وإذا كنت تريد لونًا مختلفًا في الوضع المظلم ، فيمكنك تخصيص الرموز حسب حاجتك. يمكن أن يحتوي كل قالب على فئة وضع مظلم مختلفة ، لذا يرجى تعديلها ، ويمكنك استبدال الفئة المميزة بفئة الوضع المظلم للقالب.

[data-path] {
  --text-color: #000;
  --text-color-dark: #fff;
  --icon-loading: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' x='0px' y='0px' fill='%23000'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'></animateTransform></path></svg>");
  --icon-eye: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.25'><path d='M15.58 12c0 1.98-1.6 3.58-3.58 3.58S8.42 13.98 8.42 12s1.6-3.58 3.58-3.58 3.58 1.6 3.58 3.58Z'></path><path d='M12 20.27c3.53 0 6.82-2.08 9.11-5.68.9-1.41.9-3.78 0-5.19-2.29-3.6-5.58-5.68-9.11-5.68-3.53 0-6.82 2.08-9.11 5.68-.9 1.41-.9 3.78 0 5.19 2.29 3.6 5.58 5.68 9.11 5.68Z'></path></svg>");
  --text-loading: "--- --";
  --text-loaded: attr(data-view);
  --border-color: rgba(0, 0, 0, 0.1);
  --border-color-dark: rgba(255, 255, 255, 0.2);

  line-height: 1rem;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-color);
}
[data-path]::before {
  content: "";
  width: 20px;
  height: 20px;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
  -webkit-mask: var(--svg-icon);
  mask: var(--svg-icon);
  background: var(--text-color);
  --svg-icon: var(--icon-loading);
}
[data-path][data-view]::before {
  --svg-icon: var(--icon-eye);
}
[data-path]::after {
  content: var(--text-loading);
  opacity: 0.8;
}
[data-path][data-view]::after {
  content: var(--text-loaded);
}
.drK [data-path] {
  --text-color: var(--text-color-dark);
  --border-color: var(--border-color-dark);
}

الخطوة 6: هذه الخطوة صعبة بعض الشيء حيث يتعين عليك العثور على المكان الذي تريد إضافة عداد العرض إليه في القالب الخاص بك. عليك أن تجد المكان الصحيح حسب القالب الخاص بك ولصقه هناك ، على سبيل المثال: أعلاه<data:post.body/>

<div class='post-view' expr:data-increment='data:view.isPost ? &quot;1&quot; : &quot;false&quot;' expr:data-path='&quot;/BLOG_&quot; + data:blog.blogId + &quot;/POST_&quot; + data:post.id + &quot;/VIEWS&quot;'/>

الخطوة 7: قم الآن بإضافة Javascript أعلاه فقط لوضع </body>علامة. إذا لم تجده ، فمن المحتمل أنه قد تم تحليله بالفعل وهو </body>.

<script>
  function viewCounterLoaded () {
    const counter = new ViewCounter({
      databaseUrl: "https://example.firebaseio.com",
      selector: ".post-view",
      abbreviation: true
    });
    if (typeof infinite_scroll !== "undefined") {
      infinite_scroll.on("load", counter.init.bind(counter));
    }
  };
</script>
<script defer onload='viewCounterLoaded()' src='https://cdn.jsdelivr.net/gh/fineshopdesign/view-counter@main/build/bundle.js'></script>

الخطوة 7: أخيرًا ، احفظ التغييرات بالنقر فوق هذا الرمز

استخدامه كنقر عداد

<style>
  .click-counter::before {
    content: "0"
  }

  .click-counter[data-view]::before {
    content: attr(data-view);
  }
</style>

<button class='click-button'>Clicks (<span class='click-counter' data-path='/BLOG_0000/POST_0001/CLICKS' data-increment='false'></span>)</button>

<script>
  function viewCounterLoaded () {
    const counter = new ViewCounter({
      databaseUrl: "https://example.firebaseio.com",
      abbreviation: true
    });

    const clickButton = document.querySelector(".click-button");
    const clickCounter = document.querySelector(".click-counter");
    counter.addElement(clickCounter).then(function(counterElement) {
      clickButton.addEventListener("click", function() {
        counterElement.increment(1);
      });
    });
  };
</script>
<script defer="" onload="viewCounterLoaded()" src="https://cdn.jsdelivr.net/gh/fineshopdesign/view-counter@main/build/bundle.js"></script>

خاتمة

كان هذا كل ما يتعلق بإضافة عداد المشاهدات بلوقت الفعلي إلى مدونة Blogger. أتمنى أن تستمتع بهذه المقالة. يرجى مشاركة هذه المقالة. وإذا كنت تواجه مشكلة في أي قسم أو كان لديك أي سؤال ، فاسألنا في مربع التعليقات. شكرًا لك!

© حقوق النشر:

www.wdbloog.com

فتح رابط التوجيه