Blogger reaction button

/
6 Comments
NOTE : I do not own this blogger reaction buttons. I only modify the code a little bit so that classic template users can use it. All credits is still to blogger.com, our best host for blogging.

Have you ever felt like wanting to have a reaction button like facebook's like button on your classic template, only it's a plain one and you can change the word LIKE into something else?

2 years ago blogger created this reaction buttons that can get you one click feedback from your readers. But unfortunately, blogger only created it for upgraded template ones, while classic template users can't have that kind of advantage. Since most of the bloggers i know is a classic template users, i decided to find that piece of code and modify it a little so that classic template users can use it as well as upgraded template users. Here is what the code looks like on upgraded template :

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

What i am going to do here is to take the iframe code from above, and add some margin and padding and a little bit of change for the font family. Here is the result :

<iframe style="margin-bottom: -4px; margin-top: -2px;" width="90" height="19" allowtransparency="true" class="reactions-iframe" name="reactions" src="http://www.blogger.com/blog-post-reactions.g?options=%5BLike%5D&textColor=%237f7f7f#<$BlogItemPermalinkURL$>" frameborder="0" scrolling="no"></iframe>

The code above will create something that look like this :



text in green is where you style your iframe. In this code above i set the margin bottom -4px and margin top -2px, while width i set it to 90px and height to 19px.
text in red is where you decide what word you wanna choose to put on your reaction button. You can change the word Like into something else like "I LIKE THIS!" (like Xiaxue's) or "useful" or others. You can also make it more than one reactions too like Blogger in Draft's blog!



All you have to do is to add coma (,) and plus (+) on every of your reaction word. For example you want to use the word "like", "very dislike", and "meh". Then all you have to do is write like this :

options=%5Blike,+very+dislike,+meh%5D&

And voila, that should do the trick. You can have reaction buttons now.

If you have any questions and problems with this reaction button, comment on this post :)
Happy blogging~


You may also like

6 comments:

  1. Omg awesome tutorial Susan :D Ahehehe, you know so much though :o

    ReplyDelete
  2. heehee curiosity kill the cat i guess :>

    ReplyDelete
  3. Hi Susan,
    After searching hard for a solution to change the colour of the text, I found your tutorial which works well at http://lastingrose.blogspot.co.uk/

    However the Vote count don't get registered and go up. Any idea how to get this right ?

    Many thanks
    Shred

    ReplyDelete
  4. After some search I discovered that the problem is <$BlogItemPermalinkUrl$> which doesn't resolve to a URL string, as a parameter needed.
    The string gets appended on your blog and also the official call on blogger expr:src='data:post.reactionsUrl'. the problem with this is that you can't inject a desired font color as it inherits from the link color.
    Somehow I can't get <$BlogItemPermalinkUrl$> to resolve in your suggestion.
    I have the two versions side by side for trial on my blog now.

    Appreciate any suggestion to change the font colour

    ReplyDelete
  5. thank you Susan. thank you so much. ^_^ love you. ehehe

    ReplyDelete
  6. Whoever you are, you're welcome! :"DDDD

    ReplyDelete