How to Display Reaction Buttons On AMP HTML Blogs

One way to get feedback for blog posts is from the reaction button of the reader. And actually Blogger itself has provided feedback post facility with the reaction button for each blog post, but only a few bloggers who use it.

For whatever reason, many bloggers who do not take advantage of this blogger post feedback button. Could be the reason may be because it does not know it or maybe because it looks less attractive.

Well if you are interested to try the reaction button to find out how readers react to your post, please follow the way below. For DEMO please try the reaction button below this post.

This reaction button is for AMP HTML template users.

Please copy the code below and save it below your blog post in HTML edit.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='reaction-buttons'>
        <b:if cond='data:top.showReactions'>
          <span class='reactions-label'><data:top.reactionsLabel/></span><span class='reactions-iframe'><amp-iframe allowtransparency='' expr:src='data:post.reactionsUrl' frameborder='0' height='21' layout='fixed' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' scrolling='no' width='300'>
</amp-iframe></span>
        </b:if>
      </div>
</b:if>

And for the NON AMP blog please replace the amp-iframe code with HTML5 iframe.

Then to look neat, please add the CSS below in custom CSS for post view.

.reaction-buttons{margin:20px 0}
.reactions-label{margin-right:.7em}
.reactions-iframe{overflow:hidden}
.reactions-iframe amp-iframe{vertical-align:-5px;margin-left:-0.7em}

And make sure you have js amp-iframe installed for the post page.

Then please go to layout then click edit on Blog Posts gadget and please check for reaction.

And Good Luck....