Align Google +1, Tweet, Like and Pin It buttons horizontally

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.

twitter google  1 like send pinterest buttonsRather 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:

Update:
[30 Nov 2012] Update code to fix Pin It button not pulling thumbnail problem.
[Feb 2012] Add Pinterest Pin It button.

  1. Go to Template > Edit HTML.
  2. Back up your template.
  3. Tick the Expand Widget Templates checkbox on top right of the code window.
  4. Next, locate the first instance of <data:post.body/> tag and paste the following code immediately above it:
    <!-- Scripts Start -->
    <b:if cond='data:post.isFirstPost'>
    <!-- Facebook -->
    <div id='fb-root'/>
    <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 = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
    </script>
    <!-- Google +1 -->
    <script type='text/javascript'>
    (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
    })();
    </script>
    <!-- Twitter -->
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
    </b:if>
    <!-- Scripts End -->
    <!-- Horizontal social buttons Start -->
    <div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
    <!-- Twitter -->
    <div style='float:left;'>
    <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
    </div>
    <!-- Google +1 -->
    <div style='float:left;'>
    <g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
    </div>
    <!-- Facebook Like+Send -->
    <div style='float:left;'>
    <fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
    </div>
    <!-- Pinterest Start -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'>
    <a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
    <span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
    </div> 
    <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
    <style type='text/css'> 
    #pin-wrapper > a {background-image:none !important;}
    </style> 
    </b:if> 
    <!-- Pinterest End -->
    </div>
    <div style='clear: both;'/>
    <!-- Horizontal social buttons End -->
    

    Note:

    • 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.
  5. Buttons positioning
    To position the buttons at the bottom of post, place the code below (instead of above) <data:post.body/>
  6. Preview before saving.

Enjoy!

p.s. If you wish you can also align share buttons vertically on the side of your blog.

143 comments to "Align Google +1, Tweet, Like and Pin It buttons horizontally"

zulkbo January 24, 2012 at 5:54 PM    

Bagaimanaa yang dah gunakan
widget dari ADD THIS tapi
tak align..boleh guna tak
tutorial ni :)

Ajaya Gajurel January 24, 2012 at 5:57 PM    

its better. thanks for it greenlava.

ehl-i blog January 24, 2012 at 7:02 PM    

how to edit codes if I want to show counter on the top of share button not right side

makko January 24, 2012 at 8:24 PM    

hi Good day!

First I would like to thank you for your helpful tips, I've even used your Simply Faster Template for my blog here: http://www.makkopals.com/

My question is, from the Simply Faster Template i saw 3 to where should I post your code?

shree@SOFTECHNOGEEK January 24, 2012 at 9:01 PM    

thanks for the share

Oliver Doetsch January 24, 2012 at 9:08 PM    

Works fine! Thank you

Greenlava January 24, 2012 at 11:47 PM    

@zulkbo
Saya tak pasti, tapi boleh cuba letak kod AddThis button spt di bawah:
[div style='float:left;']
LETAK KOD SINI
[/div]

lepas tu insert kod di atas selepas line 39.

Greenlava January 24, 2012 at 11:58 PM    

@ehl-i blog
To customize individual buttons, visit their respective tutorials. The links are given at the beginning of this post.

Greenlava January 25, 2012 at 12:07 AM    

@makko
For Simply Faster Template, you'll have to add the code at two (out of three) places. Both places are located between these comments:
< !-- multipost pages conditional -->
DO YOUR STUFF HERE
< !-- multipost pages conditional -->

Farmgirl Susan January 25, 2012 at 12:47 AM    

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:

Facebook like
tweet
stumbleupon
pinterest

Thanks! :)

makko January 25, 2012 at 1:38 AM    

I got it working Thank You Very Much!!! you are a star and expect me to follow all your post... i am trying to learn everything from here... thanks again mate ^_^

Gerry Wendel January 25, 2012 at 11:48 AM    

The code that you say to place this in front of, [data:post.body/] is not found anywhere in the html for my blog. I use blogger if that helps you any.

Searched on the whole string, then tried post, then tried body. Is there something else it might say?

nicole / Twitter: BTHM1 January 25, 2012 at 12:16 PM    

i have stumble upon and pinterest buttons already- where do I add them in the above code?

Thanks for the help- this has been vexing me too!

makko January 25, 2012 at 2:57 PM    

I got it working, hope you'll not get tired sharing helpful tips... I wish you more blessings!! Thanks you Sir!

Farmgirl Susan January 26, 2012 at 8:52 AM    

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! :)

personalized items January 26, 2012 at 5:50 PM    

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.

