I Know it hasn't been quite fair by blogspot for
not adding a facebook like button. but dont worry folks cause today I'm here to
help you all out. Just follow this short and easy tutorial. First we will learn
how to add facebook button to each post and then later we will add for the
whole blog.
Without anymore stupid intros let's start...
Lets add a Facebook like button for each post
First login to you blogger account and go to to Template then Edit HTML
Blogger Acount >> Template >> Edit HTML
Now Check "Expand Widget Templates"
press ctrl + f on your browser and search for <data:post.body/>
If you want the Like Button Above the post, paste the below code above <data:post.body/> and if you want it below, paste it below <data:post.body/>.
Paste This Code:
<div
style='float:right'>
<b:if
cond='data:post.isFirstPost'>
<script>(function(d){
var js, id =
'facebook-jssdk'; if (d.getElementById(id)) {return;}
js =
d.createElement('script'); js.id = id; js.async = true;
js.src =
"//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<fb:like
expr:href="data:post.canonicalUrl" layout='button_count' send='true' show_faces='false' font="arial" action="like" colorscheme="light"></fb:like>
</div>
The Button's design can be changed by changing the highlighted variables (not required):
I.
Change The Button type
a. Standard layout='standard'
b. Button Count layout='button_count'
c. Box Count layout='box_count'
II.
To Show Send Button
a. Show send='true'
b. Don't Show send='false'
III.
To Change Font
a. Arial font="arial"
b. Lucida Grande font="arial"
c. Tahoma font="tahoma "
d. Trebuchet MS font="trebuchent ms"
e. Verdana font="verdana"
IV.
To Change The Colour Scheme
a. Light colorscheme="light"
b. Dark colorscheme="dark"
If you are not an expert don't try to change
anything. Copy the above code just as it is
You Are Almost There...
Now find <html and change
only <html to <html
xmlns:fb="https://www.facebook.com/2008/fbml" and keep the
rest as same as it is.
Yes now click on Save Template and
voila you've done it.
Now Lets add a Facebook Like button for your blog
Go to Layout and select Add Gadget. Select HTML/JavaScript gadget and paste the following code
<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>
Now add the following code along with it.
<div
class="fb-like" data-href="$yourblogname.blogspot.com$" data-send="true" data-layout="button_count" data-width="200"
data-show-faces="true" data-font="verdana"></div>
Enter your domain name inside the quotes in href="$yourblogname.blogspot.com$" (don't type $) and you can change the highlighted codes the same way as it was mentioned above.
Save the gadget, give a title if you want, and place the gadget anywhere you like. Now people are able to like your posts as well as your blog in facebook.
So, I Hope It Was Helpful. I Will be updating this post frequently to make it easier to understand; as I see it is quite confusing.
No comments:
Post a Comment