نظام التفاعلات في بلوجر - شرح شامل

HTML CSS JS

مقدمة

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

المكونات الأساسية

الواجهة المرئية (HTML)

<b:if cond='data:view.isPost'>
  <!-- واجهة التفاعلات في صفحة المقال -->
  <div class='reactions-container' expr:data-postid='data:post.id'>
    <h4>كيف كان المقال؟</h4>
    <div class='reactions-buttons'>
      <button class='reaction-btn' data-type='like' onclick='react(this, "like")'>
        👍 <span class='count'>0</span>
      </button>
      <button class='reaction-btn' data-type='love' onclick='react(this, "love")'>
        ❤️ <span class='count'>0</span>
      </button>
      <button class='reaction-btn' data-type='haha' onclick='react(this, "haha")'>
        😂 <span class='count'>0</span>
      </button>
      <button class='reaction-btn' data-type='wow' onclick='react(this, "wow")'>
        😮 <span class='count'>0</span>
      </button>
    </div>
  </div>
<b:else/>
  <!-- واجهة العداد في الصفحة الرئيسية -->
  <div class='post-reactions-summary' expr:data-postid='data:post.id'>
    <span class='reactions-icon'>👥</span>
    <span class='reactions-total'>0</span> تفاعل
  </div>
</b:if>
    

التنسيقات (CSS)

/* نظام التفاعلات */
.reactions-container {
  text-align: center;
  margin: 30px 0;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.reactions-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.reaction-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.reaction-btn:hover {
  background: #008fff;
  color: #fff;
  border-color: #008fff;
}

.reaction-btn .count {
  margin-left: 5px;
  font-size: 12px;
}

/* عداد التفاعلات في الصفحة الرئيسية */
.post-reactions-summary {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: rgba(0, 143, 255, 0.1);
  border-radius: 15px;
  font-size: 13px;
}

.reactions-icon {
  margin-left: 5px;
}

.reactions-total {
  font-weight: bold;
  color: #008fff;
}

/* تنبيهات Toast */
.reaction-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1000;
}

.reaction-toast.show {
  opacity: 1;
}

.toast-close {
  margin-right: 10px;
  cursor: pointer;
}
    

المنطق البرمجي (JavaScript)

<script>
// نظام التخزين والتفاعلات
const ReactionSystem = {
  // جلب بيانات التفاعلات
  getReactions(postId) {
    return JSON.parse(localStorage.getItem(`reactions_${postId}`)) || {
      like: 0, love: 0, haha: 0, wow: 0, sad: 0, angry: 0
    };
  },

  // حفظ بيانات التفاعلات
  saveReactions(postId, reactions) {
    localStorage.setItem(`reactions_${postId}`, JSON.stringify(reactions));
  },

  // حساب المجموع الكلي
  getTotalReactions(postId) {
    const reactions = this.getReactions(postId);
    return Object.values(reactions).reduce((total, count) => total + count, 0);
  },

  // تسجيل تفاعل جديد
  addReaction(postId, type) {
    const reactions = this.getReactions(postId);
    reactions[type]++;
    this.saveReactions(postId, reactions);
    return reactions;
  }
};

// دالة التفاعل الرئيسية
function react(button, type) {
  const container = button.closest('[data-postid]');
  const postId = container.getAttribute('data-postid');
  
  // تسجيل التفاعل
  const reactions = ReactionSystem.addReaction(postId, type);
  
  // تحديث الواجهة
  updateReactionButtons(container, reactions);
  updateAllSummaries(postId);
  
  // عرض التنبيه
  showToast('شكرًا لتقييمك! 😊');
}

// تحديث أزرار التفاعل
function updateReactionButtons(container, reactions) {
  container.querySelectorAll('.reaction-btn').forEach(btn => {
    const type = btn.getAttribute('data-type');
    btn.querySelector('.count').textContent = reactions[type] || 0;
  });
}

// تحديث جميع عناصر الملخص
function updateAllSummaries(postId) {
  const total = ReactionSystem.getTotalReactions(postId);
  document.querySelectorAll(`.post-reactions-summary[data-postid="${postId}"] .reactions-total`)
    .forEach(el => el.textContent = total);
}

