Saturday, October 20, 2012

Ratings widget for Tumblr

Graddit now supports Tumbl microblogging platform. Examples here. To insert a single rating you'll need to copy code from ratings page Generic tab and paste it into desired place while composing new post. To be able to use javascript inside posts you'll have to make some configuration changes:
To edit settings login to tumblr and press preferences icon (1). Set Edit post using to plain text/HTML (2).

You'll also need to add graddit.css styles in theme settings. Go to theme customization, press Edit HTML button
Add styles
<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>

to <head> section
Press Update Preview, then Save (if the button appeared). Everything is ready now to use single ratings.

If you'd like ratings to appear on each post automatically you'll need to make some more modifications to your theme template. First decide where you want ratings to appear: what kind of material, what part of post, should it be visible on the main page or only on internal pages, etc. Then try to find corresponding place in the template. Not with all the templates it will be easy to do; experiment with some harmless piece of text first (maybe even with comments). For example, for ratings to be displayed on the top of text posts below the titles on the main page and on internal pages, code needs to be added into {block:Posts} inside {block:Text} block right after closing {/block:Title}
Don't forget to save the template. Widgets code should be taken from the ratings page Tumblr tab.

Ask questions here if you have any issues with widgets in Tumblr.
Ratings widget for Tumblr, 4.62 out of 5 based on 8 ratings
at

2 comments:

  1. LazaroDecember 5, 2012 at 7:51 AM

    I'm completely lost
    After pressing Edit HTML button I need to add styles but where? at the end of the head section?
    I do want stars to appear on each post automatically below the titles of each post but what code is the one that needs to be added and where? Sorry if I sound 2 dumb!
    Thanks
    Laz
    www.nombrete.com

    ReplyDelete
    Replies
    1. ffbsDecember 5, 2012 at 9:49 AM

      > After pressing Edit HTML button I need to add styles but where? at the end of the head section?
      At the end of head it should work.

      > what code is the one that needs to be added and where?
      Go to http://www.graddit.com/ratings-widget, select a widget and then on the right side select Tumblr, this is the code you need to add to your template. Finding a place where to add it can be a little bit tricky, is there {/block:Title} in your template? What happens if you just add some simple text there (like !!!, not widget code) - does it appear where you want? If not, try to locate appropriate place using some simple text string that you can easily identify and when it's found place widget code there. If you still have questions please write more details what exactly the issue is, screenshots are helpful too.

      Delete