Adding Facebook Share Button on Blogger Platform

Thursday, November 6, 20140 comments

Independent Facebook Sharing button - Geeky JuanEver since Facebook came to the spotlight, sharing has become a daily activity made by every user in social networks. As important as every like, tweet or emailing of every content, sharing is also a feature that is very beneficial for a website, and because of the lack of tutorial I've seen using the available search engines, I've decided to come up with this guide on how to place an independent Facebook share button on every blog post.

To elaborate first the importance of the sharing button and how it is different from liking a post, here's a simple enlightenment. Liking a post will only appear temporarily on the news feed of your friends when they go online while in sharing, every time someone visits your profile, the visitor will get a chance on viewing the link you've shared in your social media account and at the same time, it'll appear on the news feed of your friends as well.

To continue with the purpose of this post, here are the few simple steps I made when I added the Facebook sharing button:

Step 1: Go to Template
Step 2: Click on "Edit HTML"
Step 3: Find the <data:post.body/> in your XML code
Step 4: Add this code above or below the line mentioned in step 3
<iframe allowTransparency='true' expr:src='&quot;http://w
ww.facebook.com/plugins/share_button.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/>
Step 5: Click Save Template

REMINDER: When doing the steps given, it comes to my attention that there are times that the <data:post.body/> sometimes show up more than once in the XML file, so just do a trial and error on finding the appropriate location to put the code.

If you encounter any problem, I'd be glad to help in the best way I can so just drop your comments and I'll return back to you immediately!
Share this article :

Post a Comment

 
Copyright © 2015. Storyahi - All Rights Reserved