How to Add Facebook Like Button to Each Individual Blogger Post
If you are using the template provided by blogger then to get facebook like box you want just following steps and code. The snippet you want is:
"<div class='post-header-line-1'>"
(without double commas)
Now place the above code immediately below that code.
Thats it you are done.This works for me.If you feel any difficulty then feel free to tell me about your experience by dropping your comments.
<iframe
allowTransparency='true'
frameborder='0'
scrolling='no'
expr:src='"http://www.facebook.com/plugins/like.php?href="
+ data:post.url
+ "&layout=standard&show_faces=true&"
+ "width=530&height=60&action=like&"
+ "colorscheme=light"'
style='border:none; overflow:hidden; width:530px; height:60px'/>
The "expr:src" tells the engine to interpret the XML attribute as an expression. The single quotes allow you to nest double quotes inside. The quoted sections are the parts that won't change, and the "data:post.url" is replaced with the fixed url for the given post.
As to where to put it, that really depends on your intention and current blogger template. In general, though, you need to edit your HTML template:
Layout Tab -> Edit HTML
Warning! Manually editing your template can hose your entire blog if done wrong. Be sure to back it up (instructions are on the Edit HTML page), and don't blame anyone but yourself if you mess it up!
In the edit box, search for "<b:includable id='post' var='post'>". That is the beginning of the post template. You should be able to make out the various parts of the post (comments, edit button, title, etc.) Try pasting the above snippet in various areas and then pressing the "Preview" button. (This lets you try it before you "buy" it ;) If you get a working "Like" button on each post, you are done!
Good Luck!
UPDATE 1 - No Line Breaks
In case you have issues, here is the version with all the clarifying formatting removed and no line breaks:
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=true&width=530&height=60&action=like&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>
Note: When you paste this into the HTML editor, ensure that the snippet begins with "<iframe" and not "<iframe". The snippet had to be escaped in order to display correctly in the HTML of this blog, but you need the real deal.
In addition, if you are using the blogger in draft template designer, be aware that there are some HTML editor errors that occur under certain conditions. If you are getting a mysterious error code, try switching to the draft HTML editor. (while on the Edit HTML page, replace "www" in the address bar with "draft") I had to change some attributes from having the value "" to having " " (a space) in order to work.
UPDATE 2 - String escapes
As reported by some readers, the previous drafts of this post were not correctly formatted. Inside the expr:src quoted strings, you need "&" instead of "&". The above examples have been updated to allow for direct copy and paste.
Other Method:
In this blog i tried the above code and each step correctly but i did not get any result then i search it on internet and come to know that the above step is only applicable to blogger templates but i am usibg third party template on this blog so is that mean i will not be able to use the above method??
As we all know the default templates of Blogger are not too impressive.Thats why most of the bloggers use third party templates.For third party templates the code is same as abovee but the place where we are going to paste is different in third party Templaes search for following code in your browser by pressing CTRL+F
(without double commas)
Now place the above code immediately below that code.
Thats it you are done.This works for me.If you feel any difficulty then feel free to tell me about your experience by dropping your comments.
Tags: Bloggers
Previous Article
Subscribe to:
Post Comments (Atom)
Share your views...
0 Respones to "How to Add Facebook Like Button to Each Individual Blogger Post"
Post a Comment