Friday, 21 August 2015
Adding FB-Like Button to your Post on Blogger
How To Add A Facebook Like Button to
Blogger Posts
How to add a Facebook "Like" button
to your Blogger posts!
November 20, 2013 • Blogger, Social
Media
Ah, yes, social media. It’s always
important to provide your readers
with easy access to share and like
your content. In this post I will
teach you how to easily add one of
Facebook’s ever-so-popular “Like”
buttons to each post on your Blogger
blog. It’s really easy, follow along
below:
1. Go to your Blogger dashboard
2. Click on Template in the sidebar,
then Edit HTML
3. Click inside of the text area and
press CTRL + F (or CMD + F on a Mac)
to open up the “Find” text box.
4. Inside the “find” box in the top
right corner of the text area, enter
this code and press enter TWICE. You
want to work with the second instance
of it:
<data:post.body/>
This code acts like the placeholder
for all of your post content.
If you want to add your Like button
to the top of your posts, add one of
the following Facebook codes ABOVE
this code. If you want the Like
button on the bottom of your posts,
add it UNDER this code.
facebook-like
Copy this Facebook button code below
for a Horizontal count style:
<br/><br/><iframe
allowTransparency='true'
expr:src='"http://www.facebook.c
om/plugins/like.php?href=" +
data:post.canonicalUrl +
"&layout=button_count&sh
ow_faces=false&width=100&acti
on=like&font=arial&colorschem
e=light"' frameborder='0'
scrolling='no' style='border:none;
overflow:hidden; width:100px;
height:21px;'/>
Or, copy this code for a Vertical
count style:
<br/><br/><iframe
allowTransparency='true'
expr:src='"http://www.facebook.c
om/plugins/like.php?href=" +
data:post.canonicalUrl +
"&layout=box_count&show_
faces=false&width=100&action=
like&font=arial&colorscheme=l
ight"' frameborder='0'
scrolling='no' style='border:none;
overflow:hidden; width:55px;
height:62px;'/>
If you prefer it without the count,
use this Standard code:
<br/><br/><iframe
allowTransparency='true'
expr:src='"http://www.facebook.c
om/plugins/like.php?href=" +
data:post.canonicalUrl +
"&layout=standard&show_f
aces=false&width=100&action=l
ike&font=arial&colorscheme=li
ght"' frameborder='0'
scrolling='no' style='border:none;
overflow:hidden; width:450px;
height:35px;'/>
Give it a try! As always, feedback is
welcome below! You can also submit a
topic suggestion through the Contact
page at the top of the site!
How To Add A Facebook Like Button to
Blogger Posts
How to add a Facebook "Like" button
to your Blogger posts!
November 20, 2013 • Blogger, Social
Media
Ah, yes, social media. It’s always
important to provide your readers
with easy access to share and like
your content. In this post I will
teach you how to easily add one of
Facebook’s ever-so-popular “Like”
buttons to each post on your Blogger
blog. It’s really easy, follow along
below:
1. Go to your Blogger dashboard
2. Click on Template in the sidebar,
then Edit HTML
3. Click inside of the text area and
press CTRL + F (or CMD + F on a Mac)
to open up the “Find” text box.
4. Inside the “find” box in the top
right corner of the text area, enter
this code and press enter TWICE. You
want to work with the second instance
of it:
<data:post.body/>
This code acts like the placeholder
for all of your post content.
If you want to add your Like button
to the top of your posts, add one of
the following Facebook codes ABOVE
this code. If you want the Like
button on the bottom of your posts,
add it UNDER this code.
facebook-like
Copy this Facebook button code below
for a Horizontal count style:
<br/><br/><iframe
allowTransparency='true'
expr:src='"http://www.facebook.c
om/plugins/like.php?href=" +
data:post.canonicalUrl +
"&layout=button_count&sh
ow_faces=false&width=100&acti
on=like&font=arial&colorschem
e=light"' frameborder='0'
scrolling='no' style='border:none;
overflow:hidden; width:100px;
height:21px;'/>
Or, copy this code for a Vertical
count style:
<br/><br/><iframe
allowTransparency='true'
expr:src='"http://www.facebook.c
om/plugins/like.php?href=" +
data:post.canonicalUrl +
"&layout=box_count&show_
faces=false&width=100&action=
like&font=arial&colorscheme=l
ight"' frameborder='0'
scrolling='no' style='border:none;
overflow:hidden; width:55px;
height:62px;'/>
If you prefer it without the count,
use this Standard code:
<br/><br/><iframe
allowTransparency='true'
expr:src='"http://www.facebook.c
om/plugins/like.php?href=" +
data:post.canonicalUrl +
"&layout=standard&show_f
aces=false&width=100&action=l
ike&font=arial&colorscheme=li
ght"' frameborder='0'
scrolling='no' style='border:none;
overflow:hidden; width:450px;
height:35px;'/>
Give it a try! As always, feedback is
welcome below! You can also submit a
topic suggestion through the Contact
page at the top of the site!
http://icanbuildablog.com/2013/11/how-to-add-a-facebook-like-button-to-blogger-posts/
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment