About   All Tips   Tips by Category   Tips by Ability   Help!

Share Buttons For Customized Templates - Intermediate

If you have had difficulty adding the share buttons to the bottom of your posts, this tip is for you!

A little while ago, Blogger came out with a super easy way to add share buttons. To get the buttons, all you had to do was check a little box in your edit posts section. These buttons appeared instantly if you had an original, untouched Blogger template. Problem is that once the post footer section (for signatures, post separators/dividers) has been changed, the share button trick probably won't work.

I figured out an easy way around that issue. It's not very hard to add the buttons, but it does require that you make a change to the HTML of your template. Be sure to download a current copy of your template before beginning.

How To Add Share Buttons To A Tweaked Template:

1. Download your template, then click on Expand Widget Templates.

Click on images to enlarge.

2. Scroll down until you see
<div class="post-footer-line post-footer-line-3">

Windows users: Click here for a tip on how to find things easily within the HTML of your template.

3. Paste the following code directly behind the above code: <span class="post-share-buttons"><b:include data="post" name="shareButtons"></b:include></span>

4. Preview and Save.

Don't like where the share buttons appear? You can experiment with pasting the code in other lines of your post footer. For example: I pasted the code immediately behind the quick edit pencil icon on post footer line 1 because I wanted the share buttons to appear after the comment line instead of below it. Modifying the placement of the code makes this an advanced tip, so use extreme caution and go super slow.

If I have put a signature or post separator on your blog and you desire share buttons without the hassle, I can add them to your blog for $5.

Oh, and a little unrelated bit of information: I will be accepting new makeover orders this summer. More details to come!

Related Posts:
Add Share Buttons To Your Posts!
Add Tweets To Your Sidebar!
Fun Facebook Symbols

Have you been helped by my tips?
Consider grabbing my button or adding this blog to your bloglist!

Want to share this tip with your readers?
I would be honored for you to link back to this post!

Please do not copy and paste my words and images into your posts.
I work hard on my tips and and wish for everything to stay on my blog.
Thank you for your cooperation! :)


Julie said...

Thanks for eliminating the geek speak! Easy peasy!

Fran Coleman said...

How do you add those neat social icon buttons and link them to the appropriate spots?
I got a set of sweet halloween themed social icons and for the life of me cant figure out where/how to put them :( I figured I would use the add a pic widget but I want them next to each other not one on top of the other.

PS: I have been living here since last night! I have already used 3 tips, make ur own siggy (EASY), scrolling marquee for my blog buttons that link back (SO SO EASY) & Button Grab box (NOT AS EASY BUT DEF DOABLE) I put ur button in my marquee & linked to your blog in my button post (just a link not copy/paste of your post :) THANK YOU THANK YOU for this wonderful how to. U saved me a TON of $$$$ I was quoted 50$ for the marquee. U rock!


Fran Coleman said...

Could you install the social icons for good reads, twitter, fb, rss,tumblr, pintrest, email? I dont have 1 for GR,tmblr or pintrest though.
Do u have any for these places? 
I'll email you :) 
TYVM for your blog & quick response :)

sneakymomma said...

Hey Fran! I found my social icons (under connect in my sidebar) on Photobucket. I do not know how to put them below a post, though. I can install all of the ones that you mentioned in a sidebar gadget. If you are interested in me installing social buttons on your blog, shoot me an email along with the buttons you would like to use (if you have them) and I'll send you a quote. :) blogsbysneakymomma@gmail.com

Books And Beyond said...

HI! I am sending you an email, I need your help :)

The Raudenbush Family said...

I need some help too! I figured out how to add the share buttons using another tutorial online. I finally got them to appear under my blog labels. But, there is text behind each button saying what it is (blog this!, Facebook, Twitter, etc.). It makes it look awful -- and I don't know how to get rid of the text/labels behind each button. Help!!!


Jill @ Sneaky Momma said...

@The Raudenbush Family My only suggestion is to go back and uninstall the buttons you installed with the other tutorial, then install the ones on this tutorial. That would probably be faster than trying to pinpoint exactly what it wrong with the code that you already have. :)

The Raudenbush Family said...

Hi Jill - I did that. I deleted the other code, added the code you have here. I got the buttons there, but I have the same problem. The text for the button/icon is showing up behind the buttons making it look a jumbled mess. I'm at a loss!

Jill @ Sneaky Momma said...

How weird! If you'll send me your blogger username and password, I'd be happy to take a look when I get a chance to see if I can see what went wrong. blogsbysneakymomma@gmail.com :)

Nez said...

Thank you for this post, and yes I realize it's a little bit old but still very relevant. I was having some issues because of a costume template and this has fixed the issue, cheers :)

Becky said...

Thanks so much for posting this - made it super easy to add the buttons at my blog!

Devan Gaddie said...

I've tried looking on Photobucket for the social icons that you have in your side bar. Can you give more information about where you found those and how you put them on your blog? Many thanks!

Jill @ Sneaky Momma said...

Hi Devan! I got all of my images from Photobucket. Lots of searching to find what I wanted. Then I used Photoshop Elements to resize the icons to the size I wanted. I used the steps in this tutorial to get them to sit side-by-side. http://sneakymommablogdesign.blogspot.com/2011/07/side-by-side-buttons-intermediate.html
Try doing a search for "free social icons" on google. There's tons of free stuff out there now. You're almost certain to find a set that matches your blog! :)

Anne CROSBY GAUDET said...

Oh my gosh...it worked!!! Thank you so much :)