شرح تركيب تعليقات Disqus مع خاصية التحميل الكسول (Lazy Loading)
تطوير بلوجر تطوير ويب
سأشارككم اليوم ضمن سلسلة دروس تطوير بلوجر طريقة تركيب تعليقات ديسكس Disqus comments على مدونات بلوجر أو أي موقع إلكتروني مع خاصية التحميل البطيء (Lazy Loading) عند التمرير للأسفل Disqus for blogger with Lazy Loading on Scroll لتسريع المدونة أو الموقع وتجنب مشكلة تحميل الجافا سكربت الخاص بتعليقات Disqus والذي يتسبب عادة بزيادة حجم الصفحة وهو ما ينتج عنه بطىء تصفح المدونة وهو ماقد يترتب عليه أثر سلبي في تحسين أدآء الموقع لدى محركات البحث كمحرك جوجل والذي يعتبر سرعة تصفح الموقع عامل رئيسي في تحسين ظهور صفحات المدونة في نتائج البحث.
{tocify} {$title=ستقرأ في هذا المقال}إقرأ أيضا: كيفية تضمين فيديو من يوتيوب مع خاصية Lazyload و عرض متجاوب .
ما هو ديسكس-Disqus ؟
Disqus - ديسكس هي منصة ويب توفر نظام تعليقات مميز يمكنك استخدامه على العديد من منصات المدونات وانظمة ادارة المحتوى للمواقع الالكترونية، وأصبح استخدام تعليقات Disqus الآن هو الخيار الأفضل لأنه يحتوي على ميزات أفضل مقارنة بنظام التعليقات الافتراضي على Blogger. يعد نظام تعليق Disqus شائعًا في المواقع التي تقوم بتضمينه وفي المدونات كما أنني أيضا أستخدم نظام تعليقات ديسكس في مدونة مدمن ويب.
مع كل مميزات ومزايا تعليقات ديسكس Disqus، فإن عيب عيب Disqus الرئيسي هو أنه مكون إضافي تابع لجهة خارجية ، وبالتالي فإن Disqus سيتسبب في بطىء تصفح المدونة في كل مرة نفتح فيها رابط المقالة. ولكن في هذا المقال، مدمن ويب سيشارك معكم شرح تركيب تعليقات Disqus مع خاصية التحميل الكسول (Lazy Loading) عند التمرير للأسفل لحل هذه المشكلة والاستمتاع بتعليقات ديسكس Disqus دون أي مشاكل.
ما هى خاصية التحميل الكسول Lazy Loading؟
بإختصار شديد، تقوم خاصية التحميل الكسول بعمل تحميل جزئى وليس كلّي لصفحة الإنترنت التى تتصفحها، فبدلاً من الوضع الافتراضى الذى يقوم بتحميل صفحة الإنترنت بالكامل فور فتحها، سيتم التحميل عند الطلب لصفحة الويب، وكلما قمت بالتمرير لاسفل الصفحة يتم تحميل وعرض باقى المحتوى . بالتالى، هذا يعنى تحميل أسرع لصفحة الإنترنت والمواقع مع إستهلاك أقل للنت، وتظهر أهمية هذه الخاصية تحديداً فى صفحات الويب أو المقالات الطويلة التى تضم صورة وفيديو، حيث لا يتم تحميل الصفحة بالكامل مرة واحدة، بل يتم تحميل الصفحة على حسب الطلب فقط .
إقرأ أيضا: كيفية إزالة ?m=1 من روابط مدونات بلوجر لتحسين محركات البحث.
الفكرة من خاصية Lazy Loading on Scroll مع تعليقات Disqus، أنها ستؤخر من عملية تحميل سكربت تعليقات ديسكس Disqus حتى يقوم متصفح الموقع بالتمرير في الصفحة حتى حتى يصل إلى مكان تعليقات Disqus ليظهر مرئيًا.
ويمكنكم رؤية تطبيق لهذا الشرح في مدونة مدمن ويب، حيث لو مررت لأسفل الصفحة ستظهر لك صندوق تعليقات ديسكس Disqus ودون أن تؤثر على سرعة الموقع، ويمكنكم التأكد من ذلك من خلال نسخ رابط هذه الصفحة مثلا واختبار سرعتها في خدمة PageSpeed Insights التابعة لجوجل،
لذا، لمن يرغب في تطبيق هذا الأمر في موقعه أو مدونته يرجى عليه إتباع الخطوات التالية بدقة:
تنبيه:
لاتنسى أخذ نسخة إحتياطية للقالب قبل تطبيق هذا الدرس، كي تتمكن من إستعادة القالب في حال ظهور أي مشاكل أو أخطآء بعد تطبيق هذا الدرس.
إقرأ أيضا: أفضل نسخة معربة لقالب Median UI ميديان - أفضل قالب بلوجر على الإطلاق (للتحميل)
طريقة تركيب تعليقات Disqus مع خاصية التحميل الكسول (Lazy Loading)
بداية، إفتح بلوجر> ثم إذهب إلى المظهر (Theme) > ثم > تحرير > ثم ابحث عن الكود التالي :
<b:includable id='comments' var='post'>
ثم أضف الكود التالي تحت هذا الكود مباشرة
<b:includable id='comments' var='post'>:
<b:if cond='data:view.isPost'>
<div id='disqus_thread'>
<div id='disqus_empty'/></div>
<script>
//<![CDATA[
function load_disqus(e){var t=document.getElementById("disqus_empty"),d=document.getElementById("disqus_thread"),n=document.createElement("script"),s=document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0];d&&t&&(n.type="text/javascript",n.async=!0,n.src="//"+e+".disqus.com/embed.js",s.appendChild(n),t.remove())}window.addEventListener("scroll",function(e){var t=document.scrollingElement.scrollTop,d=document.getElementById("disqus_thread");d&&t>d.getBoundingClientRect().top-150&&(load_disqus("إسم-مستخدم-ديسكس-الخاص-بك"),console.log("Disqus loaded."))},!1);
//]]>
</script>
</b:if>إقرأ أيضا: عشر طرق للترويج لمقالاتك ومدونتك وجلب الزوار والقراء إليها.
استبدل الرمز المميز باسم مستخدم ديسكس Disqus الخاص بك او بمدونتك.
ثم أضف الكود التالي بعد كود الإستايل (CSS) وقبل وسم إغلاق الترويسة
</head> الخاص بمدونتك
<b:if cond='data:view.isPost'>
<style>
#disqus_thread{display:block;position:relative;overflow:hidden;padding:20px 0 0 0;margin:20px auto 0 auto;border-top:1px solid rgba(0,0,0,0.08)}#comments{display:none}
</style>
</b:if>ثم أعمل حفظ للقالب .. ومبروك تم تركيب تعليقات Disqus مع خاصية التحميل الكسول (Lazy Loading)
تنبيه: لاتنسى أخذ نسخة إحتياطية للقالب قبل تطبيق هذا الدرس، كي تتمكن من إستعادة القالب في حال ظهور أي مشاكل أو أخطآء بعد تطبيق هذا الدرس.
إقرأ أيضا: كيفية إعداد مدونة بلوجر على نطاق فرعي (دومين فرعي) مخصص .
الخلاصة: شرح تركيب تعليقات Disqus مع خاصية التحميل الكسول
كان هذا شرح تركيب تعليقات Disqus مع خاصية التحميل الكسول (Lazy Loading) عند التمرير للأسفل في الأخير، شكرا لزيارة مدمن ويب، ولاتنسى مشاركة هذا المقال مع الآخرين للاستفادة منه.
إذا واجهتك أي مشاكل أو صعوبات أو أخطآء خلال تطبيق هذا الشرح، لاتتردد بالاستفسار وطرح مشكلتك في التعليقات أسفل هذه الصفحة، وسأحرص على مساعدتك والرد عليك في أسرع وقت إن شاء الله.
