إضافة خاصية تقييم المحتوى على شكل نجوم 🌟 بإستخدام تطبيق Firebase

إضافة ستسمح لمتابعيك وزوار مدونتك يراجعون أعمالك الإبداعية ومنتجاتك وخدماتك من خلال خاصية التقييم بالنجوم بشكل رسمي فهي ليست مجرد واجهة أو زينة بل هي أداة رسمية بكل المقايس كونها تعرض لك نفس البيانات في نتائج بحث Google كما أنها ذكية التخصيص ويمكن التحكم في أغلب عناصرها بسهولة..والجميل في الموضوع أن الإضافة تابعة لـخدمات Google على رأسهم منصة -Blogger- وهذا يعني أنك لن تضطر للتسجيل في أي موقع للحصول على الأداة بل ستعمل وفقا لقاعدة بياناتك الخاصة على -Firebase-  والتي تتحكم بها كما تريد.
الرجاء قبل إكمال الموضوع أحرص على أنك تملك معرف خاص بك لتطبيق -Firebase- إذا لاتملك واحد راجع هذا الموضوع بسرعة..ثم نكمل.
إنشاء معرف تطبيق firebase من خلال واجهة المستخدم الجديدة 2020

مميزات الإضافة

1. مميزات الإصدار V1
2. -شكل عصري ومتوافق مع سياسة الأرشفة متجاوبة وبدون تكرار أو أخطاء.
3. -الأداة تعرض  تلقائيا في جميع صفحات النشر مع إمكانية إخفاء الأداة من تدوينة معينة.
4. -التحكم في الأجزاء المعروضة في حال اردت إخفاء حاوية معينة مثلا إخفاء جدول البيانات.
5. -إمكانية تغيير اللون الرئيسي والثانوي ليناسب قالب مدونتك.
6. -إمكانية تغيير جميع النصوص المتواجدة سواء لغرض التعديل أو الترجمة للغات أخرى.
7. -الأداة مستقلة ولاتخضع لخدمات الطرف الثالث..أي لاتحتاج للتسجيل في أي موقع.
8. -لاتحتاج لتشغيلها سوى لمعرف التطبيق الخاص بك على Firebase تماما مثل عداد مشاهدة الموضوع.
9. -تدعم البيانات المهيكلة الخاصة بالتقييم -النجوم- في نتائج محرك البحث .
10. -إمكانية تعطيل عرض تقييم -النجوم- في نتائج محركات البحث.
11. -الأداة تدعم التخزين المحلي local storage بحيث لاتسمح للمستخدم بالتقييم المتكرر لنفس الموضوع.

معاينة الإضافة

• المعاينة

البنية والدمج

بمجرد تركيب هذه الأداة سيصبح المحتوى الذي تقدمه قابل للتقييم من طرف الزائر مباشرة وليس موقع أو جهة خارجية ومن ثم تزويد Google بالمعلومات الصحيحة لعرض نفس البيانات في المقتطف المنسق الخاص بك على صفحة نتائج البحث..يمكنك مراجعة مقتطف المراجعة من خلال صفحة المطورين Review snippet
ولإبقاء الأمور بسيطة حرصنا على تضمين مقياس تصنيف رقمي -خمس نجوم- وهذا التقييم كلي لعناصر محتوى الصفحة من قبل العديد من الأشخاص وذلك بإستخدام schema.org/AggregateRating . وبالتالي ستظهر المواضيع الخاصة بك على هذا الشكل في محركات البحث التي تدعم البيانات schema.org

 وبما أن عناصر البيانات المنظمة تختلف بإختلاف أنواع المخططات قمنا بالرجوع لعلامات التمييز الأكثر وضوحا للمحتوى الخاص بك مثلا المخطط CreativeWorkSeason والذي يصنف محتواك من الأعمال الإبداعية.
وهذا النوع من المخطط ومن على شاكلته شامل لمحتوى مدونتك بحيث أننا إستخدمناه مع خاصية التجميع AggregateRating فكان كل المطلوب عناصر قليلة وضرورية أهمها إسم العنصر -عنوان التدوينة- الذي يتم مراجعته name وقيمة التقييم ratingValue وعدد الأشخاص الذين قاموا بالمراجعة ratingCount وإليك مثال على الترميز الموجود داخل الاداة التي نقدمها لكم..

{
      "@context": "https://schema.org/",
      "@type": "AggregateRating",
      "itemReviewed": {
        "@type": "CreativeWorkSeason",
        "name": "Rating Stars with simple jQuery",
      },
      "ratingValue": "4.5",
      "bestRating": "5",
      "ratingCount": "100"
}

ملاحظة:

لاحظ أننا دمجنا البيانات المهيكلة مع الاداة تحت أصناف محددة في خاصية التجميع مثل CreativeWorkSeason إفتراضيا أو MediaObject بعد التعديل ..وسنشرح في ما بعد الأصناف المدعومة في إعدادات الأداة..لكن مانريد التنبيه عليه أن المحتوى المقدم من طرف كل مدونة يختلف وهناك أصناف على سبيل المثال لا الحصر محتوى -دليل المواقع- أو -الأحداث- تحتاج إلى تخصيص محدد في البيانات المهيكلة وطبعا هذا إختياري لذلك من يريد التعديل على الاداة لتناسب المحتوى الذي يقدمه فالرجاء الإتصال بنا مع العلم أن هذا التعديل غير مجاني.

قواعد إرشادية

أريد هنا أن أرشدك أو بعبارة أخرى أنبهك للأخطاء التي يجب أن تتجنبها عند تركيب هذه الأداة الحساسة خصوصا إذا شغلت إعداد البيانات المهيكلة معها.

1. قائمة القواعد الإرشادية
2. -أولا تأكد أن لديك معرف تطبيق Firebase خاص بك راجع هذا الموضوع هنا عن طريقة إنشائه.
3. -تأكد من قدرة برنامج Googlebot على الزحف إلى صفحات النشر خصوصا الموجودة بها أداة التقييم - أنظر هنا
4. -تأكد من أنك إطلعت على إرشادات مشرفي المواقع الموضحة من طرف Google
5. -حذاري..أن تستخدم فئات مخطط البيانات المهيكلة التي لن نذكرها -كما سيأتي- لأنها ستعطيك أخطاء فيأداة الإختبار.
6. -لاتقم بوضع الأداة خارج حقل الموضوع مثلا ممنوع أن تضعها في الشريط الجانبي -القائمة الجانبية-
7. -يجب الحصول على التقييمات مباشرة من المستخدمين وليس من بيانات مواقع أخرى لها نفس المحتوى.
8. -حذاري..أن تزيد أو تتلاعب في أعداد التقييم يدويا كأن تقوم بزيادة عدد المراجعين من خلال تطبيق Firebase

تركيب الإضافة

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى: لوحة التحكم

• قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
• إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير  Edit HTML  
• إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
• بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية: تركيب الأكواد

• قم بالبحث عن هذا الوسم <data:post.body/> أسفله أي بعده قم بوضع كود html التالي..

  ملاحظة:

  ستجد الوسم <data:post.body/> الذي نبحث عنه مكرر أكثر من مرة المطلوب هو غالبا الثاني تجده داخل حقل البوست <b:includable id='post' var='post'> أو قم بالتجربة مع الجميع واحد تلوى الآخر حتى تظهر الأداة فقط داخل المنشورات في الأسفل.

    <!-- Rating Stars Box -->
  <b:if cond='data:view.isPost'>
   <div class='rating-widget' expr:data-id='data:post.id' expr:data-title='data:post.title' expr:data-uri='data:post.url'/>
  </b:if>

• قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود css التالي..

  /*===================================
       =style Rating Stars Box=
  ===================================*/
  .rating-widget.js-rating-vu{background-color:#ffffff;position:relative;text-align:center;max-width:380px;margin:20px auto;padding:50px 30px;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
  /*each*/
  .rating-widget em{font-weight:400!important;font-size:12px;text-decoration:none!important;text-transform:none!important;font-style:normal!important;line-height:normal;}
  .rating-widget var{font-family:inherit;font-size:12px;display:inline-block;direction:rtl;font-weight:400!important;border:0;background-color:#eeeeee;color:#676767;margin:0 auto;padding:2px 5px;min-width:50px;text-align:center;width:auto;white-space:pre-wrap;word-wrap:break-word;}
  /*rating report stars*/
  .rating-report{font-size:20px;font-weight:bold;position:absolute;top:0;left:0;margin:5px 15px;padding:5px 10px;}
  /*rating Total stars*/
  .rating-totalstars{position:absolute;right:0;top:0;overflow:hidden;display:inline-block;margin:0;padding:0;}
  .rating-totalstars > em,.rating-totalstars > var{position:relative;display:inline-block;padding:5px 15px;height:30px;line-height:1.5;float:right;}
  .rating-totalstars > em{color:white;right:-180px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;visibility:hidden;float:left;}
  .rating-totalstars > var{z-index:2;margin:0 0 0 -15px;}
  .rating-totalstars:hover em{right:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;visibility:visible;padding:5px 25px;}
  /* Rating Star Widgets Style */
  .rating-stars > ul{direction:ltr;list-style-type:none;margin-bottom:10px;padding:0;}
  .rating-stars ul > li.star{position:relative;display:inline-block;cursor:pointer;}
  /* Idle State of the stars */
  .rating-stars ul > li.star > i.fa{font-size:2.5em;color:#ccc;;}
  /* toltip state of the stars */
  .rating-stars ul > li > span{background-color:#ffffff;color:#000000;padding:8px 5px;position:absolute;font-size:11px;top:-35px;right:-webkit-calc(50% - 40px);right:calc(50% - 40px);width:80px;text-transform:capitalize;text-align:center;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;visibility:hidden;line-height:normal;z-index:3;}
  .rating-stars ul > li > span::before{content:"";border-right:5px solid transparent;border-left:5px solid transparent;border-top:7px solid #ffffff;position:absolute;bottom:-5px;left:-webkit-calc(50% - 5px);left:calc(50% - 5px);display:block;z-index:5;}
  .rating-stars ul > li:hover span{top:-40px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;visibility:visible;}
  /*rating message*/
  .rating-message{position:relative;overflow:hidden;margin:10px 0;padding:10px 10px;border:1px solid #eee;background:#ffffff;}
  .rating-message > img{margin-right:10px;display:inline-block;vertical-align:top;}
  .rating-message > p{vertical-align:top;color:#888;font-size:12px;}
  .rating-message p > span{margin:0 5px;font-weight:bold;color:#8e8e8e;}
  /*table*/
  .rating-widget td > em{font-size:12px;}
  .rating-widget td > b{position:relative;overflow:hidden;width:100px;height:3px;display:block;background:#eee;border:0;margin:0 auto;}
  .rating-widget td > b > i{display:block;height:100%;border:none!important;}
  .rating-widget td > var{;}
  /*discrimination*/
  .rating-widget.js-rating-vu,.rating-widget .rating-stars ul > li > span{-webkit-box-shadow:0 3px 10px rgba(0,0,0,0.16);-moz-box-shadow:0 3px 10px rgba(0,0,0,0.16);-ms-box-shadow:0 3px 10px rgba(0,0,0,0.16);-o-box-shadow:0 3px 10px rgba(0,0,0,0.16);box-shadow:0 3px 10px rgba(0,0,0,0.16);}
  .rating-widget.js-rating-vu,.rating-widget .rating-message{border-radius:6px;-o-border-radius:6px;-ms-border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;}
  .rating-stars ul > li > span{border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
  .rating-widget td > var{border-radius:30px;-o-border-radius:30px;-ms-border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;}
  .rating-totalstars > em,.rating-totalstars > var{border-radius:0 0 0 15px;-o-border-radius:0 0 0 15px;-ms-border-radius:0 0 0 15px;-moz-border-radius:0 0 0 15px;-webkit-border-radius:0 0 0 15px;}
  .rating-stars ul > li > span,.rating-totalstars > em{-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-ms-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;}
  /*--loader-rating--*/
  .loader-rating *{display:none!important;}
  .loader-rating,.loader-rating::before,.loader-rating::after{-webkit-animation:dotFlashing 1s infinite alternate;animation:dotFlashing 1s infinite alternate;}
  .loader-rating{margin:10px auto;}
  .loader-rating::before,.loader-rating::after{content:'';display:inline-block;position:absolute;top:0;}
  .loader-rating::before{left:-15px;animation-delay:0s;-webkit-animation-delay:0s;}
  .loader-rating::after{left:15px;animation-delay:1s;-webkit-animation-delay:1s;}
  .loader-rating{position:relative;padding:0!important;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-moz-box-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;animation-delay:.5s;-webkit-animation-delay:.5s;}
  .loader-rating,.loader-rating::before,.loader-rating::after{width:10px;height:10px;border-radius:100%;-o-border-radius:100%;-ms-border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;}
  /* Responsive */
  @media screen and (max-width:320px){.rating-widget.js-rating-vu {max-width:320px;padding:50px 15px;}.rating-stars ul > li.star > i.fa {font-size:2em;}.rating-message > p {font-size: 10px;}}/* iphon 4/5 + nok lumia 520 */

• قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود jquery التالي..

  <b:if cond='data:view.isPost'>
  <script type='text/javascript'>
  //<![CDATA[
  eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 1s=[\'1W\',\'1X\',\'نجوم\',\'1Y\',\'3c\',\'1t\',\'<l\\e=\\M-X\\3d-3e\\8><1Z\\3f=\\3g\\8><o\\e=\\Y\\8\\Z-B=\\3h\\8><h>\',\'3i\',\'3j\',\'1u\',\'3k\',\'</3></l>\',\'1a\',\'<l\\e=\\M-C\\3l-3m\\8><p\\e=\\20-C\\8>\',\'3n\',\'21\',\'1v\',\'?m=\',\'#3o\',\'</h><i\\e=\\10\\t-v\\t-11\\8></i></o><o\\e=\\Y\\8\\Z-B=\\3p\\8><h>\',\'<1a\\3q=\\3r/3s\\22>.k-23,.k-X\\24\\2>\\1b.v.1w\\2>\\1x.25\\2{s:\',\'26\',\'تنبيه!!..حدث\\2خطأ\\2في\\2عرض\\2الأداة\',\'<l\\e=\\M-C\\8><p\\e=\\20-C\\8>\',\'عذرا!..لقد\\2سبق\\2وقمت\\2بتقييم\\2هذا\\2المنشور\',\'#X\\1b.1t\',\'3t\',\'3u\',\'3v\',\'3w\',\'3x\',\'3y\',\'سوف\\2نحسن\\2محتوانا..لقد\\2صوت\\2بـ\',\'</h><i\\e=\\10\\t-v\\t-11\\8></i></o><o\\e=\\Y\\8\\Z-B=\\3z\\8><h>\',\'#3A\',\'1y\',\'<l\\e=\\M-23\\8>\',\'</w><3>\',\'27\',\'3B\',\'28\',\'B\',\'.k-C\',\'3C\',\'29\',\'12\',\'1z://\',\'بناءً\\2على\',\'2a\',\'3D\',\'2b\',\'3E\',\'2c\',\'2d\',\'s\',\'<l\\e=\\M-1A\\8><1A><2e>\\2\\2\\2\\2<A>\\2\\2\\2\\2\\2\\2<9><w>\',\'#X\\1b\',\'3F\',\'1z://1B.3G/\',\'</3></9>\\2\\2\\2\\2</A></2e></1A></l>\',\'3H\',\'3I\',\'</h>\',\'مقبول\',\'3J\',\'12-3K\',\'</h><i\\e=\\10\\t-v\\t-11\\8></i></o><o\\e=\\Y\\8\\Z-B=\\3L\\8><h>\',\'3M\',\'2f\',\'12-1W\',\'1C\',\'13\',\'2g\',\'12-1D\',\'o.v\',\'3N\',\'نجمة\',\'ممتاز\',\'ضعيف\',\'</l>\',\'%;\\8></i></b></9>\\2\\2\\2\\2\\2<9><3>\',\'تنبيه!!..معرف\\2التطبيق\\2غير\\2موجود\',\'<h>\',\'</3></9>\\2\\2\\2\\2</A>\\2\\2\\2\\2<A>\\2\\2\\2\\2\\2<9><w>\',\'1E-k-2h\',\'</p></l>\',\'3O\',\'</h><i\\e=\\10\\t-v\\t-11\\8></i></o><o\\e=\\Y\\8\\Z-B=\\3P\\8><h>\',\'<h>5</h>\',\'3Q\',\';}.k-3R\\3S\\1x\\2{N-s:\\2\',\'شكرا!..لقد\\2صوت\\2بـ\',\'إجمالي\\2عدد\\2النجوم\',\'3T\',\'3U\',\'2i\',\'2j\',\';}.k-X\\24\\2>\\1b.v.1t\\2>\\1x.25\\2{s:\',\'.3V.2k/3W/k/1D/\',\'</w></9>\\2\\2\\2\\2\\2\\2<9><b><i\\1F=\\1G:\\2\',\';}.k-2l\\2>\\3X,.1H-k,.1H-k::3Y,.1H-k::3Z\\2{N-s:\',\'40\',\'</h><i\\e=\\10\\t-v\\t-11\\8></i></o></1Z></l>\',\'1I\',\'1w\',\'جيد\',\'2m\',\'2n\',\'تم\\2التقييم\\2بـ\',\'لايوجد\\2تقييم\\2بعد..كن\\2الأول\',\'<l\\e=\\41-k\\22></l>\',\'</w></9>\\2\\2\\2\\2\\2<9><b><i\\1F=\\1G:\\2\',\'D\',\'42\'];(f(E,1J){3 1c=f(2o){43(--2o){E[\'44\'](E[\'45\']())}};1c(++1J)}(1s,46));3 1=f(E,1J){E=E-d;3 1c=1s[E];14 1c};$[\'47\'][1(\'1K\')]=f(2p,48){49{3 x=$(q),2q=1(\'4a\');3 n=$[1(\'4b\')]({\'2g\':\'\',\'2r\':!![],\'2i\':!![],\'2s\':!![],\'28\':!![],\'2t\':!![],\'1B\':!![],\'29\':1(\'2u\'),\'s\':[1(\'4c\'),\'#4d\'],\'D\':[1(\'4e\'),\'من\',1(\'4f\'),1(\'2v\'),\'من\\2المراجعات\',1(\'4g\'),1(\'4h\'),1(\'4i\'),1(\'4j\'),\'عذرا!..متصفحك\\2لايدعم\\2هذه\\2الميزة\',1(\'4k\'),1(\'4l\'),1(\'4m\'),1(\'4n\'),\'رائع!!\',1(\'4o\'),1(\'4p\'),1(\'4q\'),1(\'4r\')]},2p);3 6={\'s\':f(2w){14 n[1(\'y\')][O(2w-a)]},\'D\':f(2x){14 n[1(\'c\')][O(2x-a)]},\'1a\':f(2y){$(2y)[\'4s\']($(\'2j\'))}};7(n[1(\'2z\')]===\'\'){14 $(x)[\'1I\'](1(\'2A\'))[1(\'P\')](1(\'2B\')+6[1(\'c\')](1d)+1(\'1L\'))}7(n[\'2r\']&&$(2q)[\'2n\']==d){6[1(\'4t\')](1(\'4u\')+6[1(\'y\')](g)+1(\'4v\')+6[1(\'y\')](a)+1(\'4w\')+6[1(\'y\')](a)+1(\'4x\')+6[1(\'y\')](g)+\';}@-4y-2C\\2D{0%{N-s:\'+6[1(\'y\')](a)+\';}50%,2E%{N-s:#2F;}}@2C\\2D{0%{N-s:\'+6[1(\'y\')](a)+\';}50%,2E%{N-s:#2F;}}</1a>\');$(x)[1(\'1e\')](\'1E-k-2h\')[\'2c\'](1(\'4z\'))[1(\'d\')](4A);$[1(\'4B\')](\'1z://4C.2G.2k/4D/2G.1E\',f(){2H()});3 2H=f(){3 15=$(x)[1(\'1f\')](1(\'4E\')),1M=$(x)[1(\'1f\')](1(\'4F\')),2I=$(x)[\'2b\'](1(\'4G\')),z=4H 4I(1(\'2J\')+n[1(\'2z\')]+1(\'4J\')+15),4={},1N=!a,2K=2I[1(\'1O\')](1(\'4K\'))[d];z[1(\'4L\')](1(\'g\'),f(2L){4M==(4=2L[1(\'4N\')]())&&((4={})[\'B\']=d,4[\'1D\']=15,4[1(\'4O\')]=2K,4[1(\'4P\')]=1M,4[1(\'F\')]=d,4[\'2f\']=d,4[1(\'1P\')]=d,4[\'1y\']=d,4[1(\'Q\')]=d,1N=!d);3 1Q=1g;3 R=r;3 16=d;3 1h=(4[1(\'F\')]+4[1(\'S\')]+4[\'13\']+4[1(\'17\')]+4[1(\'Q\')])[\'21\'](g)[1(\'2M\')](/[.,]2N$/,\'\');3 1i=\'\';7(4[1(\'g\')]!=d){16=(4[1(\'g\')]/1h)[1(\'4Q\')](g)[1(\'2M\')](/[.,]2N$/,\'\');1i=6[1(\'c\')](a)+1(\'2O\')+16+1(\'1j\')+6[\'D\'](g)+1(\'4R\')+6[1(\'c\')](1k)+\'\\2\'+6[1(\'c\')](1O)+1(\'2O\')+1h+1(\'1j\')+6[1(\'c\')](1g)}j{1i=6[1(\'c\')](1l)}3 18=16;7(18>=1Q){18=1Q}3 G=4[1(\'F\')]/R;7(G>d&&G<a){G=a}j 7(G>=r){G=r}3 H=4[1(\'S\')]/R;7(H>d&&H<a){H=a}j 7(H>=r){H=r}3 I=4[1(\'1P\')]/R;7(I>d&&I<a){I=a}j 7(I>=r){I=r}3 J=4[1(\'17\')]/R;7(J>d&&J<a){J=a}j 7(J>=r){J=r}3 K=4[1(\'Q\')]/R;7(K>d&&K<a){K=a}j 7(K>=r){K=r}3 L=\'\';7(n[1(\'4S\')]){L+=1(\'4T\')+18+1(\'4U\')}7(n[\'2s\']){L+=\'<l\\e=\\M-2l\\8><w>\'+6[1(\'c\')](2P)+1(\'4V\')+4[1(\'g\')]+1(\'4W\')}L+=1(\'4X\')+6[1(\'c\')](1f)+1(\'4Y\')+6[1(\'c\')](1K)+1(\'4Z\')+6[\'D\'](P)+1(\'51\')+6[1(\'c\')](1m)+1(\'52\')+6[1(\'c\')](y)+1(\'53\');7(n[1(\'a\')]){L+=1(\'54\')+1i+1(\'1L\')}7(n[\'2t\']){L+=1(\'2P\')+6[1(\'c\')](1f)+1(\'55\')+G+\'%;\\8></i></b></9>\\2\\2\\2\\2\\2\\2<9><3>\'+4[1(\'F\')]+1(\'2Q\')+6[1(\'c\')](1K)+1(\'1R\')+H+1(\'2R\')+4[1(\'S\')]+\'</3></9>\\2\\2\\2\\2</A>\\2\\2\\2\\2<A>\\2\\2\\2\\2\\2<9><w>\'+6[\'D\'](P)+\'</w></9>\\2\\2\\2\\2\\2<9><b><i\\1F=\\1G:\\2\'+I+1(\'2R\')+4[\'13\']+1(\'2Q\')+6[1(\'c\')](1m)+1(\'1R\')+J+\'%;\\8></i></b></9>\\2\\2\\2\\2\\2<9><3>\'+4[\'1y\']+\'</3></9>\\2\\2\\2\\2</A>\\2\\2\\2\\2<A>\\2\\2\\2\\2\\2<9><w>\'+6[1(\'c\')](y)+1(\'1R\')+K+\'%;\\8></i></b></9>\\2\\2\\2\\2\\2<9><3>\'+4[1(\'Q\')]+1(\'56\')}$(x)[1(\'P\')](L);$(1(\'1d\'))[1(\'2S\')](f(57){3 2T=O($(q)[1(\'1l\')](1(\'g\')),T);3 2U=18;7(2U>=2T){$(q)[\'1I\'](1(\'1n\'))}j{$(q)[1(\'1S\')](1(\'1n\'))}});$(1(\'1d\'))[\'1T\'](1(\'58\'),f(){3 2V=O($(q)[\'12\'](1(\'g\')),T);$(q)[1(\'1m\')]()[\'1C\'](1(\'2W\'))[1(\'2S\')](f(2X){7(2X<2V){$(q)[1(\'1e\')](1(\'2Y\'))}j{$(q)[\'2m\'](\'1w\')}})})[\'1T\'](1(\'59\'),f(){$(q)[\'2d\']()[\'1C\'](\'o.v\')[\'1X\'](f(5a){$(q)[1(\'1S\')](1(\'2Y\'))})});$(1(\'1d\'))[\'1T\'](1(\'5b\'),f(){7(5c 5d!==1(\'5e\')){7(2Z[1(\'5f\')](1(\'30\'))!=15){2Z[1(\'5g\')](1(\'30\'),15);3 31=O($(q)[1(\'1l\')](1(\'g\')),T);3 1o=$(q)[1(\'1m\')]()[1(\'5h\')](1(\'2W\'));32(3 1p=d;1p<1o[1(\'5i\')];1p++){$(1o[1p])[1(\'1S\')](1(\'1n\'))}32(3 1q=d;1q<31;1q++){$(1o[1q])[1(\'1e\')](1(\'1n\'))}3 u=O($(1(\'r\'))[1(\'T\')]()[1(\'1l\')](1(\'g\')),T);3 U=\'\';3 33=4[1(\'g\')]+u;7(u>a){U=6[1(\'c\')](2J)+\'<h>\'+u+1(\'1j\')+6[\'D\'](1k)}j{U=6[1(\'c\')](2v)+\'<h>\'+u+1(\'1j\')+6[1(\'c\')](34)}7(u==a){4[1(\'F\')]++}j 7(u==g){4[1(\'S\')]++}j 7(u==1k){4[\'13\']++}j 7(u==1O){4[1(\'17\')]++}j 7(u==1g){4[1(\'Q\')]++}4[1(\'g\')]=33;\'/\'!=5j[\'5k\'][1(\'5l\')]&&(1N?z[1(\'19\')](4):(z[1(\'V\')](1(\'g\'))[1(\'19\')](4[1(\'g\')]),z[1(\'V\')](1(\'F\'))[\'1v\'](4[1(\'F\')]),z[1(\'V\')](1(\'S\'))[1(\'19\')](4[1(\'S\')]),z[1(\'V\')](1(\'1P\'))[1(\'19\')](4[\'13\']),z[1(\'V\')](1(\'17\'))[\'1v\'](4[1(\'17\')]),z[1(\'V\')](1(\'Q\'))[1(\'19\')](4[\'1Y\'])))}j{U=6[1(\'c\')](35)}}j{U=6[1(\'c\')](T)}7(n[1(\'a\')]){36(U)}});37({\'26\':n[\'1B\'],\'27\':n[1(\'1g\')],\'38\':1M,\'1u\':16,\'1U\':1h})})};3 36=f(39){$(1(\'1k\'))[1(\'d\')](5m);$(\'.k-C\\2.2a-C\')[1(\'P\')](39)};3 37=f(W){7(W[1(\'5n\')]){3 1r=3a[\'5o\'](1(\'5p\'));1r[\'1V\']=\'5q/5r+5s\';1r[1(\'35\')]=5t[1(\'5u\')]({\'@5v\':1(\'34\'),\'@1V\':1(\'5w\'),\'5x\':{\'@1V\':W[1(\'5y\')]||1(\'2u\'),\'5z\':W[\'38\']||\'\'},\'1u\':W[1(\'5A\')],\'5B\':\'5\',\'1U\':W[\'1U\']});3a[1(\'3b\')](1(\'5C\'))[1(\'5D\')](1r)}}}j{$(x)[1(\'5E\')]()}}5F(5G){14 $(x)[1(\'1e\')](1(\'2A\'))[1(\'P\')](1(\'2B\')+6[1(\'c\')](3b)+1(\'1L\'))}};',62,353,'|_0xbabc|x20|var|_0x1924cb||_0x10310b|if|x22|td|0x1||0x49|0x0|x20class|function|0x2|span||else|rating|div||_0x2ec4fd|li||this|0x64|color|x20fa|_0x339bab|star|em|_0x4e4a59|0xf|_0x6a2113|tr|value|message|word|_0x42d533|0x24|_0xd12d65|_0x9b0472|_0x29dbc7|_0x176885|_0x18c643|_0x3aae42|x22rating|background|parseInt|0xd|0x4e|_0xa9e04d|0x1d|0xa|_0x574eac|0x15|_0x147c3a|stars|x22star|x20data|x22fa|fw|data|rat3|return|_0x47461c|_0x29b63a|0x6e|_0x218822|0x5b|style|x20li|_0xbabc18|0x11|0x40|0xb|0x5|_0x365d36|_0x211132|0x17|0x3|0x6|0xe|0x50|_0x47cfa2|_0x1a7f95|_0x563890|_0x124052|_0x4ed5|selected|ratingValue|set|hover|x20i|rat4|https|table|schema|children|id|js|x20style|x22width|loader|addClass|_0x4ed588|0xc|0x2e|_0x4b86c5|_0x1332f0|0x4|0x20|_0x2200fb|0x48|0x43|on|ratingCount|type|title|each|rat5|ul|x22text|toFixed|x27|report|x20ul|fa|allowschema|itemReviewedtype|HTMLmessage|schemaType|text|attr|html|parent|tbody|rat2|firebaseID|vu|HTMLreport|head|com|totalstars|removeClass|length|_0x6b148f|_0x464ce4|_0x3cc9d4|allowRating|HTMLtotalstar|HTMLtable|0x19|0x8|_0x3ba647|_0x3825a8|_0x42e032|0x21|0x2d|0x62|keyframes|x20dotFlashing|100|e7e7e7|firebase|_0x115ba8|_0x3cb424|0x7|_0xd98b37|_0x5c16d3|0x37|00|0x2b|0x10|0x2c|0x29|0x4c|_0xc3bc11|_0x237ff0|_0x46fa83|0x23|_0x2b5b35|0x41|localStorage|0x6a|_0x5a5812|for|_0x3754cd|0x13|0x9|_0x144be2|_0x5a6ab0|itemReviewedname|_0x22da50|document|0x12|appendChild|x20text|center|x20id|x22stars|x221|url|stringify|getScript|x20success|box|pathname|ff7f00|x223|x20type|x27text|css|click|val|undefined|mouseover|AggregateRating|postID|x222|no_RatingStars|fadeIn|split|last|ihaverating|querySelector|org|child|getItem|CreativeWorkSeason|uri|x225|script|rat1|remove|x224|extend|widget|x20td|mouseout|replace|firebaseio|post|x20em|before|after|setItem|x27loader|once|while|push|shift|0x17d|fn|_0xb10716|try|0x6d|0x32|0x5d|388d80|0x45|0x4d|0x46|0x34|0x6b|0x63|0x27|0x18|0x42|0x26|0x35|0x2a|0x61|0x25|appendTo|0x57|0x5f|0x3d|0x3a|0x33|webkit|0x47|0x12c|0x55|cdn|v0|0x22|0x1e|0x1a|new|Firebase|0x3b|0x5c|0x4a|null|0x66|0x52|0x4b|0x5a|0x31|0x38|0x6f|0x28|0x70|0x56|0x51|0x6c|0x5e||0x30|0x1b|0x3f|0x58|0x3c|0x14|_0x37aa8b|0x68|0x36|_0x54a318|0x65|typeof|Storage|0x67|0x16|0x3e|0x1f|0x44|window|location|0x59|0xc8|0x60|createElement|0x1c|application|ld|json|JSON|0x53|context|0x69|itemReviewed|0x71|name|0x54|bestRating|0x39|0x4f|0x2f|catch|_0x356358'.split('|'),0,{}))
  
      $('.rating-widget').ihaverating({
              firebaseID: 'your_id',
              schema: true,
              schemaType: 'CreativeWorkSeason',
      });
      
    //]]>
  </script>
  </b:if>

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثالثة: تخصيص الإضافة

ملاحظة:

في السكريبت الذي قمنا بتركيبه سابقا ستجد الجزء الخاص بالإعدادات في أسفل الكود المحدد باللون ماسنقوم به تاليا هو معرفة جميع العلامات المتوفرة لتخصيص الأداة..كل ماعليك فعله هو إدراج العلامات التي تريد تخصيصها بنفس التنسيق الذي سنشرحه.
• في حال أردت المزيد من التحكم قم بإستبدال الجزء الخاص بالإعدادات بالكود الآتي..

  
      $('.rating-widget').ihaverating({
              firebaseID: 'your_id',
              allowRating: true,
              HTMLreport: true,
              HTMLtotalstar: true,
              HTMLmessage: true,
              HTMLtable: true,
              schema: true,
              schemaType: 'CreativeWorkSeason', //CreativeWorkSeason
              color: ['#ff7f00', '#388d80'],
              word: [
                   'تم التقييم بـ'
                 , 'من'
                 , 'نجوم'
                 , 'بناءً على'
                 , 'من المراجعات'
                 , 'لايوجد تقييم بعد..كن الأول'
                 , 'شكرا!..لقد صوت بـ'
                 , 'سوف نحسن محتوانا..لقد صوت بـ'
                 , 'عذرا!..لقد سبق وقمت بتقييم هذا المنشور'
                 , 'عذرا!..متصفحك لايدعم هذه الميزة'
                 , 'ضعيف'
                 , 'مقبول'
                 , 'جيد'
                 , 'ممتاز'
                 , 'رائع!!'
                 , 'إجمالي عدد النجوم'
                 , 'تنبيه!!..معرف التطبيق غير موجود'
                 , 'تنبيه!!..حدث خطأ في عرض الأداة'
                 , 'نجمة'
             ]
      });

  التعديل على الأداة

  • المتغير firebaseID مهم جدا فهو خاص بمعرف تطبيق Firebase الخاص بك ضع المعرف الخاص بك مكان القيمة your_id.
  • المتغير allowRating في حال أردت تعطيل الإضافة مؤقتا دون حذف الأكواد فقط غير القيمة true إلى false لإخفاء الأداة.
  • المتغيرات التالية في حال أردت إخفاء حاوية معينة داخل الأداة مثلا -جدول البيانات- فقط غير القيمة true إلى false لإخفاء العنصر المطلوب.
    المتغير HTMLreport خاص برقم التصنيف.
    المتغير HTMLtotalstar خاص بالعدد الإجمالي للنجوم.
    المتغير HTMLmessage خاص بمربع الحوار.
    المتغير HTMLtable خاص بجدول البيانات.
  • المتغير schema خاص بالبيانات المهيكلة في حال أردت عدم إظهار النجوم في نتائج محرك البحث غير القيمة true إلى false.
  • المتغير schemaType خاص بالفئة التي يندرج تحتها محتوى مدونتك مثلا -الأعمال الإبداعية- أو -الميديا- أو -الألعاب- طريقة تخصيصه نضع إسم الفئة المطلوب كقيمة.
    report

    تنبيه..هذه العلامة تعمل فقط في حال كانت علامة البيانات المهيكلة schema مسموح بها .. كما أن القيم التي نضعها ليست عشوائية بل هي رسمية وتخضع لرقابة روبوت محرك البحث لذلك سنعطيكم قائمة بالفئات المدعومة في السكريبت الخاص بنا وذلك حتى نحصل على نتائج بدون أخطاء في أداة الإختبار.
    كما أننا نعيد ونذكر في حال أردت تخصيص دقيق لمخطط البيانات المهيكلة لتناسب محتوى مدونتك أو ماتقدمه من خدمات فالرجاء الإتصال بنا (هذه الخدمة مدفوعة).
    ضع القيمة CreativeWorkSeason إذا كان محتواك من (العمل الإبداعي). schema/CreativeWorkSeason
    ضع القيمة CreativeWorkSeries إذا كان محتواك من (ورش العمل الإبداعية). schema/CreativeWorkSeries
    ضع القيمة Episode إذا كان محتواك يعرض (أفلام وحلقات بودكاست). schema/Episode
    ضع القيمة Game إذا كان محتواك يعرض (الألعاب). schema/Game
    ضع القيمة MediaObject إذا كان محتواك خاص بالـ (ميديا). schema/MediaObject
    ضع القيمة MusicPlaylist إذا كان محتواك يعرض (قائمة تشغيل الموسيقى). schema/MusicPlaylist
    ضع القيمة MusicRecording إذا كان محتواك يعرض (تسجيل الموسيقى). schema/MusicRecording
    ضع القيمة Organization إذا كان محتواك عن (منظمة). schema/Organization
  • المتغير color خاص بلون الأداة قم بتغيير اللون الرئيسي والثانوي من خلال القيمة ['#ff7f00', '#388d80'] لتتناسب مع قالبك.
  • المتغير word خاص بجميع نصوص الأداة يمكنك تعديلها أو ترجمة النصوص للغات أخرى في حال كانت مدونتك أجنبية.

  تعليق:

  الخطوة الأخيرة في التخصيص هي أنك في حال أردت تعطيل هذه الإضافة -أداة التقيم- في تدوينة معينة قم بالخطوة التالية.
• توجه للتدوينة المطلوبة وقم بتحريرها >> إنتقل من وضع التأليف إلى HTML وضع الكود الأتي أسفل أول سطر تجده ثم تحديث

  <div id="no_RatingStars"></div>
  

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الرابعة: إختبار البيانات المنظمة

• قم بالتوجه إلى أداة إختبار البيانات المنظمة  Structured Data Testing Tool
• قم بنسخ أي رابط تدوينة لك ويجب أن تكون معروضة بها أداة التقييم >> ضع الرابط في الخانة >> ثم إضغط RUN TEST.
  
• سيعرض لك قائمة تبويبات بجميع العناصر الموجودة في قالبك >> لاحظ في القائمة عنصر AggregateRating قم بالضغط عليه للتحقق من القيم.
  
• إنتظر إلى حين تحميل البيانات >> ثم قم بمراجعتها والتأكد من أنها لاتحتوي على تحذيرات أو أخطاء باللون الأحمر.
  
  check_circle

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