Even though individual Facebook Like & Send, Twitter Tweet, Google +1, Pinterest Pin It, and social sharing buttons can be easily added to Blogger post by following their respective tutorials, aligning them perfectly side by side is a bit tricky. Several readers were having trouble with the alignment and contacted me for help.

Rather than attempting to explain how to align your existing buttons, I think it’s easier to just give you a new set of codes for the buttons with the alignment built in. Simply remove your existing buttons and add the new code using the following steps:

Pin It button will only appear on post pages. We place this limit because the button only pins the page on which it appears. As such on homepage (if we were to allow it there), every instance of the button will pin the homepage, not the post (as it’s “supposed” to).

The Pinterest script in line 45 must occur only once in your blog. Omit this line if you’ve already had the script in your blog.

Buttons positioning To position the buttons at the bottom of post, place the code below (instead of above) <data:post.body/>.

Hi Greenlava,Thanks so much for all the helpful information you share with us! I'm wondering if there's a way to use your code but with different buttons? For example, I would love to have these buttons horizontally aligned at the top of each of my posts:

Hi again,I have another question. Do you take requests for post topics? :)

I've just spent several (more) hours unsuccessfully trying to add a 'pin this' Pinterest button to the top of each of my Blogger blog posts, next to the Facebook 'like' button I already have up there. The official pinterest button code (found here: http://pinterest.com/about/goodies/) apparently doesn't work for individual Blogger posts, and several other instructions and codes I found online don't work either.

I bet you could figure out how to install that pesky button - and I'm sure I'm not the only one who would be eternally grateful. Thanks for considering it - and for all the help you've already given us! :)

You're right, everybody knows how to put these buttons but never aligned properly. Thanks for the share, this is really a valuable information. I will try it right now on my blog and see if its gonna work out fine.

so if you want to replace a button, just replace the respective button code with the new button code.To add a button, simply insert the new button code (wrapped with a div tag like above)right after line 39.

Hi Greenleave, I'm setting up a site right now and I got a lot of ideas on how to input buttons on one's site. Instead of reading through those articles, I'll be following this concise set of instructions you have on your article. I'ts nice of you to share brief ideas.

@Farmgirl SusanMost button codes consist of two parts -one part is a script and the other one is a HTML.For best result put the script part within lines 1-24 and the HTML part after line 39. The purpose is to prevent multiple script loadings on multi-post pages.That said if you were to put the script and HTML together (as in my previous reply), that should work too.To show Facebook Like without Send, change send='true' to send='false' (line 38).

Hello. I am new to this and I need your assistance please. I have a new site. I want to deactivate the current plugin in my site and then get your horizontal look code above the post as a replacement. I'm using a wordpress blog. Where do I put the code? Thanks!

@Greenlava - do you have any idea why the Google +1 button sometimes shows and sometimes doesn't? I've made some changes on my blog to reposition Linkwithin (as suggested by you) and briefly the Google +1 button actually showed, which it hadn't before, but now it's disappeared again. It's almost as if I didn't change anything in that particular code. Code it be my browser or something on the Google side? My blog: http://joburgexpat.blogspot.com. Thanks!

I've experimented my blog on posting social buttons like the Twitter, Facebook Like and so on 'caused I couldn't perfect it. Now I've found your simple, helpful tips which I right away adapted it in my blog. Thank you very much. I really appreciate your tips - a resourceful tips for this matter. Now they're are neatly done and orderly posted in all of my blog posts.

Any guidance on making the Pin It button appear under each post from the main blog page as well? I want people to be able to Pin even if they're not on a specific post (which I realize is less-than-perfect Pinterest etiquette)... Thanks!

@Liz Dunn WrightI've added the explanation as to why I made the button appear only on post pages. Please read it, and if you still want to make the button show up on homepage, do this:Delete the post page conditional, made up of these two lines:[b:if cond='data:blog.pageType == "item"'] in line 40and[/b:if>] in line 55

Hey there. Well done to such an amazing post. However, I am in serious need of your help here. :( I have tried installed this, and it looks fine in my homepage. But then again, I have the 'Read More' section, but once you clicked and entered the original post, the buttons are all gone. And yes, I have tried to locate "JumpLinks" or something similar but to no avail. Please help me out as it would be great to have those buttons appear! :) Oh, btw... for some reason, the Pinterest button is missing. Any ideas why? Thanks so much for your time!! Appreciate that loads! :) xxx

@shle3pyb4byYour template uses auto readmore hack. It usually has one more instance of data:post.body. Maybe located after a conditional tag, like so: [b:if cond='data:blog.pageType == "item"'][data:post.body/][/b:if]

Hey Greenlava. First thanks for the code work! I really appreciate it.

Second: I can't get the pinterest counter to show up after post, when this code. I can on the other hand make it work on the individual code (but only with 'vertical' and this always says 0) Any ideas to what might is wrong?

hi there. thanks for the great post, but i'm having issues. all of the icons show up, except for the pin it button (which is the one i really want!) did i do something wrong?www.iheartvintagecouture.com is my blog.thanks!

Why is it that the 'tweet' button automatically picks the URL of the actual post, not the home page URL, even if you are viewing on the homepage, but Pinterest will not do this? I'd love it if the Pinterest button can appear on the homepage (main blog page) as well on individual posts, but always 'pin' from the right post. I just wondered if you know why this won't work when it works for Twitter.

