Add facebook like, send, share button to blogger posts
Facebook isa fashionable social networking website which supply lots of traffic to websites or blogs You can also use the tecnic
into your blog by adding facebook widgets in your blog. In this post we will talk
about how to add facebook buttons to blogger posts. We will learn how to
add facebook buttons for example (share
, like and send button) at different positions in blogger posts. You can add
these facebook buttons to your blog according to your necessity.
Function
of Facebook share button - The Share button allows people to add a modified message to sharing on
their wall, timeline, or to their friends via a Facebook Message.
Function
of Facebook send button - The Send button allows people send content on your site to one or more
friends in a Facebook message.
Function
of Facebook like button - The Like button is the easy and quickest way for public to share
content with their friends.
Add facebook like button below blogger posts
Note: In each
blogger template <data:post.body/> has more than one incidences. If the
following technique does not work with the first <data:post.body/> then attempt
the same technique with next <data:post.body/> and so on.
Step 1: Login to your blogger the go to dashboard.
Step 2: In
the template option Click on Edit HTML.
Step 3: In
the template code find
<data:post.body/> by using CTRL+F
Step 4: Paste
following code just below <data:post.body/>
and save the template.
<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>
<div
style='margin-bottom:20px' class="fb-like"
data-layout="standard"
data-action="like"
data-show-faces="false"
data-share="false"></div>
Modify Like
button = Alter value of data-share=”false” to
data-share=”true” to show both like and share
buttons.
Add Facebook like button below posts titles in blogger
Step 1: In
the template HTML code section find <data:post.body/> by using CTRL+F
Step 2:
Paste following code just above <data:post.body/> and save the template.
<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>
<div
style='margin-bottom:20px' class="fb-like"
data-layout="standard"
data-action="like"
data-show-faces="false" data-share="false"></div>
Add Facebook share button below blogger posts
Step 1: Select
Template option and Click on Edit HTML option.
Step 2: In
the template code find <data:post.body/>
Step 2:
Paste following code just below it and save the template.
<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>
<div
style='margin-bottom:20px' class="fb-share-button"
data-type="button_count"></div>
Add Facebook share button below post titles
<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>
<div
style='margin-bottom:20px' class="fb-share-button"
data-type="button_count"></div>
Add
Facebook send button below blogger posts
Step 1: Open
your blogger dashboard and select your blog.
Step 2: In
the template option and click on Edit HTML option.
Step 3: find
<data:post.body/> by using CTRL+F
Step 4:
Paste following code just below <data:post.body/> and save the template.
<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>
<div style='margin-bottom:20px;'
class="fb-send" data-colorscheme="light"></div>
Add facebook send button below post titles
Step 1: In
your Template HTML code section find <data:post.body/> by using CTRL+F
Step 2: Paste
following code just above <data:post.body/> and save the template.
<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>
<div
style='margin-bottom:20px;' class="fb-send"
data-colorscheme="light"></div>
Then save
your template, that’s all. Share this post and reply your comments below in
addition to get more updates from us subscribe to our RSS feeds.