Most popular this week: Star ratings rich snippet on Google SERP with Graddit (for Blogger).

Sunday, November 4, 2012

How to sort blogger posts by popularity

Blogger offers 2 options to sort your posts: sort by newest and sort by oldest. With Graddit widgets you can sort posts by their popularity. Look at this page: http://fruitfulbookmarks-en.blogspot.com/p/top-posts.html. It displays 5 top articles from this blog. And this one: http://fruitfulbookmarks-en.blogspot.com/p/top-posts-about-blogspot.html shows best posts announcements tagged with "blogspot".
These aren't regular posts, these are Bloggers static pages. If you'll open their source code you'll see that there are no actual posts, only some javascript code. To create your own pages like those you'll need:
  1. create an account if you still don't have it;
  2. create a desired top here;
  3. add graddit-extras.js into <head> section of your template:
    <script src='http://static.graddit.com/js/graddit-extras.js' type='text/javascript'/>
  4. create static HTML page, switch to HTML edit mode and add jQuery, if you don't have it already in your template:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
  5. add JS function that will process your posts:
    <script type='text/javascript'>
    function gradditLoadTopPosts(id) {
    var element = $("#" + id);
    if (element.length > 0) {
    var wrapperDiv = $("#top5");
    if (wrapperDiv.length == 1) {
    element.find("a").each(function(i, a) {
    var host = a.hostname;
    var blogHost = "fruitfulbookmarks-en.blogspot";
    if (host.indexOf(blogHost) >= 0) {
    var docHost = document.location.host + "";
    var level1Doc = docHost.substring(blogHost.length, docHost.length);
    var level1Post = host.substring(blogHost.length, host.length);
    var link = a.href;
    if (level1Doc != level1Post) {
    link = link.replace(blogHost + level1Post, blogHost + level1Doc);
    }
    var containerId = "top_posts_" + i;
    wrapperDiv.append("<div id='" + containerId + "' style='display: none;'></div>");
    var container = $("#" + containerId);
    container.load(link);
    setTimeout(function() {
    var post = container.find("div[class='post hentry']");
    if (post.length > 0) {
    var newText = "";
    if (i > 0) {
    newText = "<hr style='width: 100%; clear: both;'/>"
    }
    newText += gradditCutText(post.html(), 900, 2) + "<" + "br /><" + "br/>";
    var startIdx = newText.indexOf("<h3 class=\"post-title entry-title\">");
    var endIdx = newText.indexOf("</h3>");
    newText = newText.substr(0, startIdx) + "<a href='" + link + "'>" + newText.substr(startIdx, endIdx - startIdx + 5) + "</a>" + newText.substr(endIdx, newText.length);
    container.html(newText);
    container.show();
    }
    }, 2000 * (i + 1));
    }
    });
    }
    }
    }
    </script>
    Couple of words about changes you might need to make to this function in order to make it working with your blog:
    • #top5 - this is id if the container element, you'll see it below; depending on the template you might need to change the names of the classes;
    • in line var blogHost = "fruitfulbookmarks-en.blogspot"; replace blog URL with your own; do not include country domain (.com, .co.uk, etc.)!
    • when calling function gradditCutText to cut text of your posts there are few parameters you might want to change: second parameter is max length of text, third one allows you to control how to cut it (0 - do nothing, 1 - cut to word, 2 - expand to word). If you don't want to cut text then pass both parameters equal to 0;
  6. add HTML elements and tops script call with callback function:
    <div id="top5"></div>
    <div id="graddit_top_wrapper" style="visibility: hidden; display: none;"></div><script type="text/javascript" src="http://www.graddit.com/showtop/eng/33?id=graddit_top_wrapper&callback=gradditLoadTopPosts"></script>
    Make sure to change top id (33 here) to your own that should be taken from administer page (when you create/manage tops).