// تهيئة النظام عند تحميل الصفحة
function initReactionSystem() {
  // تحديث التفاعلات في صفحة المقال
  document.querySelectorAll('.reactions-container').forEach(container => {
    const postId = container.getAttribute('data-postid');
    const reactions = ReactionSystem.getReactions(postId);
    updateReactionButtons(container, reactions);
  });
  
  // تحديث العدادات في الصفحة الرئيسية
  document.querySelectorAll('.post-reactions-summary').forEach(summary => {
    const postId = summary.getAttribute('data-postid');
    summary.querySelector('.reactions-total').textContent = 
      ReactionSystem.getTotalReactions(postId);
  });
}

// دالة لعرض التنبيهات
function showToast(message) {
  const toast = document.createElement('div');
  toast.className = 'reaction-toast';
  toast.innerHTML = `
    <span class='toast-message'>${message}</span>
    <span class='toast-close'>&times;</span>
  `;
  
  document.body.appendChild(toast);
  
  // إظهار وإخفاء التنبيه
  setTimeout(() => toast.classList.add('show'), 10);
  setTimeout(() => {
    toast.classList.remove('show');
    setTimeout(() => toast.remove(), 300);
  }, 3000);
  
  // إمكانية إغلاق التنبيه يدويًا
  toast.querySelector('.toast-close').addEventListener('click', () => {
    toast.remove();
  });
}

// تشغيل النظام عند تحميل الصفحة
document.addEventListener('DOMContentLoaded', initReactionSystem);

// تحديث عند العودة للصفحة الرئيسية
window.addEventListener('pageshow', initReactionSystem);
</script>
    

شرح الوظائف الرئيسية

نظام التخزين (ReactionSystem)

• getReactions(): تسترجع بيانات التفاعلات المحفوظة
• saveReactions(): تحفظ بيانات التفاعلات الجديدة
• getTotalReactions(): تحسب المجموع الكلي للتفاعلات
• addReaction(): تزيد عداد تفاعل معين

دالة التفاعل الرئيسية (react())

function react(button, type) {
  const container = button.closest('[data-postid]');
  const postId = container.getAttribute('data-postid');
  const reactions = ReactionSystem.addReaction(postId, type);
  updateReactionButtons(container, reactions);
  showToast('شكرًا لتقييمك! 😊');
}

دالة عرض التنبيهات (showToast())

function showToast(message) {
  const toast = document.createElement('div');
  toast.className = 'reaction-toast';
  toast.innerHTML = `
    <span class='toast-message'>${message}</span>
    <span class='toast-close'>×</span>
  `;
  document.body.appendChild(toast);
  // منطق العرض والإخفاء...
}

طريقة التركيب

1. انسخ الكود كاملاً من الجزء العلوي
2. في لوحة تحكم بلوجر:
   • اذهب إلى القالب تحرير HTML.
   • ابحث عن </body> والصق الكود قبله
   • أو أنشئ عنصر HTML/JavaScript جديد وألصق الكود فيه

ميزات النظام

• تخزين دائم: يحفظ التفاعلات في localStorage حتى عند إغلاق المتصفح
• تحديث فوري: يحدث الواجهة دون الحاجة لتحديث الصفحة
• تصميم متجاوب: يعمل على جميع أحجام الشاشات
• خفيف الوزن: لا يؤثر على أداء المدونة

نصائح للتخصيص

لإضافة أنواع تفاعل جديدة:

<button class='reaction-btn' data-type='angry' onclick='react(this, "angry")'>
  😡 <span class='count'>0</span>
</button>

getReactions() {
  return {
    // ...
    angry: 0
  };
}

لتغيير مدة ظهور التنبيه:

// غير 3000 إلى القيمة المطلوبة (بالمللي ثانية)
setTimeout(() => toast.remove(), 3000);

لإضافة تأثيرات حركية:

.reaction-btn {
  transition: all 0.3s ease-out;
  transform: scale(1);
}
.reaction-btn:hover {
  transform: scale(1.1);
}

الخلاصة

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

كيف كان المقال؟