Home » Blogger Tutorials, Tricks and Hacks » Blogger Seo Tutorials / Tricks » Adding FaceBook Share button for blogger posts.

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Adding FaceBook Share button for blogger posts.

Adding FaceBook Share button for blogger posts.

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

135,611 views

A lot of my friends and visitors asked my about how to add share on facebook button in blogger (blogspot),
And this question repeated many times specially after I posted a tutorial about How To Add Retweet Button To Blogger (Blogspot ).
Today we’ll learn how to do it in a very easy way.

About The Widget.

This is the official facebook sharing button and here are it’s features.

  • 2 Styles. Button Or Link
  • With / without Counter.
Step 1. Get Your Code.

Go to this page click here,
And make your button ( customize it ). there are some easy options and you can check the preview button to see your button.
See the following image to see the button different styles.

Adding FaceBook Share button for blogger posts.

After Finish you button customization, please copy your button code and go to the next step.

Step 1. Add It To Your Blogger Blog.

Log into your blogger account, and go to Layout >> Edit Html.
Before doing any thing you must check Expand Widget Templates box.
And find the next Code

<div class='post-header-line-1'/>

And after it, paste your button code we made the button it in step 1

What, If you didn’t find the code above in your template, The try to find the following,

<data:post.body/>

And paste the button code Before it.

That’s It.

Demo.

click here to see demo.
please share and follow me if you found this tutorial useful for you.

Liked It ? Please Share

Comments

62 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. loxodon says:

    thanks, very useful !

  2. Beben says:

    sippp…Max…

  3. Ehtesham says:

    This is awesome!!!

  4. imitrex says:

    works for me

  5. Thanks very useful trick

  6. Zaky says:

    Thank….

  7. taufiq says:

    terima kasih buat infonya!

  8. Max says:

    Thanks all for your nice comments.

  9. alex says:

    thanks for sharing such useful information, it really worked for me.

  10. peter says:

    the tips really helpt, thanks

  11. Max says:

    @ Alex and peter, i’m glad you likes it.

  12. Jeremy says:

    I tried adding a Retweet and Facebook Share button today but the Facebook Share was placed on the right side of the Retweet button instead of below. How do I move it below so you have all the buttons vertically aligned?

  13. Eky Dakka says:

    Hi, I am a newbie, is it works for wordpress blog?

  14. jeff says:

    Thanks, it looks very well

  15. Max says:

    @ Jeremy what you need to do is to enter the next code between buttons codes,

    </br>

    @ Eky Dakkasure you can, but you have to know some info about codding to be able to edit your wordpress theme.

    @ jeffthanks jeff.

  16. i had added this to by blog after my posts shown 2 times first normal then facebook button
    and post now i had deleted.. please solve this problem.. thank you..

  17. Anup says:

    Hey! Max I have added your linked widget on my blog…It’s looking good. Don’t forget to see it :)

  18. Itz really helpfull…….thxxxxxxxxx

  19. codruta says:

    I put both buttons, Retweet and Facebook and between them the code , as you said to Jeremy, but it shows me an error message “The element type “div” must be terminated by the matching end-tag”

    what can i do?
    thanks

  20. Max says:

    @ Anup, GRITTOMON THOMAS thanks for your kind comments.

    @ codruta please send me the code that you use in your blog. all of it.

    @ rajaganapathi this is a template problem, please remove the codes and add it all over again, if you still meet the same problem, please try to change your template.

  21. Lauralee says:

    Thanks, thanks, and more thanks!

  22. irvin says:

    umm.. how to make it appear inline with article title?

  23. Jaydeep says:

    I added the facebook button but when I open my blog the facebook share number don’t display, but when I click on share then only it shows the number.

  24. gryphon14 says:

    Why does the counter didn’t show up in my button? Any idea? Please mail me

  25. Mischo says:

    yeah! i have same question than irvin: please, how to make it appear inline with article title?

  26. Max says:

    @ Mischo, please add the button code after the follwoing part in your template,

    <div class='post-header-line-1'/>

    @ previous comments, please not that this problem some times happening here on allblogtools.com too. this is too wired and i’ll look for a solution for this soon.

  27. Very useful tips, thanks very much.

  28. h ow to make fb share for post url custom

    • Max says:

      you can do it from the same page. or by the same way, you don’t need to change any thing.

  29. Sumanth says:

    Thanks for sharing…very useful for my blog..

  30. Charles says:

    I have two Blogger blogs using different template, and neither one has or anywhere in it. Anyone else have this problem?

    • Charles says:

      The post didn’t take my code, but what I meant to say was that the template doesn’t have either of those code lines that you say to insert the counter before or after.

      • Max says:

        hi charles, did you checked ” expand template widgets box ” before searching for the code, your template must have it.

    • Charles says:

      Never mind, I found my problem. :)

  31. lynn cherry says:

    Whoa…that was so easy…but every blog post has the count 11…odd?

  32. Ikenna says:

    I added the widget and it works perfectly, but it appears in line with my blogpost. I want it instead above the post. Help!

  33. he says:

    great article appreciate all the help…quick question: i added the facebook and twitter share buttons but how do i customize them so that it is for each individual post not for the main site?
    thanks

  34. citydl says:

    great trick

  35. Kay says:

    How can I replace the facebook share icon offered by the site to the one I prefer?
    many thanks~

  36. Stella Seaspirit says:

    Thanks! This was so easy to do, just one question, what can I type to get the button at the bottom of my post instead of just below the title?

  37. Tatiana says:

    worked like a charm, but why did it automatically have the number 16? Does it know that I shared on my facebook before…weird?

  38. brandy says:

    Thanks you! Was easy!

  39. Very simple steps! thanks for sharing!

  40. arnold says:

    i couldn’t find the code to replace in my template. Please help!! and if you know how to add a ‘like’ button with the ‘share’ button it’d be really cool if you could tell me ! THanks

    • Max says:

      hi arnold, you don’t have to replace any codes, you just have to paste your code after one of the above codes,
      to find it you must check expand template widgets box.

      • arnold says:

        hey there max! thnks so much for your quick reply. now the problem is i wanna put the share button with digg, tweet, & buzz like you have on your page posts! but aligned on the right side !! if it’s a lot to ask, please thank you anyways & i totally understand ! take care friend

  41. Russell says:

    I added this no problem. But all of my blog posts started with a 24 in the counter. And every new blog post starts with 24 in the counter. Shouldn’t the counter only count when that specific button is pushed?

    • Russell says:

      Oh, and no matter which share button I push, it always points to the same old post. It doesn’t share the post that I pushed the button for.

  42. jaganmangat says:

    that was a simple trick and it works gr8…

  43. bilquer says:

    Yes, that’s useful staff.But people keep sharing fun vidoes or useless things.They should be interested in kinda this subjects!

  44. Okkz says:

    Hello, thx for this article. However, i have some problems integrating the share button correctly.
    I did as you said, and when i click the share button, it only displays my blog’s title, its main address and its description but not the article’s title and its adresse !!

    How can i fix this ?

    Thanks !

  45. NOMAD says:

    It’s work~
    Thanks A lot!

  46. sally says:

    THIS IS FAB! Thank you! ur a life saver!!!

  47. toheed says:

    thank u very much dear! its very useful for me.

  48. I am having the same problems as Jeremy. Ive inserted both retweet and facebook share. The later appears under the former. Tried inserting the code and merely getting the message : Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type “b:includable” must be terminated by the matching end-tag “”.

  49. calai says:

    I tried adding a Retweet and Facebook Share button today but the Facebook Share was placed on the right side of the Retweet button instead of below. How do I move it below so you have all the buttons vertically aligned?

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here