مساحة إعلانية

الجمعة، 15 فبراير، 2013

الجمعة، 15 فبراير، 2013

إضافة المعلقين الأكثر تفاعلا مع مصغرات

إضافة جميلة تساعد في تنشيط التعليقات بالمدونات فهي تجعل روح المنافسه بين المعلقين أعلى لأن الناتج سيكون عرض صورة بملفه الشخصي تعرف الناس عليه أكثر وايضا هي نوع من تكريم المتابعين المخلصين لمدونتك وميزة الإضافة انه يمكن التحكم بها لتجنب المعلقين السبام الذين يودون الحصول على مكان بها بتعليقات لا علاقه لها بالمواضيع ولا تمت للمدونة بصلة
وسنتعرف اكثر على إضافة أكثر المعلقين تفاعلا Top Commenters Widget بشرح الكود الخاص بها
والذي ستقوم بإضافته الى آداة HTML/JavaScript


<style type="text/css">

.top-commenter-line img {

-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
<script type="text/javascript">
// CONFIG:
var maxTopCommenters = 5;
var minComments = 1;
var numDays = 0;
var excludeMe = true;
var excludeUsers = ["Anonymous", "someotherusertoexclude"];
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = ''; 
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;

  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;

  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");

  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';

  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();

  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }

  for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

      //Calculate difference btw the two dates, and convert to days
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;

    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;

    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }

  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);

  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });

  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

وسنشرح أهم خصائص الكود
الرقم 5 هو عدد المعلقين الذي سيظهر في الآداة
الرقم 0 هو عدد الأيام التي تحتسب فيها التعليقات صفر تساوي كل الأيام
الرقم 42 هو طول إسم المعلق فهناك أسماء تكون طويلة تحتاج تقصير
الرقم 56 هو مقاس الصورة المعروضة
أما كلمة "Anonymous",  هي التي سنضيف بعدها الأسماء المراد حجبها
مثلا انا قمت بحجب إسمي من القائمة فأضفت إسمي كالتالي بعد الكلمة
"Anonymous","كن مدون",
وهكذا لو لديك مثلا مدونة متعددة الكتاب ستضيف كل الكتاب فلا داعي لوجود تعليقاتهم في القائمة
وايضا شخص يكتب تعليقات سبام هذا ايضا تكتب إسمه فلا يتم إحتسابه
وبالتوفيق للجميع بإذن الله

هناك 14 تعليقًا:

  1. اضافه جميله انا ترتيبي الثالث

    ردحذف
  2. ويشرفنا ذلك أخي صلاح
    فانت من أوائل زوار المدونة
    ومن أوائل من دعمنا بتعليقات
    ودائما نسعد بمرورك

    ردحذف
  3. السلام عليكم روحمة الله تعالى وبركاته
    ماشاء الله عليك اخي الكريم شرح جميل جدا
    في إنتظار جديدك

    ردحذف
  4. وعليكم السلام ورحمة الله وبركاته
    حياك الله أخي الفاضل
    وجزيل الشكر على مرورك الطيب

    ردحذف
  5. أحي عمرو أشكرك على الموضوع

    وأقسم باالله أني أحبك في الله

    ردحذف
    الردود
    1. أحبك الله الذي أحببتني لأجله
      وأسأل الله أن يجمعني وإياك على سرر متقابلين في جنات النعيم

      حذف
  6. جزاك الله خيرا
    و لكن هذه الاضافة لا تحتسب التعليقات فى صندوق Disqus أليس كذلك ؟

    ردحذف
    الردود
    1. وجزاكم الله بالمثل أختي الفاضلة
      لا هي لا تحتسب تعليقات Disqus فهو له أدوات خاصه به
      بإذن الله إن كان في العمر بقية بعد غد سأضيف آدوات Disqus

      حذف
  7. شكرا اخي على الفادة r=

    ردحذف
    الردود
    1. أشكرك على مرورك الكريم تحياتي =r

      حذف
  8. شكرا أخي الفاضل علي مجهودك العظيم ونحن ننتظر التقدم أكثر وأكثر الله المستعان ربنا يعينك

    أخوك الكابتن عمدة
    صاحب مدونة الكابتن
    www.alk2abten.tk

    ردحذف
    الردود
    1. أهلا ومرحباً بك أخي الكريم
      اسعدني مرورك

      حذف
    2. شكرا جزيلا أخي العزيز والله إني أحبك في الله من دون أن أراك فقط لمعاملتك الجميلة والراقية

      رجاء :-

      مساعدة في حل مشاكل عندي في مدونتي لو الوقت يسمح بعد إذن حضرتك
      كلمني ضروري جدا ع الايميل
      emadalazazy@gmail.com

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©