Thank you Greenlava for posting on setting up share buttons above every post of Blogspot blogs. I have tried many widgets and codes but did not get desired results. I am going to try it, hope it will work!!!

I am new to all of this so I might be out of my league posting on here. But I am still having difficulty. First of all their are 2 places that has the in my html coding. Secondly when I post the entire code you provided I am getting the following error message when I preview it, HELP!:More than one widget was found with id: Navbar1. Widget IDs should be unique.

Thank you very much... But In my blog the pinterest button not showing correctly. It shows under other buttons. Just see this post - http://androidmarketguru.blogspot.in/2012/06/ftl-launcher-pro-312-apk-for-android.html . Kindly help me..

@SebinThe Pin It button is pushed down because your post area is too narrow for the buttons. You need at least 450px, yours is 420px.Try removing the Send button, maybe that will reduce the buttons width. If that doesn't work, you need to manually set the width of each button's container div. Example, to set Tweet button's container to 100px, add width:100px; in line 28.

I was able to add the code. and I understand that the pin it button will only show on the actual page but it's not. Even if I sign out and go back to the blog using the web address I can't get it to show up :(

Hello, I modified this code slightly to also include a stumble upon button, however I'm having trouble with the spacing. I can't seem to put a space between the stumble upon and pin it button.. you can see my site for a visual http://creativelynesting.blogspot.com/2012/07/welcome-to-creatively-nesting.html#

After spending hours today searching and trying to figure out how to change the HTML code for each button, I came across this blog entry on one final attempt to find a simple way without scaring myself to death looking at that code I could screw up!!# 1. Thank goodness I backed up my HTML.# 2. Thank goodness you created that code for us!!!

Hi, thank you so much for this code, works perfectly! Just one question: how to change the Facebook button code so that it is just clickable and it posts the link automatically on the persons facebook profile without the pop-up of the Post to Facebook window. Used to have such button before... Also will it count likes when the link is shared on Facebook manually and liked by others? Thanks!

Setting Div id='pin-wrapper' to 'margin-left: 20px;' stops it from smacking right against the Facebook share buttons.Though to fix the button from going onto the next line and causing complications with the pinmarklet Div class='horizontal-social-buttons' needs a larger width, I put mine at 500px.

The button for pinterest doesn't show up for me, either -- I even tried it with a second attempt adding just the pinterest script after the and it still didn't show up. I'm wondering if there's some temporary glitch with pinterest, as that button isn't showing up on the bloggersentral sidebar either.

I have tried and tried to fix this and have read every post here as well and can’t find out why my pin it button is 1) not showing a count, 2) when I click the button it’s not showing the actual post- its blank. Please help.

Another Pinterest question if you have the time. I added the pinterest button to the post page and home page - the pinterest button is falling below the other buttons. My main post section is set to 615px wide - which is obviously more than the 450 needed. Could something else be affecting this?

My Pin It button is mot pulling a thumbnail. Any idea on why this might be happening and how to fix it?? This is my blog: http://thetwobiteclub.blogspot.com/2011/12/chocolate-peanut-butter-squares.html

Hi Greenlava, thank you for everything, but I don´t know why, my pin it button is touching the send button! I´ve already tried to change the (-44), but they are 2 buttons so I could not move both of them!Thank you for attention and my blog: http://arquiteturainnocenti.blogspot.com.br/

@Greenlave (Post# 119)YOU ARE AMAZING!!!! Thank you so much for taking the time to answer my question(s) AND for fixing the pinterest button. Now, if only I could figure out how to add a "Pin It" button to each picture I'd be all set. Haha

Thanks for the post, but there is problem with the twitter counts. When I view my blogspot blog in dynamic views, I see much more twitter counts than in your script. The facebook count are correct by the way. For examples for every post there is one tweet, but in your script it's not visible.

Great code, thanks! I've been using it for a few months, and recently, my Pin it counts have not been showing. Instead, I just get a "-". Any thoughts as to why this is? It used to work great! Thanks!http://simplyalbany.blogspot.com/

Hello there, I wonder if you can help me - I recently noticed that the pin it button for this widget was no longer working so came back here for a fix. I removed the (now faulty widget) on my blogger, by hitting the "Revert Widget Templates To Default" at the bottom of the Template HTML page, then followed all of the above steps with the new and improved pin it button code... and nothing is appearing. At all. Not in preview, and not after I've saved either.I've spent a very frustrating two hours trying to figure out what I've done wrong and why I can no longer add widgets via HTML. I'm cold and hungry and the dog needs a walk ;)Any help would be greatly appreciated.

Anonymous,
February 18, 2013 at 11:27 AM

VARIATION #2: Adding the Pin It button to the Posts on your Home Page

You may notice that all four buttons (Twitter, Facebook, Google+ and Pinterest) appear on your blog post pages; but the Pin It button is missing from the posts on your home page:

That’s because if someone were to pin one of your images from your home page, the link would go back to your blog’s home page (instead of to that blog post). This isn’t very helpful to someone clicking on your image on Pinterest – because it would take them to your home page instead of to the blog post where that image is. That being said – if you do prefer to have the Pinterest icon/link appear on your home page too:

Delete this line of code (line 40):

and delete this line of code (line 55):

[/b:if>]

Comments on this post are closed. I am for hire if you need personalized help.