Gerry Wendel January 26, 2012 at 11:25 PM    

Wrote a comment here the other day...don't see it!

My html on blogger does not have

Is there another string I should look for?

Greenlava January 27, 2012 at 12:14 PM    

@Farmgirl Susan
@nicole / Twitter: BTHM1
If you notice, each button code is wrapped in a div tag, like this:
[div style='float:left;']
SHARE BUTTON CODE
[/div]

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.

Greenlava January 27, 2012 at 12:17 PM    

@Gerry Wendel
Have you checked the Expand Widget Templates checkbox before looking for the code?

conference merchandise January 27, 2012 at 5:15 PM    

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 Susan January 28, 2012 at 12:49 AM    

Great, thanks. So in order to install a totally different button (for stumbleupon, etc.) would anything need to be changed or added in lines 1 - 24 as well?

If you want to change the facebook like/send button to just a facebook like button, would anything need to be changed in lines 1-24?

Thanks so much. :)

Becky January 28, 2012 at 5:17 AM    

Thanks so much for all your tips!

Just copied to put in my blog - and the Facebook icon isn't working. Twitter and Google+ are. Any thoughts?

Also - I have a floating share button that I HATE and cannot figure out how to delete it.

Spatch Merlin @ How to Blog January 28, 2012 at 11:26 AM    

Greenlava, thank you for this helpful information. This is very important as social media widgets are important parts of any blog.

Greenlava January 28, 2012 at 9:13 PM    

@Farmgirl Susan
Most 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).

Blog Informer January 28, 2012 at 11:55 PM    

Thanks for sharing this critical information with your readers. I look forward to reading more and more from your blog.

ADZA IRDAWATI aka MAK DARA January 29, 2012 at 10:42 PM    

Nice entry indeed..

btw i just voted for you for Worlds Bloggers And Social Media Awards 2012.. All the best ya... =)

Plsssss vote me back for THE WORST BLOG OF THE YEAR @http://socialmediaweek.com.my/awards/category.php?id=33 "click vote di link www.bicaramakdara.com ye Thank youuuu =)

Greenlava January 30, 2012 at 2:51 AM    

@ADZA IRDAWATI aka MAK DARA
Thanks for voting.
Voted yours.

Farmgirl Susan January 31, 2012 at 1:40 AM    

Thanks for the help! :)

Materi Dakwah Islam dan Kultum January 31, 2012 at 7:18 AM    

thanks for all your share!

Gerry Wendel February 2, 2012 at 3:13 AM    

Yes, it worked now...thanks!

Jouie February 2, 2012 at 12:54 PM    

I followed everything but I have a problem. The Facebook button is not visible along with the two other buttons. I hope you can help me on this.
Thank you in advance.
Jouie

Greenlava February 2, 2012 at 11:48 PM    

@Jouie
It looks fine from here.

adwy blog February 3, 2012 at 11:46 PM    

thanks for ur post. it worked now.

Blogspot Pemula February 5, 2012 at 8:01 PM    

Salam Blogger.
Situs ini banyak memberikan kontribusi ilmu yang bermanfaat buat kami.
Terimakasih

Mike February 5, 2012 at 8:37 PM    

The google plus logo isn't showing for me. Any help?

Prayag Verma February 9, 2012 at 2:22 PM    

Simple tip but very useful !!

Ryan Armbrust February 14, 2012 at 10:56 PM    

I would LOVE to see the pinterest button added to the 3 above. Any way to do that?

Erin Faye February 15, 2012 at 1:10 PM    

Hello.
I removed the google+ button and now the tweet and facebook buttons are touching eachother. How do I put a bit of space between them?

Thanks so much!

www.erinfayephotographyblog.blogspot.com

Greenlava February 17, 2012 at 2:00 AM    

@Erin Faye
Add a right margin to each button by replacing:
[div style='float:left;']

with this:
[div style='float:left; margin-right: 15px;']

Pierre Phil February 21, 2012 at 10:28 AM    

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!

Sine February 21, 2012 at 5:46 PM    

@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!

Harwinder February 23, 2012 at 1:04 AM    

the way u expressed post is just awesome!!

Tom February 23, 2012 at 11:15 AM    

I loaded the script onto my page and it works great. It however is a little too close to the body and looks to close. How can I add some padding to the bottom to space it out. Thanks!

Greenlava February 25, 2012 at 3:44 PM    

@Tom
Increase the padding in line 27:
padding:5px 0 5px;

The second "5px" is the value for the bottom padding.

Greenlava February 28, 2012 at 7:49 PM    

@Ryan Armbrust
Pinterest Pin It button added.

Gil Camporazo February 29, 2012 at 11:38 AM    

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.

Anonymous,  February 29, 2012 at 6:38 PM    

This would really be cool if you could add StumbleUpon

anncash February 29, 2012 at 7:11 PM    

Thanks for this, very helpful. I was able to use your codes immediately!

Mrs. Little March 3, 2012 at 12:26 AM    

Thanks for the easy instructions! When installed, the Pin It button does not show. Any ideas?

Jeff Cohn March 3, 2012 at 2:34 AM    

Doesn't work in blogger?

Greenlava March 3, 2012 at 9:58 PM    

@Mrs. Little
You won't see Pin It on homepage as it is designed to appear only on post pages.

Greenlava March 3, 2012 at 10:15 PM    

@Jeff Cohn
Of course it works in Blogger, afterall this tutorial is specific to Blogger.

loveheaven07 March 14, 2012 at 8:41 AM    

i want to try it,thanks

Fitra Khoerul Umam March 18, 2012 at 12:22 PM    

thanks my friend its work for me

Jonty March 18, 2012 at 2:28 PM    

Working best for me .... Thanks Blogger Sentral ....

SkinnySimpleRecipes March 20, 2012 at 2:59 AM    

It works. Thank you so much..I've been looking for that.

Απόστολος Μωραϊτόπουλος March 21, 2012 at 7:34 PM    

Thanks for your solution.I don't know what is Pin, so i deleted from script.Thanks again.

Exairetico March 23, 2012 at 8:50 PM    

Greetings! Thank you very much for sharing this. Works like a charm!

Larissa Tenorio March 28, 2012 at 10:30 AM    

THANKYOUTHANKYOUTHANKYOU!

Liz Dunn Wright March 28, 2012 at 8:23 PM    

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!

Greenlava March 29, 2012 at 10:52 PM    

@Liz Dunn Wright
I'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 40
and
[/b:if>] in line 55

Jobs On Choice April 24, 2012 at 7:56 PM    

Nice one,keep it up

Triyono Infect April 28, 2012 at 12:10 AM    

oh... very helpfull

Sarah Olayvar April 28, 2012 at 7:16 PM    

hi there, thanks for this post. it's very helpful. can you help me how to put the link of stumbleupon. i wan't to add it in the line- up. thanks!

Noor April 29, 2012 at 6:18 PM    

The Pinterest button does not work when you push it how can I fix that thank you also how can I add my own custom images instead of the ones it shows now? Thank you

Greenlava May 2, 2012 at 2:05 AM    

@Sarah Olayvar
Insert this code right after line 24:
<!-- StumbleUpon -->
<div style='float:left;'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>
</div>

Greenlava May 2, 2012 at 2:08 AM    

@Noor
You need to refresh the page to see the count update.
I'm afraid you can't use your own image for Pin It w/counter button.

shle3pyb4by May 4, 2012 at 5:20 AM    

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

Greenlava May 8, 2012 at 3:40 PM    

@shle3pyb4by
Your 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]

You need to put the button codes there too.

Karl Ejnar Jørgensen May 8, 2012 at 5:47 PM    

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?

Thanks!

Maya May 8, 2012 at 8:10 PM    

Big big thanxxxxx!
<3

Shopalicious! May 9, 2012 at 9:48 PM    

Thanks so much for posting this code; it worked for me at first try!!!

Annette May 10, 2012 at 12:49 AM    

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!

Jennifer Grace May 10, 2012 at 5:47 PM    

Thanks! This is great.

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.

Thanks! x

Alisha May 10, 2012 at 8:59 PM    

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!!!

Greenlava May 10, 2012 at 9:44 PM    

@Annette
The Pin It button only appears on post pages. You won't see it on homepage.

@Jennifer Grace
The scripts are different. I believe in Pin It's case the post URL (data:post.url) has to be encoded.

Kevy May 11, 2012 at 3:36 AM    

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.

Error 500

Greenlava May 13, 2012 at 11:54 PM    

@Kevy
Apply the code to the first data:post.body.
Navbar1 is the Id for Blogger Navbar, how did it get in there?

Gillian May 18, 2012 at 7:05 PM    

Thanks for the code - works a treat and now I can see who has tweeted too!

Keep up the good work!
:)

StatsProfessor June 2, 2012 at 9:54 PM    

How come when you add the linkedin share button it does not line up properly with the rest?

Greenlava June 4, 2012 at 10:28 AM    

@StatsProfessor
You can fix that by adding a top (or bottom margin depending on your situation) to the containing div.

SpideRaY June 11, 2012 at 5:50 PM    

