Adding polls and ratings to Tumblr sites

Did you know that you can embed Polldaddy polls and ratings into Tumblr blogs? In our example we’re going to demonstrate how to add five-star and Nero ratings, however the process is the same for polls.

Once you’ve logged into your Tumblr dashboard, click on the Cog icon to go to your blog Preferences page:

Tumblr strips out advanced HTML, CSS, and JavaScript from the regular post editor. To ensure that Tumblr can accept the JavaScript code we need for our polls and ratings, we must ensure that under Edit posts using, you’ve selected plain text / HTML:

Be sure to save this new preference. Now create a new post in Tumblr.

Within Polldaddy.com, hover over the title of your poll or your rating in the dashboard and click on Collect Votes.

On the Collect Votes page, select JavaScript.

Copy the JavaScript code we supply. Now paste that JavaScript code into your Tumblr post. Be sure to enclose the JavaScript code in paragraph tags. Here’s a sample of what the code would look like for a five-star rating. Notice that the code is enclosed in paragraph tags:

Here’s sample code for a Nero rating:

Finally, save your post and view your site. Here’s how five-star and Nero ratings look in Tumblr posts:

Adding ratings to a Tumblr theme

If you would like ratings to appear under all or certain types of posts by default, you can do this by editing your theme. The advantage of this is that all your blog’s ratings will appear under the one rating, and in the rating reports you can track how posts were rated more easily.

To add the rating to the theme you need to edit the rating embed code to include an item id. It will look like the following:

<div id="pd_rating_holder_[rating-id]_{PostID}"></div>
<script type="text/javascript">
 PDRTJS_settings_[rating-id]_{PostID} = {
"id" : "[rating-id]",
"unique_id" : "[rating-id]_{PostID}",
"title" : "{Title}",
"permalink" : "{Permalink}",
"item_id" : "_{PostID}"
};
</script>
<script type="text/javascript" src="http://i0.poll.fm/js/rating/rating.js"></script>

Replace the [rating-id] with your own rating id. The {PostID} and {Permalink} fields are automatically filled in by Tumblr when the rating is loaded, making each rating unique and also easy to find in the rating reports.

Here are the steps to insert this embed code into your theme.

  • Log into your Tumblr dashboard
  • Click on the Cog icon to go to your blog Preferences page

  • Click on the Customize you blog button

  • Click on the Theme option

  • Find {block:Posts} code block in the theme

  • Here you have a list of the different types of posts possible on Tumblr
  • Find the post types you want to rate, then insert the rating embed code after the {/block:Caption}
  • Click on the Update preview button

  • Click on the Save + Close button

  • Now your Tumblr posts should have ratings embedded by default.

Polldaddy Tweets
%d bloggers like this: