Thumb up button goodness! 🙂👍
I used a free version of likebtn.com to add thumb up buttons to this blog. There's also a way to do this with Facebook Developer code, but I decided to try LikeBtn first.
I also had to fiddle with the Blogger HTML code to get the buttons where I wanted it. The LikeBtn site does have easy to follow instructions for adding them to your blog, but it puts the buttons as a widget/gadget. You can move it around some, but I wanted the buttons to appear just below the post content and also not duplicated on the homepage.
The issues with the buttons being on the homepage is because the button uses the name of the page to make it unique. So since all the blog posts are shown on the homepage, clicking one of the like buttons on the homepage will thumb them all up. That would also make the homepage buttons show different counts than the posts themselves.
So I wanted the like buttons to only appear after clicking a post.
To implement this:
- Go to https://likebtn.com
- Click Plugins from the top menu > choose Blogger
- Click the Add To Blogger button
- It should scroll you down to the middle of the page to an Installation section. Click Authenticate
- After logging in to Blogger (or if you were already logged into Blogger, it should have opened a tab with your Blogger dashboard), switch back to the Installation browser tab
- Click Generate the code
- Pick your options from the left pane
- Then copy the code from the panel on the right
If you don't want to mess with editing your blog's HTML, you can do steps 9-11 and stop. If you want to have the like buttons like this blog, skip to step 12:
- Switch back to the Installation browser tab and click Add to "Add Like button to Blogger"
- Make sure to choose the blog you want to add it to from the drop-down
- After doing this, it will add the code as a widget/gadget that can be found in the Blogger dashboard under Layout
- In your Blogger dashboard, click Theme > Edit HTML
- While in the editor, click anywhere in the code and press Ctrl-F to search (the search box is small and will appear at the top left of the editor window). Type post-footer-line-3 and press Enter to jump to that section.
- Starting just after the </b:if> line, paste the red and blue code snippets like it is below. The red code tells the browser to not display this code on the homepage, and the blue code is your LikeBtn code. The <br/> line breaks are optional; you can include them if you'd like more space around the like buttons like me or omit them for tighter formatting:
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation and data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<br/>
<!-- LikeBtn.com BEGIN -->
<span class='likebtn-wrapper'/>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!-- LikeBtn.com END -->
<br/>
</b:if>
</span>
</div>
<b:if cond='data:post.authorAboutMe'>
After the code is pasted, either click the eyeball icon at the top right to preview your changes in a new browser tab or click the Save icon at the top right to save your updates then open a new tab to view your blog to see if it looks correct.
