On my previous article about adding facebook share button on blogger, it features just how to add a simple share button style. In this article, I will explain how to add an elegant looking facebook share button to blogger courtesy of fbshare.me
Here's what the new facebook share button looks like:
Button Style Codes:
Facebook Share Button Large Floating Right:
<div style='float: right; margin-left: 1em'>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>
</div>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>
</div>
Facebook Share Button Large Floating Left:
<div style='float: left; margin-right: 1em'>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>
</div>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>
</div>
Facebook Share Button Small Floating Right:
<div style='float: right; margin-left: 1em'>
<script>var fbShare = {
size: 'small'
}</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>
</div>
<script>var fbShare = {
size: 'small'
}</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>
</div>
Facebook Share Button Small Floating Left:
<div style='float: left; margin-right: 1em'>
<script>var fbShare = {
size: 'small'
}</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>
</div>
<script>var fbShare = {
size: 'small'
}</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>
</div>
How to add on Blogger:
1. Follow this guide on How to edit the blogger template.
2. Choose one of the button styles above and copy it.
3. Find(CTRL+F) <data:post.body/>
4a. If you want to show the share button at the start of your post, add the code above <data:post.body/>
4b. If you want to show the share button below your blog post, add the code below <data:post.body/>
