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

Friday, May 4, 2012

Ratings from Graddit: related posts and tops

Today's topics: what are and how to setup and display the recommendations (related posts) and tops widgets.

In order to be able to use widgets described below you need to get access to the account management panel. Open the link, click on "Generate secret key" and follow the instruction. After you login to the management panel you'll see 3 tabs: Settings, Recommendations and Tops.


Let's leave this page for now, it is created for the future purposes. All what you can do there now is change the secret key and allow/forbid token generation. If generation is forbidden you couldn't reset the secret key with a token. You might need to reset secret key if you lost it; restoration of a secret key via email isn't yet implemented.


Please check out the possible issues below before reporting any problems with this page.
Here you can create the lists of related (recommended) materials for each page on your website where you have rating widget installed. At the left hand side of the page you'll find the relations you've already created; at the right hand side - pages you can create relations for. For example, if you want to create relations for the page with URL, you need to click "←" link near that URL; that creates a container. Then by pressing "✓" you could add the related URLs into the container. Click on the image above to see a bigger image, that will help to understand the process better. When you add the links their titles will be loaded automatically. You can change them though. You can change the links as well, but you'll have to set the titles manually in this case. Save the recommendations. There are 2 ways to display the widget:
  1. copy the code (for now there's only code for Blogger) and paste it into the desired place of your blog's template. In this case for all the pages of your blog the related posts will be displaying automatically (of course if you created them first).
  2. if you wish to display a particular list of recommended materials then click the "Preview" link and copy the given code into the desired place of your page (or post). In this case (if you haven't forgotten include styles when viewing the page you'll see something like this:
    With some code added:
    <div id='graddit_recommendation' style='display: inline; visibility: hidden;'><div style='background-image: url(; display: inline-block; width: 16px; height: 16px;'></div> You can change this title</div><script src=''></script>
    you can get something like this (with changed title):
Possible issues.
  • Resolved; update widget code. At the right hand side you can't see the pages' URLs, mostly the URLs of the main page. That can happen if you have rating widget shown at the main page (not under cut only), in this case when people vote ratings get assigned with the main page URL. This will be fixed soon. Nevertheless, if you could figure out real addresses of the displayed ratings, the related posts will be shown at the proper pages. If you don't want to get too deep into the mechanism of the ratings just wait for the fix.
  • For now you can't create recommendations not related to a page with the rating widget installed. This will be fixed soon.
  • Manually create recommendations is too hard and boring. Is there a way to make it in automatic mode? Yep, it's boring, but it gives you much more control over the process and you can add materials more relevant to the shown pages. I'm planning to implement some automation though. You will be able to display related URLs for the pages without manually created recommendations; the options will be: show random links for the given set, display another widget using callback function, automatic links based on labels (tags).

Update. Related posts widget has become better; read more.


Tops are a bit easier to control. Top is a lists of pages that got more votes, rating or views:

You can set:
  1. number of displayed links;
  2. maximum top refresh time (in minutes, not less than 60 and not more than 1440 - these limits will be changed after I'll get some stats data);
  3. sort criteria (number of votes/number of views/average rating);
  4. options:
    • only for the last preiod - if ticked, top will be formed based on short period of time information; if not ticked, the current values of views/votes/rating will be taken as a base;
    • less rated records first - sort order;
    • exclude main page - links to the main page will not be displayed in the top widget;
    • load titles - load pages titles when displayed in tops. Loading will not happen every time top is displayed; data will be cached for the period of 12 hours (maximum);
    • drop URL parameters - recommended to be set; this will help you to get rid of the links to the same pages having different parameters in the URLs (for example, ?showComment=...). Of course if these parameters are not important for your site;
    • show ratings near to links - show sort criteria values. I recommend to have it turned on before you actually expose top to the users and turn it off then; users don't need to see this and might get confused;
  5. inline styles - try various parameters to change the layout of your top widget;
  6. "cut text after" - maximum number of characters in the displayed URL (or titles); 0 - do not cut.
Playing with online styles can help you get something like this:

That's all folks. Ask questions, criticize, tell me how would like to change these widgets. Found a mistake? Use the misspellings tracking widget at the top right corner of the page. Stay tuned.

Rate this posting:

You might like:


  1. Hi
    What a amazing and powerful system this is
    Can u help me I am having trouble when I create top rated widget and put on my blogger sidebar at the end of the post title I get my blogger name on every post title, how do I remove the widget displaying my site name after the post name inside the widget I just want post name with thumbnail

    1. What is the URL of your blog, I want to see that.

    2. this is my blog


    3. I'm not sure, I need to see the template and the result. Is the problem still appears? If so, you can paste your template to and I'll try to check it.

    4. hi
      i paste the template code

      please kindly have a look and tell my why that happens

      thanks alot

    5. hi fruits

      regarding the widget tops that dispalyed my post title followed by my site title

      i have solved the issue and it now only displays the page title on the widget tops just like i wanted, so dont waste your time looking at the template source code

      this is what i did

      open blogger edit html


      "data:blog.pageName - data:blog.title><titleb:else"

      delete the - "data:blog.title"

      should now look like this


      now save

      when you open a page this wil only show you page title on the top

      sorry i had to cut out some html coz blooger dont allow to post html here
      so inbox me for the full code to remove the blogger title after page title

    6. It's ok, I've got it. BTW, for blogger to not cut HTML you can replace < with &lt; and > with &gt;, then it will display properly in the comments.

  2. hi the account management does not work anymore
    is your server down?

  3. tops widget, instead of displaying titles of posts, very often shows "moved temporarily." I see that in this example the top widget at the top, as is the problem. I hope this will be fixed, because I really spoils the whole effect. Besides, this system is great! Just that it was impossible to vote from the same IP, it would be ideal, because now you can clear the memory of the browser and the same person can once again cast their vote. But even though it is great. Yours.

    1. "moved temporarily" is coming from those Blogspot's country domains when it redirects you from .com, I'll fix that. One vote per IP is in plans.

    2. "moved temporarily" should now be fixed.