69 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.

69 Comments:

15 August 2008 11:58 Anurag Bansal said...

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

15 August 2008 11:59
Jumble Blogger said...

Thanks for the Tip....

15 August 2008 12:52 রাশেদ said...

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

15 August 2008 15:04 Typhoon said...

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

15 August 2008 15:51 huamulan03 said...

Thanks again, Amanda-san ^^

15 August 2008 18:26
nATE said...

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

nATE

15 August 2008 18:28 Chase Roper said...

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

16 August 2008 04:24 بطوط حبوب said...

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

16 August 2008 11:48
Daniel said...

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

16 August 2008 13:14 রাশেদ said...

@ بطوط حبوب...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. :(

16 August 2008 15:38 TRESTIN MEACHAM said...

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?

16 August 2008 15:57 Haykoliq said...

this is great...thanks!

16 August 2008 17:36 Joanna7777 said...

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!

17 August 2008 08:00 Kurt Avish said...

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

18 August 2008 09:37 Boffill said...

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


http://www.boffillbernardes.com

18 August 2008 17:40 Martin Kiš said...

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

19 August 2008 02:48 Tinh said...

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

19 August 2008 03:08 রাশেদ said...

@ 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.

21 August 2008 02:03 Rachel said...

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.

21 August 2008 23:56
postreach clickcomments said...

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!

26 August 2008 16:44 Bobby Ozuna said...

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!!!!

26 August 2008 17:32 Bobby Ozuna said...

Yep...it worked like a champ!!!

~Bobby Ozuna
Drawing Stories...With Words

27 August 2008 19:45 SOLOMONSYDELLE said...

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.

28 August 2008 16:05 Carmen/阿恩 said...

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

28 August 2008 19:30
Arif said...

Hi Amanda thank for much tutorials... heppy blongging

28 August 2008 21:16 Christine said...

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

29 August 2008 04:01 Alain-Christian said...

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.

7 September 2008 07:21 BuDakHutaN said...

i put it under
post-header-line-1

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

8 November 2008 12:20 SPK said...

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/

10 November 2008 23:39
Anonymous said...

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

3 December 2008 12:17 KALINAGO ENGLISH said...

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.

12 December 2008 17:27 Abhay said...

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

myviewbeta.blogspot.com

26 December 2008 21:02 ronald edwards said...

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

28 December 2008 07:29 sam said...

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

14 January 2009 06:32 Kit-Kitty said...

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/

16 January 2009 13:59 SLY said...

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

20 January 2009 00:42
Anonymous said...

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?

8 February 2009 11:24 Laptop Kid said...

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

Thanks

13 February 2009 21:38 skar said...

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

13 February 2009 23:40 Dataceptionist said...

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!

2 March 2009 10:32 Mon said...

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!

29 April 2009 13:20 Ta said...

Nice post. Thanks for sharing this blog.

24 May 2009 13:21 prabin said...

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

6 June 2009 12:33 Debor@h said...

Thank you so much!!!!

7 June 2009 10:36 Shariq said...

Not showing betterly

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

10 June 2009 08:55 Py said...

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

29 June 2009 00:47
Anonymous said...

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.

12 July 2009 17:54 Providence Blogger said...

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

12 July 2009 17:54 Providence Blogger said...

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

12 July 2009 17:55 Providence Blogger said...

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

12 July 2009 17:55
Anonymous said...

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

16 July 2009 13:59 Rosie said...

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

Cheers,
Rosie

11 August 2009 21:17 uoduckie said...

If you react can the poster see who is voting?

30 September 2009 16:10 Setsuna said...

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 ^^

2 October 2009 18:07 साधक said...

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

12 October 2009 00:25 NanyoArt said...

Thank you so much!

14 October 2009 04:02 Audre + Dimitri said...

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

11 November 2009 05:23 Sergio Jara said...

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/

1 December 2009 13:30 Julian Chin said...

Thanks a lot! At last I got it up!

18 December 2009 12:18 Haider Khan said...

Hi,,

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

25 January 2010 10:50 wenky said...

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

31 January 2010 02:21
Anonymous said...

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!

1 February 2010 16:56
Anonymous said...

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

4 March 2010 16:00 ClaireBee said...

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...

6 March 2010 07:18 Germán 兄弟 خِرمن said...

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

19 March 2010 18:21 Ani said...

Thanks! My reaction buttons are visible now

27 April 2010 08:38 christinahunt said...

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!

2 June 2010 16:14 Daily Joy said...

THANKS!!!!!! :)

Post a Comment

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