هذه الإضافة تعزز تفاعل الجمهور مع المحتوى عبر إضافة Emoji's Reaction، حيث يمكن للمشاهدين التعبير عن مشاعرهم تجاه المحتوى بطريقة بصرية وتفاعلية، مما يعزز التفاعل والمشاركة الفعّالة.
السلام عليكم ورحمة الله وبركاته
مكتبة ShareThis هي أداة فعّالة تقدم خدمات متقدمة لمشرفي المواقع، خاصةً ملاك مدونات بلوجر، لتحسين تفاعل القراء وزيادة مشاركة المحتوى عبر وسائل التواصل الاجتماعي. في هذا المقال، سنستكشف الخدمات المقدمة بواسطة مكتبة ShareThis ونتناول كيفية استفادة مشرفي المواقع من هذه الخدمة.
مكتبة ShareThis وخدماتها
تقدم مكتبة ShareThis واجهة تفاعلية للمستخدم تتيح للقراء مشاركة المحتوى بسهولة عبر مختلف وسائل التواصل الاجتماعي. يمكن تخصيص واجهة الردود التفاعلية بواسطة CSS لتناسب تصميم الموقع، ويتيح الاستخدام السهل للمشرفين إضافة هذه الواجهة إلى صفحات المحتوى بشكل فعّال.
فوائد لمشرفي المواقع
- تعزيز التفاعل:
واجهة المشاركة الفورية تشجع القراء على مشاركة المحتوى بشكل أسرع وأسهل. - زيادة الانتشار عبر وسائل التواصل الاجتماعي:
تسهل ShareThis على القراء مشاركة المحتوى عبر منصات متعددة، مما يزيد من وجود المحتوى على شبكة الإنترنت. - تحليل الأداء:
يمكن لمشرفي المواقع تتبع أداء مشاركاتهم عبر لوحة التحكم في ShareThis، مما يساعدهم في فهم مدى تأثير محتواهم.
موقع مكتبة ShareThis
قبل شرح الكود لنحصل اولاً على معرفك على مكتبة ShareThis، ساتطرق للخطوت بالتفصيل مع صور توضيحية بسيطة.
للحصول على كود جافا سكريبت من مكتبة ShareThis، يمكنك اتباع الخطوات التالية:
- انتقل إلى موقع ShareThis عبر الرابط التالي: [ShareThis].
- انقر على الزر
"Sign Up" أو "Sign In" لإنشاء حساب جديد أو تسجيل الدخول إلى حسابك الحالي.
- بعد تسجيل الدخول، انتقل إلى لوحة التحكم أو الصفحة التي تتيح لك إضافة مواقع جديدة.
- قم باضافة رابط موقع لاضافة مدونتك.
- حدد نوع الردود التفاعلية التي تريد استخدامها، مثل الأزرار الاجتماعية أو واجهة المشاركة المباشرة.
ايقونات رياكشن الايموجي Emoji's Reaction.SVG
الرموز الايموجي التفاعلية المتاحة هي 6 رموز ساقدمها بين يديك الايموجي مع رمزها SVG
<svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 64 64"width="64" height="64"><circlecx="32" cy="32"r="30"fill="#ef5350"/><pathd="m41 49.7c-5.8-4.8-12.2-4.8-18 0-.7.6-1.3-.4-.8-1.3 1.8-3.4 5.3-6.5 9.8-6.5s8.1 3.1 9.8 6.5c.5.8-.1 1.8-.8 1.3"fill="#302424"/><path d="m10.2 24.9c-1.5 4.7.6 10 5.3 12.1 4.6 2.2 10 .5 12.7-3.7l-6.9-7.7-11.1-.7"fill="#fff"/><gfill="#302424"><pathd="m14.2 25.8c-1.4 2.9-.1 6.4 2.8 7.7 2.9 1.4 6.4.1 7.7-2.8 1-1.9-9.6-6.8-10.5-4.9"/><pathd="m10.2 24.9c1.6-1 3.5-1.5 5.4-1.5 1.9 0 3.8.5 5.6 1.3 1.7.8 3.3 2 4.6 3.4 1.2 1.5 2.2 3.2 2.4 5.1-1.3-1.3-2.6-2.4-4-3.4-1.4-1-2.8-1.8-4.2-2.4-1.5-.7-3-1.2-4.6-1.7-1.8-.3-3.4-.6-5.2-.8"/></g><pathd="m53.8 24.9c1.5 4.7-.6 10-5.3 12.1-4.6 2.2-10 .5-12.7-3.7l6.9-7.7 11.1-.7" fill="#fff"/><gfill="#302424"><pathd="m49.8 25.8c1.4 2.9.1 6.4-2.8 7.7-2.9 1.4-6.4.1-7.7-2.8-1-1.9 9.6-6.8 10.5-4.9"/><pathd="m53.8 24.9c-1.6-1-3.5-1.5-5.4-1.5-1.9 0-3.8.5-5.6 1.3-1.7.8-3.3 2-4.6 3.4-1.2 1.5-2.2 3.2-2.4 5.1 1.3-1.3 2.6-2.4 4-3.4 1.4-1 2.8-1.8 4.2-2.4 1.5-.7 3-1.2 4.6-1.7 1.8-.3 3.4-.6 5.2-.8"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 64 64"width="64" height="64"><gfill="#65b1ef"><ellipsecx="17.5"cy="59.9" rx="12.5" ry="1.5"/><ellipsecx="44"cy="60.2" rx="18" ry="1.8"/></g><circle cx="32"cy="32"r="30"fill="#ffdd67"/><pathd="m44.7 46c-1.4-3.6-4.8-6-12.7-6-8 0-11.3 2.4-12.7 6-.7 1.9.3 5 .3 5 1.3 3.9 1.1 5 12.4 5 11.3 0 11.1-1.1 12.4-5 0 0 1.1-3.1.3-5"fill="#664e27"/><path d="m41 45c.1-.3 0-.6-.2-.8 0 0-2-2.2-8.8-2.2-6.8 0-8.8 2.2-8.8 2.2-.2.1-.2.5-.2.8l.2.6c.1.3.3.5.5.5h16.6c.2 0 .5-.2.5-.5l.2-.6" fill="#fff"/><gfill="#65b1ef"><pathd="m44.5 60.5c2.3 0 4.6 0 6.8 0 8.2-9.9-1.5-20 .9-29.8-2.3 0-4.6 2.5-6.8 2.5-3.2 9.5 7.3 17.4-.9 27.3"/><path d="m19.5 60.5c-2.3 0-4.6 0-6.8 0-8.2-9.9 1.5-20-.9-29.8 2.3 0 4.6 2.5 6.8 2.5 3.2 9.5-7.3 17.4.9 27.3"/></g><gfill="#917524"><path d="m40.7 18.3c3 3 7.2 4.5 11.4 4.1.6-.1.9 2.1.2 2.2-4.9.4-9.7-1.3-13.1-4.8-.6-.5 1.1-1.9 1.5-1.5"/><pathd="m12 22.4c4.2.4 8.4-1.1 11.4-4.1.4-.4 2.1 1 1.6 1.5-3.4 3.5-8.3 5.2-13.1 4.8-.9 0-.5-2.2.1-2.2"/></g><gfill="#664e27"><path d="m35.9 30.3c4.2 8 12.7 8 16.9 0 .2-.4-.3-.6-1-1-4.2 3.3-11.1 3-14.9 0-.6.4-1.2.6-1 1"/><pathd="m11.2 30.3c4.2 8 12.7 8 16.9 0 .2-.4-.3-.6-1-1-4.2 3.3-11.1 3-14.9 0-.7.4-1.2.6-1 1"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 32 32"width="32"height="32"><circlecx="32"cy="32"r="30"fill="#ffdd67"/><circlecx="19"cy="29"r="11" fill="#fff"/><pathd="m24 29c0 2.8-2.2 5-5 5-2.8 0-5-2.2-5-5s2.2-5 5-5c2.8 0 5 2.2 5 5" fill="#664e27"/><pathd="m56 29c0 6.1-4.9 11-11 11-6.1 0-11-4.9-11-11 0-6.1 4.9-11 11-11 6.1 0 11 4.9 11 11"fill="#fff"/><pathd="m50 29c0 2.8-2.2 5-5 5-2.8 0-5-2.2-5-5s2.2-5 5-5c2.8 0 5 2.2 5 5" fill="#664e27"/><gfill="#917524"><pathd="m50.2 15.8c-3.2-2.7-7.5-3.9-11.7-3.1-.6.1-1.1-2-.4-2.2 4.8-.9 9.8.5 13.5 3.6.6.5-1 2.1-1.4 1.7"/><pathd="m25.5 12.5c-4.2-.7-8.5.4-11.7 3.1-.4.4-2-1.2-1.4-1.7 3.7-3.2 8.7-4.5 13.5-3.6.7.2.2 2.3-.4 2.2"/></g><circlecx="32"cy="49"r="9"fill="#664e27"/><path d="m26 46c1.2-2.4 3.4-4 6-4 2.6 0 4.8 1.6 6 4h-12"fill="#fff"/></svg>
<svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 64 64"width="64"height="64"><circlecx="32"cy="32"r="30"fill="#ffdd67"/><gfill="#664e27"><path d="m51.7 19.4c.6.3.3 1-.2 1.1-2.7.4-5.5.9-8.3 2.4 4 .7 7.2 2.7 9 4.8.4.5-.1 1.1-.5 1-4.8-1.7-9.7-2.7-15.8-2-.5 0-.9-.2-.8-.7 1.6-7.3 10.9-10 16.6-6.6"/><pathd="m12.3 19.4c-.6.3-.3 1 .2 1.1 2.7.4 5.5.9 8.3 2.4-4 .7-7.2 2.7-9 4.8-.4.5.1 1.1.5 1 4.8-1.7 9.7-2.7 15.8-2 .5 0 .9-.2.8-.7-1.6-7.3-10.9-10-16.6-6.6"/><pathd="m49.7 34.4c-.4-.5-1.1-.4-1.9-.4-15.8 0-15.8 0-31.6 0-.8 0-1.5-.1-1.9.4-3.9 5 .7 19.6 17.7 19.6 17 0 21.6-14.6 17.7-19.6"/></g><pathd="m33.8 41.7c-.6 0-1.5.5-1.1 2 .2.7 1.2 1.6 1.2 2.8 0 2.4-3.8 2.4-3.8 0 0-1.2 1-2 1.2-2.8.3-1.4-.6-2-1.1-2-1.6 0-4.1 1.7-4.1 4.6 0 3.2 2.7 5.8 6 5.8s6-2.6 6-5.8c-.1-2.8-2.7-4.5-4.3-4.6"fill="#4c3526"/><path d="m24.3 50.7c2.2 1 4.8 1.5 7.7 1.5s5.5-.6 7.7-1.5c-2.1-1.1-4.7-1.7-7.7-1.7s-5.6.6-7.7 1.7" fill="#ff717f"/><pathd="m47 36c-15 0-15 0-29.9 0-2.1 0-2.1 4-.1 4 10.4 0 19.6 0 30 0 2 0 2-4 0-4" fill="#fff"/></svg>
<svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 64 64"width="64"height="64"><pathd="M62,32c0,16.6-13.4,30-30,30C15.4,62,2,48.6,2,32C2,15.4,15.4,2,32,2C48.6,2,62,15.4,62,32z" fill="#ffdd67"/><gfill="#f46767"><pathd="m61.8 13.2c-.5-2.7-2-4.9-4.5-5.6-2.7-.7-5.1.3-7.4 2.7-1.3-3.6-3.3-6.3-6.5-7.7-3.2-1.4-6.4-.4-8.4 2.1-2.1 2.6-2.9 6.7-.7 12 2.1 5 11.4 15 11.7 15.3.4-.2 10.8-6.7 13.3-9.9 2.5-3.1 3-6.2 2.5-8.9"/><pathd="m29 4.7c-2-2.5-5.2-3.5-8.4-2.1-3.2 1.4-5.2 4.1-6.5 7.7-2.4-2.3-4.8-3.4-7.5-2.6-2.4.7-4 2.9-4.5 5.6-.5 2.6.1 5.8 2.5 8.9 2.6 3.1 13 9.6 13.4 9.8.3-.3 9.6-10.3 11.7-15.3 2.2-5.3 1.4-9.3-.7-12"/></g><pathd="m49 38.1c0-.8-.5-1.8-1.8-2.1-3.5-.7-8.6-1.3-15.2-1.3-6.6 0-11.7.7-15.2 1.3-1.4.3-1.8 1.3-1.8 2.1 0 7.3 5.6 14.6 17 14.6 11.4-.1 17-7.4 17-14.6"fill="#664e27"/><pathd="m44.7 38.3c-2.2-.4-6.8-1-12.7-1-5.9 0-10.5.6-12.7 1-1.3.2-1.4.7-1.3 1.5.1.4.1 1 .3 1.6.1.6.3.9 1.3.8 1.9-.2 23-.2 24.9 0 1 .1 1.1-.2 1.3-.8.1-.6.2-1.1.3-1.6 0-.8-.1-1.3-1.4-1.5" fill="#fff"/></svg>
<svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 64 64"width="64" height="64"><!-- قم بلصق الرمز الخاص بك هنا --><circlecx="32"cy="32"r="30"fill="#ffdd67"/><gfill="#664e27"><circlecx="20.5"cy="26.6"r="5"/><circlecx="43.5"cy="26.6"r="5"/><pathd="m44.6 40.3c-8.1 5.7-17.1 5.6-25.2 0-1-.7-1.8.5-1.2 1.6 2.5 4 7.4 7.7 13.8 7.7s11.3-3.6 13.8-7.7c.6-1.1-.2-2.3-1.2-1.6"/></g></svg>
- قم بتخصيص خيارات الردود التفاعلية وتصميمها حسب احتياجات موقعك.
- بعد النقر على الايموجي سيظهر لك سكريبت الاضافة
- انسخ السكريبت و مباشرة في محرر النصوص الصق السكريبت وانسخ معرف الايدي الخاص بك هو الذي نحتاجه من هذا السكريبت.
- من الممكن ان تحتاج الت تطبيق [Quick Editor+] يمكنك تنزيل النسخة المدفوعة له من متجر صِوان.
- انسخ المعرف الخاص بك من الجافا سكريبت الذي تم إنشاؤه.
- في اسفل الموضوع سنتعرف على طريقة اضافة الاكواد على قالب مدونتك
مع هذه الخطوات، يمكنك الحصول على كود جافا سكريبت من مكتبة ShareThis كل هذه الخطوات فقط للحصول على معرفك ID في الخطوات بعد شرح الكود سنعرف اين ستضيف المعرف الخاص بك و خطوات ودمجه الاكواد بسهولة في مدونتك لتعزيز تفاعل القراء ومشاركة المحتوى.
طبعا الطريقة الرسمية متعارف عليها و جيدة ايضا ولكن مع تخصيص الاكواد الذي قمت به سيجعل الاضافة تعمل بشكل جيد و اكثر تجاوبا مع اي قالب دون التأثير على سرعة القالب او اخطاء برمجية
إضافة Emoji's Reaction تضيف لمسة من الحيوية والتفاعلية لتجربة المشاهدين، حيث يمكنهم التعبير عن مشاعرهم تجاه المحتوى بشكل فوري وبسيط، مما يعزز تفاعل الجمهور ويخلق تجربة إشراك فريدة.جمال الحزازي
شرح الكود
هذا الكود يتعلق بإضافة واجهة تفاعلية للمشاركة عبر وسائل التواصل الاجتماعي باستخدام مكتبة ShareThis. إليك تفسير للأقسام المختلفة في الكود:
- يتم تعريف نمط الواجهة باستخدام ميزات CSS.
-
`display: flex;` يجعل العناصر داخل `.sharethis-inline-reaction-buttons` تظهر في تصميم مرن.-
`max-width: 100%;` يحدد عرض العنصر ليكون 100% من العرض الأقصى المتاح.-
`padding`, `line-height`, `background`, `border-radius`, و `box-shadow` تعتني بتنسيق وتصميم الواجهة.- يتم تحديد خصائص الظهور على أساس حالة الصفحة باستخدام
`.drK .sharethis-inline-reaction-buttons`.- يتم فحص ما إذا كانت الصفحة تعرض منشورًا باستخدام
`<b:if cond='data:view.isPost'>`.- إذا كان الشرط صحيحًا، يتم إنشاء
`<div>` بفئة `sharethis-inline-reaction-buttons`.- يتم تضمين مكتبة ShareThis باستخدام سكريبت
`<script>`.- يتم استخدام متغير
`lazyReact` لتحميل المكتبة بمجرد التمرير إلى أسفل.-
`window.addEventListener('scroll', ...)` يستمع إلى حدث التمرير لتحميل المكتبة عند الحاجة.كيفية إضافة الكود إلى بلوجر
قبل اي تعديل على قالب مدونتك انصحك بشدة على اخذ نسخة احتياطية لقالبك حتى نتفادى اي خطأ ممكن حدوثه في حالة ما نسيت ان تأخذ نسخة احتياطية و تم حدوت خطأ ما اترك تعليقا في صندوق التعليقيات او اتصل بي لمساعدتك في حل المشكل.
- تسجيل الدخول إلى حساب بلوجر:
قم بتسجيل الدخول إلى لوحة التحكم بلوجر.
- انتقل إلى لوحة تحكم بلوجر واختر "المظهر".
- انقر على السهم بجانب التخصيص اختر تعديل
HTML- ابحث عن
`]]</b:skin>` وأضف الكود CSS فوقه./*ازرار التفاعل ايموجي الرياكشن بواسطة الحزازي*/ .sharethis - inline - reaction - buttons {
display: flex;
max - width: 400px;
padding: 10px 17px;
line - height: 25px;
background: #fffdfc;
border - radius: 5px;
box - shadow: 0 10px 25px - 3px rgba(0, 0, 0, .1);
font - size: 16px;
font - family: inherit;
color: #08102b;text-align:center}.drK .sharethis-inline-reaction-buttons{box-shadow:none; background:# 2d2d30
}
- ابقى في نفس الصفحة كود القالب
- ابحث عن وسم
`<data:post.body/>` وضع الكود HTML تحته.<b:if cond='data:view.isPost'>
<!--[اضافات خاصة]-->
<!--[زر ايموجي رياكشن]-->
<div class='sharethis-inline-reaction-buttons'/>
</b:if>
<!--[غلق الاضافات الخاصة]-->
- ابقى في نفس الصفحة كود القالب
- ابحث عن
`</body>` وضع الكود JavaScript فوقه.< script > /*<![CDATA[*/ /* ShareThis (LazyLoad) by Elhizazi */
var lazyReact = false;
window.addEventListener('scroll', function() {
if ((document.documentElement.scrollTop != 0 && lazyReact === false) || (document.body.scrollTop != 0 && lazyReact === false)) {
(function() {
var ad = document.createElement('script');
ad.setAttribute('type', 'text/javascript');
ad.async = true;
ad.src = 'https://platform-api.sharethis.com/js/sharethis.js#property=63a809b65150cb0013011eb5&product=inline-reaction-buttons';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
})();
lazyReact = true;
}
}, true);
/*]]>*/
< /script>
ساؤشر على مكان اضافة المعرف الخاص بك الذي نسخته من موقع ShareThis فقط استبدل المعرف الذي في ااسكربت بالمعرف الخاص بك لتعمل الاضافة بناءا على موقعك المرتبط مع مكتبة ShareThis.
ميزة التي تقدمها الاكواد التي خصصتها مع ارتباط مكتبة ShareThis هي ان هذه الاكواد اكثر انسيابية داخل اي قالب و لا تؤثر على الموقع ولا يوجد هناك اي تعارض.
التعديلات الطارئة تتعلق بكود جاڤا سكريبت تم تخفيف السكريبت و تنسيقه على مكان الافضلية بدل وضعه بين وسم `<head>` و وسم الاغلاق `</head>`
منشورات ذات صل
ختاما
مع مراعاة حقوق الملكية الفكرية وشروط الترخيص، يمكن لمشرفي المواقع الاستفادة الكاملة من مكتبة ShareThis لتحسين تفاعل القراء وتعزيز انتشار محتواهم عبر المنصات الاجتماعية.
شكرًا لمساعدة ChatGPT في إعداد هذا المقال
المصادر:
SiwaneXYZ©
https://www.siwane.xyz/2023/11/emojis-reaction.html
