Adding thumbs up/down to Tumblr Page

Question

Wanting to add a thumbs up/down rating system to my Tumblr Page, just like how fmylife.com and textfromlastnight.com have. Any ideas of how this can be added or if anyone has done this before successfully.

Answer 1

Tumblr doesn't have an up/down rating system built in, so if it exists, it would need to be an external site that stores the ratings.

Tumblr does have an up-only rating system, called Likes. You could use a thumb icon to style it. I created a Tumblr to explain how to setup a Like button in a theme: http://like-button.tumblr.com/

To add Like functionality, you use the following URL and set it as the src attribute of an invisible <iframe>:

http://www.tumblr.com/<command>/<oauthId>?id=<postId>

• <command>: like or unlike
• <oauthId>: last eight characters of {ReblogURL}
• <postId>: {PostID}

Example:

http://www.tumblr.com/like/fGKvAJgQ?id=16664837215

You need to put both variables, {ReblogURL} and {PostID}, into your {block:Posts} block. Then use script to build the URL and set the src.

Script:

$( document ).on( 'click', '.like', function ( event ) {

event.preventDefault();

var command = $( this ).hasClass( 'liked' ) ? 'unlike' : 'like',
    post = $( this ).closest( '.post' ),
    oauth = post.find( '.reblog' ).attr( 'href' ).slice( -8 ),
    id = post.attr( 'id' ),
    likeUrl = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;

$( '#like-it' ).attr( 'src', likeUrl );
$( this ).toggleClass( 'liked' );

} );

HTML:

{block:Posts}
<article id="{PostID}">
<a href="{ReblogURL}" class="reblog">reblog</a>
<a href="#" class="like">like</a>
</article>
{block:Posts}

<iframe id="like-it"></iframe>

CSS:

#like-it {
    display: none;
}

.liked, .like:hover {
    color: red !important;
}