128 Blogger's New "Reactions" Feature - How to add to customized blog templates

Blogger have added a new feature for us to use in our post: Reactions. This widget acts like a mini-poll beneath each of your blog posts and offers the ability for readers to leave feedback quickly.
The "Reactions" add-on is currently available through Blogger in Draft, though looks set to be moved over to the regular Blogger interface soon enough. It can be moved around like other elements in the post-footer and will adapt to the color scheme of your blog template. You can customize the buttons and labels through the "Blog Posts" widget in your dashboard if you prefer to use something different to the "funny/interesting/cool" labels which are implemented by default.

How to add "Reactions" to your Blogger template

To add this new function to your Blogger layout, you will need to activate the feature through Blogger in Draft. Once logged in to your Draft dashboard, go to Layout>Page Elements and click the "Edit" link for the "Blog Posts" widget. In this pop-up window, you will see the option to add "Reactions" to your posts:
Tick the options box and edit the labels for your buttons as required. Then finally save this setting.

Adding the required code to your template

Depending on the type of template you are using, you will need to use one of two methods to add the required code to your template. If you are using a default Blogger template with no modifications to widgets or the post layout... Go to the Layout>Edit HTML page in your Blogger dashboard, and look for the "Revert Widget Templates to Default" link near the bottom of the page. Clicking on this link will replace all of the widget templates with the updated code. All of your existing widgets will remain, so don't worry about losing any data! Instead, this will simply replace outdated code with new code, and ensure you can add all of Blogger's new features with ease. If you use a customized/third party template... You will need to add the required code to your template manually. In this case, go to Layout>Edit HTML in your Blogger dashboard and check the "Expand widget templates" box. Next, search for the following line of code (or similar):
<p class='post-footer-line post-footer-line-1'>
Immediately after this line, add the following section of code:
<span class='reaction-buttons'> <b:if cond='data:top.showReactions'> <table border='0' cellpadding='0' width='100%'><tr> <td valign='center'><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>
Preview your template to see the "Reactions" add-on appear beneath each of your blog posts, and finally, save this new addition to your template. If you cannot find the "post-footer-line" in your blog template, search for <p><data:post.body/></p> instead, and paste the code immediately after this line.

Color Schemes for the Reactions Add-on

The colors for the reactions add-on are taken from existing variables in your color scheme:
  • Foreground: textcolor, textColor, mainTextColor
  • Highlight: linkcolor, linkColor, mainLinkColor
This is to ensure that the color matches the overall scheme of your blog. So if you change the color scheme through the Fonts and Colors section, the colors of your reactions will change too. To learn more about this new feature, be sure to read the announcement post on Blogger in Draft. Please let me know if there's anything else you need to know about this new feature by leaving your comments below.

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