It should be ready now. Besides that tops got new parameter: labels. Now you can specify which posts (with what tags) should be displayed in tops widgets. So (if you're familiar with JS) on a page you can display top posts filtered by categories. Try it, let me know what you think.



Rate this posting:
{[['']]}

You might like:

45 comments:

  1. Hi
    Is this the same as top viewed posts or isit different
    Thanks

    ReplyDelete
    Replies
    1. This is how top viewed posts links can be transformed to posts (actual full posts text). Just look at the sample: http://fruitfulbookmarks-en.blogspot.com/p/top-posts.html. It's an extension to top viewed posts.

      Delete
    2. That link u gave the post is empty shows nothing

      Delete
    3. It's empty initially, but then JS should load the posts. Probably there's an error that I can't see. What browser are you using to open that page?

      Delete
    4. im using firefox and chrome
      page is empty on both browsers theres no content
      and by the way did u manage to have a look at my blog http://bengalipiffs.blogspot.co.uk/ i was having poblems with the side bar top widget code and my saved top widget in account management no longer there too.

      Delete
    5. ok, I think I've got what's the problem with the empty page above, it's not browser, it's blogger replacing blogspot.com with blogspot.co.uk for you. I'll fix that later, but this is also why your tops and stats disappear. Actually they don't. Here's what you need to do:
      1. in your template insert "domain" parameter into the parameters line when call graddit ratings:
      ...&domain=bengalipiffs.blogspot.com... and give it some time to update in the database;
      2. I see you registered twice: with the domains bengalipiffs.blogspot.co.uk and bengalipiffs.blogspot.com. Don't use co.uk, login only with .com, have all your tops there and also your stats will get back to normal sometime after changes made in (1).

      Delete
    6. i cannot find domain parameter i have looked on my template
      yes i register twice by mistake because blogger sometimes make me .co.uk or .com and know my tops are messed up, please tell me again what i need to do to log in and get my tops stats back
      thank you

      Delete
    7. You will not be able to find domain paramenter, this is the parameter you'll have to add to the graddit widget code. There's lots of parameters: &id=, &labels=, &stats=, &url=, etc. You'll need to add &domain to force it to be .com, not co.uk. For your tops all that you need to do is to login and work with http://bengalipiffs.blogspot.com only.

      Delete
    8. hi
      i still dont knw how to make a parameter? can u help me? do u have a email address? or anythink i can talk to you because i want to send you my widget code it dosnt let me post html on here so if i send you my widget code you can send me back with the parameters code with it? or send me email OR SEND ME A EMAIL
      MY EMAIL IS:

      khjhgjhj@gmail.com

      THANKS ALOT

      Delete
    9. You gave me the link to your template on pastebin somewhere, I'll try to check, but can't promise it'll happen very soon. If you made any changes to template since you sent it to pastebin, please update it and send me the link again. I'll check it as soon as I can.

      Delete
    10. WHAT I MEAN IS ONLY THE GRADDIT WIDGET CODE ?
      CAN U EMAIL ME WITH THE PARAMETERS ON IT TO THE ADDRESS THANKS

      Delete
    11. Yellow stars? Here it is: http://pastebin.com/0xvmA9ZG - look at the very end of script paratemeters line where &domain= is.

      Delete
    12. THANKS
      it didnt work first them i added amp; and template saved
      ok how long now until i can acces account for tops widget

      Delete
    13. Tops settings (if missing) will not recreate automatically, you'll have to create them again. The info in tops will update in... well, depending on how many people vote/visit your site; the more people, the faster it will update (from hours to days).

      Delete
    14. which domain should i log in with blogger.com or blooger.co.uk
      i logged into .com just know

      i have no stats there and 2 tops which i cannot even delete

      Delete
    15. Log in with com. Normally it should pass some time after you add domain parameter, so that data could update in the DB in order for you to see stats. I've updated it for you manually, so you can try now. If still not displaying, this is caching and there's not much I can do about it, you'll have to wait for couple of hours when it expires. What happens when you're trying to delete top?

      Delete
    16. thanks alot my tops working know :)
      but im having trouble putting tops and most voted and most views widgets together on my site why this not letting me only works with one tops at a time, something to do with same div tags i dont know is it posible to put all 3 tops on sidebar widget?

      Delete
    17. It is possible to have more than one top on the same page (this blog has). What you need to do is to make wrapper DIV ids unique (like "graddit_top_wrapper_1", "graddit_top_wrapper_2", etc.) and have these ids passed to the script in id parameter. Again, you can open source code of this blog (http://fruitfulbookmarks-en.blogspot.com, not this particular post) and search it for "showtop" - check how it works with the IDs.

      Delete
    18. I havnt tryed it yet but once I do il let UNO I had a question why do tops update take such a long time wats the minimal amount of time to set because I set 2 minutes Dosnt update resets back

      Delete
    19. I havnt tryed it yet but once I do il let UNO I had a question why do tops update take such a long time wats the minimal amount of time to set because I set 2 minutes Dosnt update resets back

      Delete
    20. I havnt tryed it yet but once I do il let UNO I had a question why do tops update take such a long time wats the minimal amount of time to set because I set 2 minutes Dosnt update resets back

      Delete
    21. You can't set 2 minutes, minimum is 60 minutes. Tops reflect your visitors reaction, it is pointless to have tops that update every 2 minutes, this time is not enough to get number of votes/views that can change list of most viewed pages. Frequent tops update is something you might want to have if you have thousands of visitors that vote every second.

      Delete
    22. Ok thanks hey fruitful bookmark how do I change store the CSS for the sidebar tops and voting widget stars on my website I want to change CSS for those div tags how do I get the source to put on blogger skins thanks

      Delete
    23. I don't think I understood your request, but if you just want to change custom graddit css, take original here: http://static.graddit.com/css/graddit.css, change it and save to some public hosting (like google sites) and use it instead of graddit.css.

      Delete
    24. If I copy this to blogger template will I b able to change with blogger

      Delete
    25. i done the tops widget on same page
      it works i gave unique div id and i change script
      &callback=gradditLoadTopPosts
      and it works thanks alot

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. hello again fruitfulbookmarks
    i have tried to following this blog page tutorial

    How to sort blogger posts by popularity

    i got stuck on step 5

    after copying that script, when saving blogger gives a error

    "Error parsing XML,Open quote is expected for attribute "{1}" associated with an element type "class"."

    so it wont save? what do i do?

    also your demo pages is not working either

    http://fruitfulbookmarks-en.blogspot.com/p/top-posts.html
    http://fruitfulbookmarks-en.blogspot.com/p/top-posts-about-blogspot.html

    both these page content are blank

    ReplyDelete
    Replies
    1. This error isn't really informative, you'll need to remove the function (possibly line by line) and try save template to figure out what part of it causes problem. Good think to do would be to have all this kind of stuff in a separate file. Regarding blank pages - yes, I guess I know what's the reason, it's blogger replacing .com with .co.uk (or similar) that causes origin JS error. I'll try to fix that.

      Delete
  4. hey fruits have you updated those site yet because i still cannot see the preview its empty page i am trying to follw this guide but theres a problem with your script blogger dosnt parse it corectly so it wount save template you see

    ReplyDelete
    Replies
    1. Oh, now I think I've got it. The issue is that Blogger editor replaces some characters, so the they got lost in JS listing above: a couple of br tags in line 22 of paragraph 5. I've rewritten that line, so it should not cause this error anymore. Please try.

      Delete
    2. i tryed the new code still dosnt work

      Error parsing XML, line 31, column 72:

      which is still the br tags

      Delete
    3. Ok, my instruction wasn't clear that you need to add JS function inside your static page, not template. I've changed paragraph 4 to reflect this. Did you add function to template or to static page? It's prepared to be in static page, not in the template. I've just tried it on my test blog, didn't get that XML error.

      Delete
  5. hi now i pasted into static page

    i have done everything you said but there is no difference in tops the tops on the static page is exactly the same as my sidebar widget tops, i think somethink must be wrong

    ReplyDelete
    Replies
    1. Give me the link to that static page.

      Delete
    2. I have also update the code in paragraph 5 to work properly with national domains, so it now should be working for all (.com, .co.uk, etc.) - don't forget to take newer code.

      Delete
    3. no stil not working heres the code inside my static template


      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

      <script type='text/javascript'>
      function gradditLoadTopPosts(id) {
      var element = $("#" + id);
      if (element.length > 0) {
      var wrapperDiv = $("#top5");
      if (wrapperDiv.length == 1) {
      element.find("a").each(function(i, a) {
      var host = a.hostname;
      var blogHost = "bengalipiffs.blogspot.co.uk";
      if (host.indexOf(blogHost) >= 0) {
      var docHost = document.location.host + "";
      var level1Doc = docHost.substring(blogHost.length, docHost.length);
      var level1Post = host.substring(blogHost.length, host.length);
      var link = a.href;
      if (level1Doc != level1Post) {
      link = link.replace(blogHost + level1Post, blogHost + level1Doc);
      }
      var containerId = "top_posts_" + i;
      wrapperDiv.append("<div id='" + containerId + "' style='display: none;'></div>");
      var container = $("#" + containerId);
      container.load(link);
      setTimeout(function() {
      var post = container.find("div[class='post hentry']");
      if (post.length > 0) {
      var newText = "";
      if (i > 0) {
      newText = "<hr style='width: 100%; clear: both;'/>"
      }
      newText += gradditCutText(post.html(), 900, 2) + "<" + "br /><" + "br/>";
      var startIdx = newText.indexOf("<h3 class="post-title entry-title">");
      var endIdx = newText.indexOf("</h3>");
      newText = newText.substr(0, startIdx) + "<a href='" + link + "'>" + newText.substr(startIdx, endIdx - startIdx + 5) + "</a>" + newText.substr(endIdx, newText.length);
      container.html(newText);
      container.show();
      }
      }, 2000 * (i + 1));
      }
      });
      }
      }
      }
      </script>

      <div id="top5">
      </div>
      <div id="graddit_top_wrapper4"></div>
      <script src="http://www.graddit.com/showtop/eng/39?id=graddit_top_wrapper4" type="text/javascript"></script>

      Delete
  6. and here is the static page link

    http://bengalipiffs.blogspot.co.uk/p/top-post.html

    ReplyDelete
    Replies
    1. First of all, remove jQuery include from the static page body, you have it already in you template above, these two includes may be conflicting; let me know when done, I'll check if there's any other issues with the tops.

      Delete
    2. ok this is how it looks right now

      <b>on blogger template underneath the head it looks like this</b>

      <head>
      <script src='http://static.graddit.com/js/graddit-extras.js' type='text/javascript'/>


      <b>on static page it looks like this</b>

      <script type='text/javascript'>
      function gradditLoadTopPosts(id) {
      var element = $("#" + id);
      if (element.length > 0) {
      var wrapperDiv = $("#top5");
      if (wrapperDiv.length == 1) {
      element.find("a").each(function(i, a) {
      var host = a.hostname;
      var blogHost = "bengalipiffs.blogspot.co.uk";
      if (host.indexOf(blogHost) >= 0) {
      var docHost = document.location.host + "";
      var level1Doc = docHost.substring(blogHost.length, docHost.length);
      var level1Post = host.substring(blogHost.length, host.length);
      var link = a.href;
      if (level1Doc != level1Post) {
      link = link.replace(blogHost + level1Post, blogHost + level1Doc);
      }
      var containerId = "top_posts_" + i;
      wrapperDiv.append("<div id='" + containerId + "' style='display: none;'></div>");
      var container = $("#" + containerId);
      container.load(link);
      setTimeout(function() {
      var post = container.find("div[class='post hentry']");
      if (post.length > 0) {
      var newText = "";
      if (i > 0) {
      newText = "<hr style='width: 100%; clear: both;'/>"
      }
      newText += gradditCutText(post.html(), 900, 2) + "<" + "br /><" + "br/>";
      var startIdx = newText.indexOf("<h3 class="post-title entry-title">");
      var endIdx = newText.indexOf("</h3>");
      newText = newText.substr(0, startIdx) + "<a href='" + link + "'>" + newText.substr(startIdx, endIdx - startIdx + 5) + "</a>" + newText.substr(endIdx, newText.length);
      container.html(newText);
      container.show();
      }
      }, 2000 * (i + 1));
      }
      });
      }
      }
      }
      </script>

      <div id="top5">
      </div>
      <div id="graddit_top_wrapper4"></div>
      <script src="http://www.graddit.com/showtop/eng/39?id=graddit_top_wrapper4" type="text/javascript"></script>

      Delete
    3. ignore the brackets <b> </b> sorry i try make this text bold but didn't work
      anyway still does not work fruits still the same mate

      check it again and let me know

      http://bengalipiffs.blogspot.co.uk/p/top-post.html

      Delete
    4. Ok, now change this:

      var blogHost = "bengalipiffs.blogspot.co.uk";

      to this:

      var blogHost = "bengalipiffs.blogspot";

      If you'll check my function, it doesn't have country domain in there, it's made on purpose. Lets see if that'll help.

      Delete
  7. i just done what you said and its still the same fruits this time page loads and its same as the sidebar widget and after 5 seconds the page turns into full screen and the top widget keeps looping all the way down have a look

    http://bengalipiffs.blogspot.co.uk/p/top-post.html

    this is how statis page looks

    <script type='text/javascript'>
    function gradditLoadTopPosts(id) {
    var element = $("#" + id);
    if (element.length > 0) {
    var wrapperDiv = $("#top5");
    if (wrapperDiv.length == 1) {
    element.find("a").each(function(i, a) {
    var host = a.hostname;
    var blogHost = "bengalipiffs.blogspot";
    if (host.indexOf(blogHost) >= 0) {
    var docHost = document.location.host + "";
    var level1Doc = docHost.substring(blogHost.length, docHost.length);
    var level1Post = host.substring(blogHost.length, host.length);
    var link = a.href;
    if (level1Doc != level1Post) {
    link = link.replace(blogHost + level1Post, blogHost + level1Doc);
    }
    var containerId = "top_posts_" + i;
    wrapperDiv.append("<div id='" + containerId + "' style='display: none;'></div>");
    var container = $("#" + containerId);
    container.load(link);
    setTimeout(function() {
    var post = container.find("div[class='post hentry']");
    if (post.length > 0) {
    var newText = "";
    if (i > 0) {
    newText = "<hr style='width: 100%; clear: both;'/>"
    }
    newText += gradditCutText(post.html(), 900, 2) + "<" + "br /><" + "br/>";
    var startIdx = newText.indexOf("<h3 class="post-title entry-title">");
    var endIdx = newText.indexOf("</h3>");
    newText = newText.substr(0, startIdx) + "<a href='" + link + "'>" + newText.substr(startIdx, endIdx - startIdx + 5) + "</a>" + newText.substr(endIdx, newText.length);
    container.html(newText);
    container.show();
    }
    }, 2000 * (i + 1));
    }
    });
    }
    }
    }
    </script>

    <div id="top5">
    </div>
    <div id="graddit_top_wrapper4"></div>
    <script src="http://www.graddit.com/showtop/eng/39?id=graddit_top_wrapper4" type="text/javascript"></script>

    ReplyDelete
    Replies
    1. I think the code is not an issue now. It seems that the problem is that you have the same tops with the same callback on your posts (in the sidebar), so the static pages load the tops and the tops are trying to load posts to display them on static page, the posts have tops too and trying to execute same callback function, so all this falls into recursion and fails badly. You need to re-think structure of your template if you want to use static top pages, you definitely need to remove callback from the tops code on your post pages (callback=gradditLoadTopPosts), why are they there? This callback function should be called only on static pages, not inside posts.

      Delete