Ignore my last the Pinterest button and stumble buttons to work however my facebook button is lower than the rest and how can you get a gap between the stumble and pinit buttons ?

Will this work

<div id='pin-wrapper' style='display:inline; float:left; margin-right: 15px;'>

roses,  June 13, 2012 at 2:27 AM    

have you found a way to incorporate this into blogger's dynamic view?

Greenlava June 13, 2012 at 11:46 PM    

@SpideRaY
When adding a new button, please:
1. Insert the code BEFORE Pin It button (before line 39).
2. Do not alter the Pin It code in any way.

To lift a button just add a negative top margin (margin-top:NEGATIVE VALUE HERE)to the button's div. To add a gap, add 'margin-right:VALUE'.

Sebin June 21, 2012 at 9:06 PM    

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..

Jennifer Wolfe June 25, 2012 at 1:01 AM    

Thank you for your help-all the buttons work except the Pin It one...can you please advise?

angelaseactivity June 26, 2012 at 1:23 PM    

Thanks Greenlava!
I was wondering two things:
How can I center align the buttons?
And I liked the old Facebook like with counter button for a clean look, how can I substitute that?

I tried doing things on my own, but it messes with the horizontal alignment.

பரிதி.முத்துராசன் June 28, 2012 at 5:36 PM    

Thanks for your post ...........it is very helpful

Greenlava June 28, 2012 at 8:41 PM    

@Sebin
The 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.

@Jennifer Wolfe
Please read reply #51.

@angelaseactivity
To center the buttons, replace line 26 with this:
<div class='horizontal-social-buttons' style='padding:10px 0 10px; margin-left:auto; margin-right:auto; width:450px;'>
To remove the Send button, change the attribute send='true' to send='false' (in line 37).

Rana Ahmed June 28, 2012 at 11:15 PM    

Good post thx

Carter Rhae June 30, 2012 at 10:28 PM    

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 :(

Happy News July 3, 2012 at 7:37 AM    

Awesome thanks.

ModelCo July 3, 2012 at 1:03 PM    

awesome!

John Nordell July 8, 2012 at 4:31 AM    

Greenlava -

Thank you so much for this tutorial. Clear and easy to do. I have confusion about the PIN It button. My confusion cleared up when I just went to single post. Thank you - and keep up the good work!

- John

Christian July 9, 2012 at 10:56 PM    

Hi Greenlava,

Is there a possibility to hide the buttons on my main page, so that they only appear if i click the specific site?

Md Tareq July 10, 2012 at 3:46 AM    

Thanks bro...i already set up this into my blog site...please continue such good customization idea so that we can build beautiful sites :)

beba July 12, 2012 at 6:27 PM    

Thank you for sharing! It works very well!

Briana DiCenzo July 13, 2012 at 12:03 AM    

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#

any suggestions would be helpful?
Thank You

Briana DiCenzo July 13, 2012 at 12:53 AM    

@Greenlava

Forget the question I asked in my last comment, I figured it out after a few minutes of thinking... Thank you so much for your site, I'd be lost in the world of HTML without you!!

Greenlava July 13, 2012 at 4:24 PM    

@Christian
Wrap the entire code in a post page conditional, like so:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
PUT EXISTING CODE HERE
</b:if>

Jerome July 16, 2012 at 5:25 PM    

Greenlava, great tutorial! I already applied it in my blog. Would love if you could refer me a link or tell me how to simply add a digg button. ;)

Cyndi July 23, 2012 at 7:45 PM    

Hi, I followed everything above to add the Pinterest button to my blog but it didn't show up...well, everything but the Pinterest button...I am using blogger...any ideas?

Greenlava July 25, 2012 at 5:30 PM    

@Cyndi
Please read reply #51.

Maggie Hall July 26, 2012 at 9:01 AM    

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!!!

Thank you so very much!!!

Cyndi July 28, 2012 at 3:24 AM    

Ahhh, got it...i never tried to click on my own post separately!! Thank you!

Indu August 6, 2012 at 7:47 PM    

Thanks for sharing this!

Erin August 15, 2012 at 1:47 AM    

Hi,

This post is awesome! Question: Is there a way to remove the counts from Pintrest and from facebook? I want the buttons to show up, just not the counter.

Thanks!

Greenlava August 15, 2012 at 9:19 PM    

@Erin
For Pin It button:
Replace count-layout='horizontal' (in line 42) with count-layout='none' and margin-left:-93px; (in line 43) with margin-left:-46px;

For Like button:
Replace layout='button_count' (in line 37) with layout='standard'

Elizabeth August 17, 2012 at 3:02 AM    

It worked! Finally! Thank you!

Niyor August 20, 2012 at 10:25 PM    