128 comments:

  1. Hi Amanda,
    You get insider intel or what??
    Blogger in draft just added this feature and you even blogged a howto for that.
    That is called 'AWESOME'

    Go get some sleep too....Don't work so hard.

    Cheers
    Anurag Bansal
    http://www.knowliz.com

    ReplyDelete
  2. Jumble Blogger15 August 2008 11:59

    Thanks for the Tip....

    ReplyDelete
  3. Thanks a lot. I had no idea about this feature. :D

    ReplyDelete
  4. Thanks Amanda!I posted this post giving u the credits on my blog.hav a look

    http://templatestreasure.blogspot.com/2008/08/bloggers-new-reactions-feature-how-to.html

    ReplyDelete
  5. mine does not look good in IE. any thought about how i can adjust it?
    great post like always..

    nATE

    ReplyDelete
  6. You know what cracks me up? I find out about these new features from you, before I ever find from my blogger dashboard.

    ReplyDelete
  7. i don't know how to thank u
    thank u very much
    u r the best
    but, this new features allow my visitors to select multiple answers
    i want to obligate them to choosse only one but i don't know how??
    may i ask u to help me to find a solution for this??

    Batoot

    ReplyDelete
  8. I've noticed a major problem. The numbers are not going up at all. ie: even if I use different browsers and different ip's through proxies.

    Anyone noticed the same or is it just me, or you may suggest something to fix the problem

    ReplyDelete
  9. @ بطوط حبوب...To add this new function to your Blogger layout, you will need to activate the feature through Blogger in Draft. Once logged in to your Draft dashboard, go to Layout>Page Elements and click the "Edit" link for the "Blog Posts" widget.

    In this pop-up window, you will see the option to add "Reactions" to your posts:
    ---

    Here, if u click Edit, u can delete and write ur own reactions, just separate them with comma.


    --------------------

    @ Daniel...I found that I can click all of them. Not sure about incrising of value though. :(

    ReplyDelete
  10. As always I am getting a error code when I try to add html:

    bX-lilymr

    Is my template just not compatable to html alterations?

    ReplyDelete
  11. You lied that nothing will happend if you click on Revert Widget Templates to Default.Do you know how much time it coast to make my template?Now its ruined!Coz of you!Now I need to do all I did again!So hard work and now...
    ...;-C
    It's all ruined!

    ReplyDelete
  12. Cool blog buddy!! ALready bookmark your's. Do drop by mine at http://islandcrisis.blogspot.com

    ReplyDelete
  13. you are really good.. that's the reason why i recommend you to some of my blogger friends! Thanks!


    http://www.boffillbernardes.com

    ReplyDelete
  14. Hi Amanda, I want to ask if it is possible to do this two tweaks with reactions:

    1.tweak html so reactions will appear only when post is expanded (with Whats next and Comments), never on a landing page. Reader sometimes dont know at landing page if something is "cool" or "boring".. Could it be possible for you to tweak this feature to appear like this?

    2.if not, then how it will be possible to change settings of color scheme to make Reactions look different from theme settings. If i "must" have it on a landing page than i would prefer to use different colors to put it more to background of theme.

    Thanks for answers and keep going, youre great with blogger platform

    ReplyDelete
  15. I saw this on the element section, thanks for the update. Tinh

    ReplyDelete
  16. @ Martin... 1. It's possible. Look for the code div class='post-body' expr:id='"post-" + data:post.id'

    b:if cond='data:blog.pageType == "item"'

    style #fullpost{display:inline;}/style
    p data:post.body/ /p

    and add the code given by Amanda below it.

    ReplyDelete
  17. There are a few UI problems, especially in IE, that will be fixed soon. I mean, um, will probably be fixed soon. ;)

    Reactions are designed to not be mutually exclusive, however -- there is NOT a way to limit readers to click only one.

    ReplyDelete
  18. postreach clickcomments21 August 2008 23:56

    Hi Amanda, This feature looks like our postreach clickcomments services. Instead of just text we have stylish icons. And in addition to the comments we recommend other posts from the same blog that have received the same comment that the user just clicked. IE: If you clicked on 'insightful' it recommends other posts on that blog that are insightful. Please check it out at www.postreach.com
    Thanks!

    ReplyDelete
  19. Thanks for the tip...I will share your post and this little "reactions" addition to my subscribers so they can update and pick their favorite posts...
    Thanks for the info!!!!

    ReplyDelete
  20. Hey Amanda, thanks for the heads up on this new function. I tried it but it didn't quite work. I found the following code "p class='comment-footer'" and added the script you supplied right afterwards. Not sure if you have received any similar requests for help, but, HELP!!

    Take care.

    ReplyDelete
  21. Hey Amanda :D! Thank you for this awesome tip :] It worked nicely. But.. the border for the bottom of the reactions aren't showing.

    ReplyDelete
  22. Hi Amanda thank for much tutorials... heppy blongging

    ReplyDelete
  23. Thanks for the instructions to add this feature. It appears after each post on my blog, but is not keeping track of the # of reactions.
    I saw another comment about this above...is there a way to fix it or am I missing something here?

    www.randomchilee.blogspot.com

    ReplyDelete
  24. Strangely on IE7 this post was all kinds of messed up. Well anyway, this thing is buggy. You can click on ALL the reactions without penalty.

    ReplyDelete
  25. i put it under
    post-header-line-1

    and it works well.. and placed under my post title.. thans amanda :)

    ReplyDelete
  26. I see that it's been added to real blogger now. However, I can't get it to work. :-(

    I tried changing to one of the standard templates and it still didn't work. Any ideas?

    This is me http://clickjack.blogspot.com/

    ReplyDelete
  27. You are true with your quote amanda, you are making me build a better blog

    ReplyDelete
  28. Thanks so much! I was going nuts trying to get this work and tried every which way and that and then got kicked over here by accident. Am so pleased ;-) and will subscribe to your blog.

    ReplyDelete
  29. Thanks dude for that amazing and easy tutorial...That really helped me in a custom template.
    YOU ROCK.

    myviewbeta.blogspot.com

    ReplyDelete
  30. Like one of early posters,get well formed error everytime i try to add code to edit html.Help please?It's a blogger blog.





    RONVUE.COM

    ReplyDelete
  31. namaste amanda,nice posting,I want to add two new independant widget sections one beloe other on right side in my bloogger template.plase reply how to do that

    ReplyDelete
  32. Thanks Amanda! I have been trying to get this to work since the day it came out, I added the given code and it fixed it right away! Have a look if you want!
    http://pendragonsart.blogspot.com/

    ReplyDelete
  33. thank u! i've been worrying about this reaction thingy when i changed my template into a 3rd party template! :D

    ReplyDelete
  34. It's installed and works and everything but it won't SAVE the counts or increase the counts.

    What good is it if it doesn't work?

    ReplyDelete
  35. in picture above its show the checkbox "Show Star Ratings" can you tell me how to add that future.

    Thanks

    ReplyDelete
  36. man, I get the tick boxes, but the names don't appear, there's no cool or funny etc :( why?

    ReplyDelete
  37. thanks so much Amanda you're the best! I've been trying to figure out how to add this without losing my customisation. You're a lifesaver!

    ReplyDelete
  38. I have a 3rd party template and I cannot change my color scheme so that the reaction links show up. They are black and I can't find anything in my html that indicates black (my links are white). Is there any way to custmise the font for the reactions only?

    Love your blog!

    ReplyDelete
  39. Nice post. Thanks for sharing this blog.

    ReplyDelete
  40. how to manage three column templete?? i have added three column templete but i got problem in posting new post i did not find from where to go in add new
    post

    ReplyDelete
  41. Not showing betterly

    please check the problem at www.linkextreme.blogspot.com
    Please reply to me there only.

    ReplyDelete
  42. Thank A lot, i was searching for it and i got it from your blog.

    Please Visit: http://www.py4php.blogspot.com

    Please Visit: http://www.piyushsaraf.com

    ReplyDelete
  43. Shame this feature doesnt work on your own template at ThemeForest called 'Planet Play'.
    Maybe if you supported your products I wouldn't have posted this comment here.

    ReplyDelete
  44. I want to change the color of the Funny, Interesting,Cool, it's a gray color :( The Reaction word it's in white which is good, but the rest it's gray. Can you please help me, I want to have white color all of the words.

    Thank you for your help.

    You can check it out: www.providenceblogger.com

    ReplyDelete
  45. I want to change the color of the Funny, Interesting,Cool, it's a gray color :( The Reaction word it's in white which is good, but the rest it's gray. Can you please help me, I want to have white color all of the words.

    Thank you for your help.

    You can check it out: www.providenceblogger.com

    ReplyDelete
  46. I want to change the color of the Funny, Interesting,Cool, it's a gray color :( The Reaction word it's in white which is good, but the rest it's gray. Can you please help me, I want to have white color all of the words.

    Thank you for your help.

    You can check it out: www.providenceblogger.com

    ReplyDelete
  47. I want to change the color of the Funny, Interesting,Cool, it's a gray color :( The Reaction word it's in white which is good, but the rest it's gray. Can you please help me, I want to have white color all of the words.

    Thank you for your help.

    You can check it out: www.providenceblogger.com

    ReplyDelete
  48. Hi Amanda... d'you know if there's an equivalent for wordpress blogs?

    Cheers,
    Rosie

    ReplyDelete
  49. If you react can the poster see who is voting?

    ReplyDelete
  50. Hey Amanda, thanks for the sharing!

    I have a question... hopefully it's not too stupid.

    When a reader has selected a reaction. How can I as the adm. receive a notification.

    Is there any place I can have an overview over different reactions the readers has given to my posts?

    Thank you, and looking forward for your reply ^^

    ReplyDelete
  51. For me works with IE but Does not work with Chrome and Firefox

    ReplyDelete
  52. Really great help. Thanks
    from http://travelingloveaffair.blogspot.com

    ReplyDelete
  53. My Reactions widget posts automatically, just not completely. I tried the link provided, but it simply doubles the incomplete contents of the widget. Two reactions to be exact. There are three missing. Anyone run into this? New to all of this... I'm at http://iloveserge.blogspot.com/

    ReplyDelete
  54. Thanks a lot! At last I got it up!

    ReplyDelete
  55. Hi,,

    The reactions are not updating (the only get updated once - stuck at 1)

    ReplyDelete
  56. friend..i cannot install the reactions widget to my blog.. www.ebooklinks.tk ..Plz help how to add the reactions widget to blog

    ReplyDelete
  57. thanks a lot, now it works on my customized template!
    BUT: it won't show all of my options, since the width of my posting sections seems not to be wide enough.
    is it possible, that the options are displayed in two lines (line break)? that would be great!

    ReplyDelete
  58. did my question come through? (bout multi-lined reaction options)

    ReplyDelete
  59. thanks so much for this! I've been trying to work out how to make this feature work for god knows how long and all I had to do was "look for the "Revert Widget Templates to Default" link". I never would have found that without this post - it isn't in the blogger help...

    ReplyDelete
  60. I have a third party template and

    p class='post-footer-line post-footer-line-1'

    is nowhere to be found. Where should I add the rest of the code then?
    http://nureinwort.blogspot.com

    ReplyDelete
  61. Thanks! My reaction buttons are visible now

    ReplyDelete
  62. I have a question.. I got the reactions tab but i can only place there 6 reactions. the 7th goes to the next line and it cant be seen anymore. Do you have an idea how I can fix this? Do check my blog so you can see what I mean.. www.christinaahunt.blogspot.com
    Thanks!

    ReplyDelete
  63. Hey. Your write-up is just what I wanted. Great job. Thanks so much.

    ReplyDelete
  64. Here is a new twist on the invisible Reaction buttons problem: I thought this discovery might interest you and help others. I've been struggling to get the Reactions gadget to show the actual buttons to click.

    I had everything set up in the template but the result would only show the label "Reactions" and none of the buttons. I tried the fixes described in your column many moons ago. I even switched templates two or three times on the theory that there was something going on in the code that was beyond my ken. Nothing worked.

    Finally, by inspiration or whim, I called up a different browser and viola: buttons were revealed. I had been using Opera for all my work but the buttons are invisible and unclickable in Opera. They magically appear when using Chrome, Firefox, and Internet Explorer. I don't have Safari so don't know the situation for that browser.

    Using the Stats function, I checked the identity of the browsers being used for the pageviews of my blog. 20% of the views are done using Opera and the buttons are therefore invisible to a lot of my readers/viewers.

    I have no idea what, if anything, can be done about this, and why it is happening. I "see" everything else on the blog with all the browsers so far as I can tell. But at least if your community knows about it, hours of frustration could be avoided for those who have been or may be using Opera while editing their blog templates.
    Cheers!

    ReplyDelete
  65. Yay,I was a bit afraid regarding "revert to default widget" but I tookna chance and finally got the reactions! I am now editing them to blend in with my blog http://thebeginningofmytimeline.blogspot.com/

    ReplyDelete
  66. Very nice... but is there some way to generate a link to view posts by which reactions are clicked?

    For example, BuzzFeed has reactions like LOL, OMG, Trashy, etc. and you can actually view other posts that fit that category.

    Would be nice if there was something like:

    http://myblog.blogspot.com/search/reactions/omg

    ReplyDelete
  67. This was indeed a useful article and I could just easily change the Reactions settings. In fact, I searched for that option for a few minutes. Thanks...

    ReplyDelete
  68. thanks a lot!!! that was extremely helpful :)

    ReplyDelete
  69. Oh it worked perfectly, thanks sooooooo much!!! ;0D

    ReplyDelete
  70. Thanks so much! Worked a treat!

    ReplyDelete
  71. A quality set of two pearl or perhaps diamond stud pandora earrings is mostly a classic and also romantic reward. A very simple pendant on the chain is actually surely a vital as is often a quality wristwatch. Then again, no lovely women requirements not pandora uk one but two of any kind of basic item; just being aware of what she needs pandora charms is definitely what makes the treasure especially innovative and emotional. Examine the woman's personal design. pandora necklace If the girl wears bohemian shirts with worn-in denims, pandora jewellery consider some, funky beaded necklace around your neck or a new color bracelet.

    ReplyDelete
  72. hey there. can we know WHO ticked on the reaction boxes? I'd love to know who read and love my blog entry.

    ReplyDelete
  73. SunLover. You need to remove the <table>, <td>, <tr> tags. Then, in Opera and other browsers will display Reaction buttuns in Blogger.

    In my blog describes how to do it, but in Russian.

    http://dperexvatov.blogspot.com/2011/01/reaction-buttons-opera-blogger.html


    working code:
    <data:top.reactionsLabel/>
    <iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no' style='height:30pt'/>

    Good luck!!!

    ReplyDelete
  74. hi..how can i check who has reacted to my post? Thanks.

    ReplyDelete
  75. My reactions box is showing above the comments and 'posted by' -- how do I get it below? On the edits page it shows that it's below, but on my actual blog it's not....

    ReplyDelete
  76. How do I remove the word "reactions:"? I just wanna leave it blank but didnt succeed. Any idea/suggestion? Thank you. :)

    imsydney.blogspot.com

    ReplyDelete
  77. I mean, I just want the button, not the explanation. :)

    ReplyDelete
  78. hey ,,the reaction is workin but due to my template the words are not clear..can u help me change the font color,,:)
    thank u :D

    ReplyDelete
  79. Thank you for the post How to add "Reactions" to your Blogger template.

    ReplyDelete
  80. thank you very much for the owner..it's so helpful..=)

    ReplyDelete
  81. thanks u are awesome!

    ReplyDelete
  82. The "Revert Widget Templates to Default" worked. Thank you!

    ReplyDelete
  83. Hi!

    I'm having a really hard time trying to activate the reactions on my blog, being that the lines I find look like these:

    .post-footer {
    margin: 1.5em 0 0;
    }

    Not any of the ways I've found has worked out. Here's the link to my blog, could you help me?

    http://www.sethriellequaint.com.ar/

    Thank you!

    ReplyDelete
  84. is there a way to know who reacted on your blog ?
    http://milindblog-hobee.blogspot.com/

    ReplyDelete
  85. Even before I change a simple link color,
    I download the template before hand, then all I have to do is upload it to the original...
    But i still cannot get the reactions to work either i bet it"s my color scheme.
    Go to Design, Edit HTML ,Directly under that you will see Backup / Restore Template.
    Download the template to a folder called template to your desktop.
    On the flip side if you want to upload your original template after redesigning your site, simply go to browse find your template in your template folder on your desktop and upload it,takes a few minutes and poof there ya go.
    http://bostonhockeynews.blogspot.com

    ReplyDelete
  86. People: I just solved it by going to the edit template part in Design, and clicking in the option that restores pre established widget values. You won't lose your widgets but it will get the reactions to work, and also the star rate.

    ReplyDelete
  87. Thanks Sethrielle, Worked for me!

    ReplyDelete
  88. Does anyone know if it is possible to hide the reactions for an individual post but not all the others? I want some posts to have it and some to not.

    Thanks.

    ReplyDelete
  89. Cheers Sethrielle, workes fine for me too!

    ReplyDelete
  90. I have been using Blogger for quite some time and had never been aware of this feature. Thanks for this post

    ReplyDelete
  91. HTML code is not my favorite but this feature is great. ipad for cheap| kindle for kid Thanks

    ReplyDelete
  92. Very interesting article. I Just though that you really know your topic very well to write this. Many of the benefits we derive from this topic. Thank you for sharing.

    ReplyDelete
  93. Thanks see this link

    http://sreesabarisan.blogspot.com

    thanks

    ReplyDelete
  94. God bless you! AT LAST I get it to work!

    ReplyDelete
  95. nice article

    http://internetricks4u.blogspot.com/

    ReplyDelete
  96. You're such a gifted article writer, I've read several articles written about this subject and none came close to yours. Keep them coming!

    ReplyDelete
  97. just the info I needed!
    thanks for posting this!

    ReplyDelete
  98. just the info I needed!

    ReplyDelete
  99. Thanks a lot for the tip! I was looking for it everywhere!!

    ReplyDelete
  100. if you have Messenger still running, you will be prompted to close it during this part of the process. Once the status bar is full, your MSN Messenger has been updated. Restart your computer to complete the process. Thanks a lot.
    Regards,

    ReplyDelete
  101. Hollister Brooks Beach Down Vests Blue. This is a very gentle product, and is a great choice for curly haired children as well.


    Article Source: http://www.cheap-abercrombie-fitch.org/

    ReplyDelete
  102. Anybody know how to make the reaction titles(funny,interesting,cool...) in bold font,they are barely visible even when I capitalize them.Thanks!

    ReplyDelete
  103. Dear Amanda,
    thank you very much!

    This article helped me a lot!

    Thanks to you, now my site (www.mypress-release.biz) is better!

    Best regards,
    Ash.

    ReplyDelete
  104. Learn Quran - Learn quran online at home and quran learning with tajweed. Read Quran learning classes for kids, muslims from online quran tutor.

    ReplyDelete
  105. This year for many teams will be all about the new coach.There will be nine teams heading into the 2008-2009 campaign with different coaches from the year before; including four who have never coached in the "big show" before.Toronto, Colorado, Los Angeles, .Cheap Jerseys Free Shipping|

    ReplyDelete
  106. It's very informative and helpful. Excellent post and wonderful blog.thanks for a great blog!

    ReplyDelete
  107. Can we see who ticked the reaction box? If yes, how?
    http://swati2610.blogspot.in/

    ReplyDelete
  108. Thanks Amanda!I posted this post giving u the credits on my blog.hav a look...

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy