Tutorials, Tips, and Resources

for Creating a Better Blog



7-Day Blog Bootcamp Challenge


Shape up your blog in a week! (learn more)



How to Add a Facebook Share Button to Blogger Posts

Allowing others to easily share your content on social media is something that is always important. Thankfully, many of the services we use for our online promotion have social sharing buttons that we can implement into our websites. Adding a Facebook Share button to Blogger is a little different than some other sites because we want the button to automatically insert the URL of the page the visitor is currently on, or the post they want to share, without having to update this link manually.

Adding a Share button to your blog’s template will ensure that it stays in place at the bottom of every post, and with the code below, the link will be automatically inserted into the button.

Let’s get started

Login to your Blogger account and backup your template in case something goes wrong. You can do this by clicking the Backup/Restore button in the top corner and saving the file to your computer.

Go to Template > Edit HTML.

Click inside the editor text area and press CTRL + F (or CMD + F if you’re on a Mac) to open up the “find” search box in the top right corner.

In the search box, paste this code and press enter:

<div class='post-footer-line post-footer-line-1'> 

It should find one instance of it, but that will be for mobile view. Press enter again to skip to the second instance of it instead. This is your normal blog view.

Directly above that line of code, paste this code:

<div class="facebook-share">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='BUTTON-TYPE'/><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>

If you want it to appear at the top of your post instead, jump back to the top of the editor and search for the SECOND instance of:

<data:post.body/>

Insert the code above that.

Choosing the button type

Facebook has 6 types of buttons that you can choose from. You can see them here in the “Layout” dropdown. In the “BUTTON-TYPE” part of the code above, enter one of the following as shown:

  • box_count
  • button_count
  • button
  • icon_link
  • icon
  • link

Save your template

The script will not appear in Preview mode, so save your template and check your live blog for your new Share button!

Looking to add a “Like” button to your posts as well?


  • Missy Ivey

    hmmmm….this didn’t work for me! I chose my button-type and placed the “url to share” in place of button-type “BUTTON-TYPE”. Am I suppose to “Get the Code” and place THAT code in place of ‘BUTTON-TYPE’?

    • You place the button type you want to use in place of BUTTON-TYPE. I.e. “box-count” or “button”. The types of button-types are listed in the Choosing Your Button Type section. You don’t insert any URLs anywhere 🙂

  • Vara Prasad

    thank you sooooooo much……

    but here is small problem for me if i got 14 like is also showing 14 Share any help ? i am use html code like this ……………….


  • Hey Dana, how do I make it show only while my post is shown? Like, I didn’t want it to be shown on my blog homepage because there’s this “jump link” in every one of my posts and it’d show under my jump link!

  • Muhammad Akram

    Hi, I want to add like and share buttons at the same time.How can I do this.
    http://www.naturalwaysofhealing.blogspot.com

  • Alicia

    Thanks for this. For the life of me I can’t get a <span or <div inline or inline-block to work. Do you know how to put the like and share button next to each other? Thanks, A

  • Hi Dana,

    I’m wondering if you know any sites that have the ‘share’ buttons? Or maybe you could make a tutorial of how to customize share buttons that’s located in the bottom of each post? Love your blog, as always! I’m a fan.

    Love, Alyssa.
    http://alyssa-orcales.blogspot.com

  • Sujay

    Done . Nice One. Thanks
    http://fastspeedtorrent.blogspot.in/

  • disasterdave

    I may be using an older template because the code. ” ” isn’t in the code. What can I do?

  • Paulina szypuła
  • I tried adding the like button above my post and it worked great but, now only the post title shows. Can you help me fix this issue? I know nothing about coding and don’t want to get in there messing to much and really trash my blog.
    Thanks Dana @queenofmycastle3.blogspot.com

  • Amit Soni

    thanks i will add it to http://www.goalseen.com

  • Simi Kapoor

    Thanks, helpful post.

    http://www.itneer.com/

  • MaPetitHome

    Ciao Dana posso chiederti come posso installare sul blog, a fine post, i bottoni per la condivisione con il contatore nel colore della mia grafica ?

    Grazie

  • Federico Paolo

    I’d like to thank you! I was trying to get this right. I had been searching a lot on the Internet but to no avail. And finally this one worked!

  • Livvy Davies

    when i copy and paste the code into the search box, it doesnt come up with anything (its not in my code), What does this mean and what should i do?

  • Alessandra Ozuzu

    Your tutorials are so helpful and easy to follow!

    http://sandrasperceptions.blogspot.co.uk/

  • Brent Anthony Abella Obiña

    not working to me please help

  • it a good topics for me to create sharing buttons my blogspot blog.

  • asem priyojit singh

    thanks dana

  • Hey Dana
    Thanks for your writing.
    Do you know how to add Twitter and Google+ button along Facebook share button?

  • Francisco

    Why the Facebook share button has many errors on Blogger?
    How can I correct it, in my blog?

  • When
    i copy and paste the code into the search box, it doesn’t find it. Does that mean it’s not in my HTML code? What do I do now?

  • Hi Dana! Thank you for such a great tutorial! I have successfully added both Facebook “Share” and “like Button” under the “” .

    The problem is I want to align these buttons in one single line horizontally. These currently appear Vertically Means on two separate lines. I want these to be on the same line one after the other.

    Thanks for helping.

  • Vass Dev

    it is showing in head section and if i paste the code it is saying the template is invalid as the div tag is in head

Navigate