Yesterday while chatting with a friend of mine, I have discovered that even today, some blogs lack this social plugin. When I questioned him that why, he answered me that he didn't know how to add it. So I promised to write a tutorial for him. Recently Facebook has combined both its like and send buttons into a single plugin, making it more easy for webmasters to add both the buttons with a single three lines code. Further more, this code also has an easy option to easily remove the send button by a little editing. Now lets learn to add this beautiful plugin to blogger.Add The Plugin To Blogger
It depends on where you would like to add the plugin. If you want to add it as a widget to the sidebar, footer etc then follow the tutorial below,
- Go To Blogger > Layout > Add a Gadget
- Select HTML/javascript
- Now add the following code,
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="450" show_faces="false" font=""></fb:like>
- If you wish to hide the send button then set replace send="true" with send="false".
If you want to add the plugin below or above your posts, then follow the tutorial below,
- Go To Blogger > Template > Edit HTML
- Backup your template
- Check
- Search for <data:post.body/>
- If you wish to add the plugin below the post titles then add this code above <data:post.body/> and if you wish to add the plugin at the end of your posts then add this code below <data:post.body/>.
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="450" show_faces="false" font=""></fb:like>
- If you wish to hide the send button then set replace send="true" with send="false".
6. Hit save and you are done!
Troubleshooting
If in case this plugin isn't working then add the following code right below the <body> tag,<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
I have written this post in great hurry so if any mistakes are there, then please ignore. If you are facing any problem in the installation or need help customizing the plugin, then please do not hesitate to ask. :)
No comments:
Post a Comment