Thanks a ton.

Ivelina August 28, 2012 at 1:33 PM    

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!

Kendra | Our Homemade Happiness August 29, 2012 at 6:17 AM    

Thanks for the code! It looks good in Chrome and Firefox, but the facebook button isn't showing up in internet explorer. Do you know what the problem might be?
http://www.ourhomemadehappiness.com/

Kendra | Our Homemade Happiness August 29, 2012 at 6:42 AM    

The facebook button seems to be working now. Never mind!! :)

Judith Thomas September 9, 2012 at 6:43 AM    

Thank you!

Sarah Sheppard September 20, 2012 at 5:22 PM    

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.

Aman Deep September 29, 2012 at 11:52 PM    

How do I increase the size of the buttons?
please help.

Tia A. October 25, 2012 at 2:46 AM    

First off, excellent post. Thanks so much for this tutorial. After a few tweaks, I was able to apply this to my blog but encountered 3 problems:

1) The Like and Pin It buttons are too close.
2) Pin It button does not work. It just brings me to pinterest with a blank image.
3) How can I make the buttons appear after my signature on the post page?

Thanks so much for all your help.

Tia A. October 25, 2012 at 2:50 AM    

Please disregard question #2 in my previous comment. Here's my new question:

The counter does not show up for pinterest. I copied your code for pinterest exactly as you list it above.

Greenlava October 30, 2012 at 6:53 PM    

@Tia A
It looks like you've solved no.2 and 3, so I'm left with problem #1.

To add a gap between the Like and Pin It button, replace the code in line 36 with this:
<div style='float:left; margin-right: 30px;'>

and to center the buttons, replace whatever you have in line 26 with this:
<div class='horizontal-social-buttons' style='margin-left: auto; margin-right: auto; padding: 10px 0 10px 40px; width: 400px;'>

valereee October 31, 2012 at 8:38 PM    

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.

Kristin Jones November 21, 2012 at 3:40 AM    

also wondering why Pin It button just brings me to pinterest with a blank image-how do I have it formatted so it can pull image from my post?

blanketfortballetflats.blogspot.com

Ken November 22, 2012 at 2:01 AM    

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.

Tamara Bennett November 25, 2012 at 10:56 AM    

I've tried this and for some reason only the "tweet" and google+ buttons are appearing.
Help! tamara_bennett7@hotmail.com

Emily November 29, 2012 at 2:07 AM    

Hi there -

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?

Here's a link:

http://dbcustom1.blogspot.com/

Thanks!

Becky at The Two Bite Club November 30, 2012 at 6:42 AM    

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

Greenlava November 30, 2012 at 2:21 PM    

@Becky at The Two Bite Club
I've updated the Pin It code to fix the problem.

Giovana Innocenti December 1, 2012 at 12:51 AM    

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/

Greenlava December 2, 2012 at 3:29 PM    

@Giovana Innocenti
I've updated the Pin It code in line 41 to fix the issue.

Giovana Innocenti December 4, 2012 at 5:19 AM    

Thanksssss!!! you are the best!

Tia A. December 5, 2012 at 4:22 AM    

@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 again!
Xx
http://ThisIsTia.com | My Life In Black+White

Shehrzad Dastaan December 7, 2012 at 6:58 PM    

my tweet counter is working.just pin button has an ugly twin.do smthing abt it pkz.also pin counter is nt workin

Eric,  December 8, 2012 at 5:17 PM    

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.

TxMommysSavings December 9, 2012 at 5:46 PM    

Hi, I just have to say thank you for this code! Its the ONLY one that I could get to work. But I'm still not getting an image on my Create Pin page. Any suggestions? Thanks!

Greenlava December 13, 2012 at 2:05 PM    

@TxMommysSavings
I don't see the Pinterest script (line 45)in your template.

Sarah December 18, 2012 at 10:06 AM    

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/

Doriana Gray December 25, 2012 at 1:25 AM    

Thank you!

Deddy January 24, 2013 at 12:13 AM    

Great, I'm confuse when I will try put in my blog, but its ok

Thanks for this nice post, it help a lot..

Chromatophobic February 8, 2013 at 9:05 AM    

Very helpful tutorial. Thank you kindly!

Cj Escuadro February 8, 2013 at 12:31 PM    

Hi thanks for this post.The buttons worked on my blog but the pin button is a bit lower than the other.I tried to adjust the width but still the same.Please help me with this.

You can check it here: http://pinayontheloose.blogspot.com/2013/01/natural-remedies-for-blackheads-and.html

Abbe February 8, 2013 at 10:53 PM    

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>]

Click to go to top Click to comment