Hi friends, In this post we will learn how to insert
facebook like button in every Google Blogger Blog posts at the beigning and end.
Social networks have been playing an important role in Blogging for driving
traffic. Facebook is one the most liked social network among all the Internet
users. Facebook enables you to create a Fan page and share your content on it.
When a person like your facebook fan page, he/she subscribe to your content on
facebook. He / She will be getting updates from your fan page about your Blog
and they will visit you. Indeed it is an important source of referral traffic.
We all know the importance of traffic for Rankings.
Wordpress has many built-in plug-in that enables this
feature easily. But Google Blogger users have to do this manually by editing
their blog's template. It is not a difficult task and if you know a little bit
of HTML/XML then it takes a few minutes. You need to follow these steps in
order to make it happen:
- First of all, I recommend you to take backup of your current template so that you can avoid any loss.
- For backup, go to your Blogger dashboard. Click on template and then Backup/Restore on top-right side. Click on download full template and save it to your computer.
- Now that you have taken the back up, it is time to choose a facebook button. Visit Facebook Developers page, it will show like the one below:
- Enter the Facebook page URL and customize your like button style.
- If you don’t want the send button to appear with the like button, uncheck the send button from above form.
- When you are done with the customization, you need to click on get code. It would pop-up a window like this one:
- Now copy the code shown above, it is the JavaScript code you need to put in the <body></body> tag. Press CTRL+F to find <body> and paste this code just below it.
Update: Those who are unable to find the body tag like <body>, they should try to find it like this <body
- Now copy the second code, if you want to put facebook like button at the end of every post you need to find this code first <data:post.body/>, if it is more than once try finding the last one.
- Just after the last <data:post.body/> put the code you copied from facebook developer page.
- Click on preview and make sure that everything is fine before saving.
- Now click on Save Template and view any post. You will find facebook like at the end of every post.
- If you want to put the like button in the beigning of every post you need to follow the same procedure but put the second code after this line
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'> instead of <data:post.body/>. You can use both of them as well for displaying it in the beginning and ending of your Article.You may also like our All in one social network Widget.
You just inserted Facebook like button in your blogger blog
posts. If you face any problem, you can comment here. I will be Glad to help
you. I hope this will make your blogging experience better and help you getting
likes and traffic.
You may see other Blogging and SEO tips on Unziptech.
If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumble upon or giving us a link back via the links below. Stay tuned for more tech updates.
Do you like this post? Please link back to this article by copying one of the codes below.
URL: HTML link code: BB link code:
hi mine is not working
ReplyDeleteDid you placed the code at the right place and followed the whole procedure? Check it once again, you can see its working on my Blog.
DeleteThis is crazy... I Can´t find body in the new version of editing template on blogger.... Has it happened to anyone ?
ReplyDeleteWell there must be a body tag in your template..Use Ctrl+F to find body..
Deletesir is it still works , just like the comment above me there is no expand widget anymore...
ReplyDeletehttp://symbianizetech.blogspot.com/
Yes it works. Google has introduced its new Template editor, So there is no need to expand the widgets. You can simply find the code using CTRL+F..
DeleteIs 'body' the same as 'head' ? Because there's no body in my version of template
ReplyDeleteNo it is not the same..but body comes after the closing head tag..if you can't find it..take a backup of your template and email me xafar89[at]gmail[dot]com..i will try to find out the problem..
Deletei also did not find body in my template
Deletehi, what should i put as FB URL?
ReplyDeleteYou need to put your own Facebook Fan page link to get the like button from facebook developers..
DeletePlease the blogger template has been change, it is very different now and also confusing. help out please
ReplyDeleteTake a backup of your template and email me at admin[at]unziptech.com. i will check it.
DeleteIts not working for me sir..I just want to add "Follow me" option on my blog where you can connect to FB, Twitter, G+, RSS, Pinterest, Linkedin pages..Can you please help me with that.
ReplyDelete@Sunny
DeleteYes sure, take a backup of your blog template and send me at admin[at]unziptech.com. i will check your template so that i could get to know where is problem..A few of my online readers sent me their template backup and i added this button following the same procedure..
Hi Zafar,
ReplyDeleteI added the code but it doesn't appear anywhere. I need to have the facebook like just beneath the post title, is that possible?
@Hanis
DeleteYes it is possible to add this beneath the post title..i have got your email regarding the same..i will check your template..
This comment has been removed by a blog administrator.
ReplyDeleteOk, I swear that after the head, the code says:
ReplyDeletehead
body expr:class='"loading" + data:blog.mobileClass'
There is not a straight "body" tag. Where should I put it?
Yeah that's the body tag..in some templates its like < body > and in some templates its like the one you mentioned.. Put the code beneath it..
DeleteThis comment has been removed by the author.
ReplyDeletecant find the seconde code "data:post.blog"
ReplyDeletesomeone please help me
take a backup of your template and send me at admin[at]unziptech.com
DeleteHi, I tried to do this but could not find this code anywhere in my template code:
ReplyDeleteNot sure what is going on. Please can you help me. Thank you.
Arghh it didn't post, it is this code: < data : post . body /> but without the spaces.
ReplyDeleteYeah it is without spaces..i didn't put any spaces in between, check it again..
DeleteIt didn't work for me either, though I believe I put everything in the right place. Can I send you my code as well? Thank you.
ReplyDeleteYa you can send me your blog template backup at admin[at]unziptech.com..i will check it myself..
DeleteThis comment has been removed by the author.
ReplyDeleteThe button didnt work for me either neither does downloading my template to send to you for help. Instead i get this error message "The XML page cannot be displayed
ReplyDeleteCannot view XML input using XSL style sheet. Please correct the error and then click the Refresh button, or try again later.
--------------------------------------------------------------------------------
The operation completed successfully. Error processing resource 'file:///C:/Users/USER/Downloads/template-47904474477680020...
"
Please help
Hello Majovo, I put all tutorials after testing them myself so there must be problem with your procedure..you can see these facebook buttons on my blog for live demo..I would be glad to help you if you can send me your blog template so that i could check it and put the code at right place..
DeleteThanks so much for your time. I just sent the template from my email dafedafedafe to you. i would really appreciate your help. My blog url is http://jovoflavour.blogspot.com. Thank you.
ReplyDeleteHi.
ReplyDeleteThanks for this useful post.
But it doesn't work on my blog.
Help me please!
Yippeeeeeeeeee. Mine is working on my blog now. Thanks for helping out and editing my template. You are the best!
ReplyDeleteHello! Thanks for posting this! I am having trouble though. Do you paste the first code immediately after the word body or after the whole line: body expr:class='"loading" + data:blog.mobileClass'?
ReplyDeleteAlso, I do not have data:post.blog anywhere in my html. I have data:blog.metadescription a few times. Any help would be so appreciated!
Yeah you need to paste it after the complete body expr line..You must have in your template, If you don't have it please search it like data:post.body or post-header-line-1 or you can send me your blog back up i will check your template myself..send it on admin[at]unziptech.com
DeleteHi Zafar,
ReplyDeleteMy problem also is to find the body where to put the code. Can you please help me with this? Since there is no "Expand Widget Template" option anymore.
This is a good post, but for the life of me I can't get this to work. I have no idea why.
ReplyDeleteIf you follow the complete procedure mentioned above in the tutorial m sure that you will be able to add this FB button to your blog..if you r still getting trouble you can send me your template backup at admin[at]unziptech.com
Deletehi zafar
ReplyDeletei've been trying to put the like button on the end of each blog post but have had no joy. it seems you have already had a lot of requests for help but i was wondering if you would be able to help me too?
thanks!
ya sure..you can send me your blog template backup on my email id..
DeleteThanks for sharing. Very helpful
ReplyDeleteCan't get it to work, either :( Can I send you my template?
ReplyDeleteit would be helpful if you told people how to actually get to the HTML of their site.
ReplyDeleteI finally figured it out. You click on "Layout" and then next to the customize button it says "edit HTML"
Oh..I always write it in my tutorials..Might not have included this point..Thanks for mentioning it..
DeleteThank a Lot, It was very Helpful.. . . :)
ReplyDeleteThanks that you find my blog informative..keep visiting.. :)
Deleteauto share blogger post to fb fb page,twitter k bary mein bta dein.
ReplyDeleteFor Auto share on Twitter using feedburner check out this post
Deletehttp://www.unziptech.com/2013/04/enable-auto-tweet-using-feedburner.html
and you can connect your twitter account with facebook using the official twitter app and enable auto share on facebook via twitter..
I followed the whole procedure... But mine is not working...?
ReplyDeleteHellO!
ReplyDeleteI tried the procedure u mentioned, but nothing happend!!
can u please fix the issue!!
http://pinkytte.blogspot.in
here I have tried it!
@Bloomin Garden
ReplyDelete@ Lavanya
Please send me your blog template backup..I will check it out..
Thank you, It was very Helpful...............
ReplyDeletehttp://sqlneed.blogspot.com
i tried my best can u help me
ReplyDeleteDone all of the step but nothing appear on my blog... kindly assist with it... :'(
ReplyDelete@aadityan
ReplyDelete@Sarah
Please send me your template backup..
i can't find the body tag thing either :(
ReplyDeleteSeems Blogger applied a new HTML code in the templates mines different from before that's why I cant see it either.
ReplyDeleteI had trying this code at my blog but it didn't work http://stylesnblush.blogspot.in/
ReplyDeleteIt should work if you properly follow the instructions..I have placed this like button in hundreds of blogger templates and many of my readers have also added it..
Delete@ Nada Salah
ReplyDelete@ Dan Clerico
If you can not find the body tag, try searching for it this way <body
Every template has a body tag, there is nothing wrong with the new blogger HTML codes..
This comment has been removed by a blog administrator.
ReplyDeleteHi, the tutorial is very helpful, but I can't find the in my HTML, do you have any idea why is that and how can it be fixed?
ReplyDeleteThanks a lot!
There must be a body tag..search for the body tag like this <body
DeleteI have found the body tag and pasted the first code, but i don't know where to paste the second one because i can't find
Delete* sorry, I now realize I didn't say so in my first comment
I have the same problem, I can't find the second code.
DeleteThe Ctrl+F is not working in my html box.
Deleteiam searching this for a long time finally i got it check this http://leadsquote.com/
ReplyDeleteHi! Thanks for the tutorial! I have one problem, i get the like button on every post but it is connected to my entire site. So if i like one post all the buttons on all the posts change to "liked", have you ever encountered this problem before?:)
ReplyDeleteYes it is your facebook page like button..I will post a new tutorial which will work for individual posts..
DeleteDitto, I want to get individual page likes. Did you post that tutorial? Thanks for the help you provide.
DeleteDo we need to add a different like for every post. I tried the above method, but nothing shows up on my blog
ReplyDeleteNo, you don't need to add different like button, the above procedure will make the like button appear in every post..
Deletea big wow man cheer up
ReplyDeleteThanks Qamar, keep visiting :)
DeleteHi dude
ReplyDeleteYour Post was awesome it seems to be a good energy resource it fuu fills the thirsty related to this topic.
bro i wanna make my blog address look like this www.bigmoneybeat.com with out blogspot
ReplyDeleteHi Zafar,
ReplyDeleteI have a "problem" with the like button, and the motive I've writen it with quotes is that I put the like button in the end of every post, as usual, but now the LIKE BUTTON needs an absolute URL to the code (EX.: href="http://www.unziptech.com/"), but I want to put a button to the post itself (EX.: "http://www.unziptech.com/2013/04/insert-facebook-like-button-in-every.html").
I did some changes and teste some codes to try to put it to work, but 'till now I have no Idea how to do it.
I read somewhere to try it + window.location.href + inside an script, instead of put the absolute URL but the Like button just disapeared. I'm rly burning my brain out to do it here, and I apreciate if you have heard (or read) something to resolve this.
Thakyou for your attention in advance.
**EDIT: actually I did it with a simple change.
DeleteInstead of use this:
< div class="fb-like" data-href="href="http://www.unziptech.com/" data-width="250" data-show-faces="true" data-send="true">< /div>
(I used your blog url for Ex. only)
I used this:
< fb:like expr:href='data:post.url' width="250" colorscheme="dark" layout="button_count" show_faces="true" send="true">< /fb:like>
It seems to works fine on Blogger :D
I hope my efforts helps other people to solve that problem.
Thanks for the code..actually i am not getting much time to write a tutorial for the same..I appreciate your work..
Deletesir is it still works , just like the comment above me there is no expand widget anymore...
ReplyDeletehttp://rehanssoftwares.blogspot.com/
This tutorial still works 100% as there is no need to expand the widgets in the new blogger template editor..
DeleteI can't find :( I've tryed so many times
ReplyDelete-Sasha