Tutorial: How to Change Blogger's Share Buttons to Cute Custom Images

Update: I underestimated how popular this post would be! I feel like I've answered all the questions people might have with this tutorial, so I'm turning off the comments for this post. Please read the ENTIRE tutorial step by step, and then read ALL the comments if you are struggling with this tutorial. If you've tried everything and you still can't get it to work for you, then you can email me and I'll see if I can help you. MAKE SURE YOU GIVE ME YOUR SITE URL in your email, otherwise I won't be able to see your code in order to help. I don't mind helping, but please respect my time by only requesting help if you have honestly tried everything else first.
Blogger already has the option for share buttons, but they don't have a 'pin it' button and honestly, I think they look ... meh. One of my clients wanted to do something classy and customized on her site, so I looked ALL OVER online trying to find a tutorial on how to do what I wanted. I couldn't really find it anywhere, which is why I decided to share my own tutorial on how I did it. I spent waaaaaaay too long figuring this out, so hopefully this saves you the headache!

If you're savvy with HTML, you can customize this to have your own images and match your fonts/colors. If you're looking for an easy solution, I've made up some cute grey buttons that should match most any blog. Voila!

So. First things first, you're going to have to delete the Blogger share buttons that you currently have on your site. To do this, log in to your Blogger Dashboard, and go to the Layout tab. Once there, you'll see the skeleton of your blog. Find the place where your blog posts go, and at the bottom, you'll see a link that says Edit. Click that link:


Once you're in, you'll see a window that lets you configure the blog posts. One of the options is to Show the Share Buttons. Make sure this button is NOT clicked.


 Hit save. Okay. Now that the Blogger share buttons are removed, you can add the cute ones! Now you're going to want to go into your Template section of your blog.


Once you are in the HTML of your blog, click Expand Widget Templates. Hit Ctrl F and find the following piece of code: <div class='post-footer'> You might find that more than once - if so, you want the SECOND one. DIRECTLY after that piece of code, paste the following code:


Make sure you hit "Preview" to make sure everything looks right! If it does, hit save and you're all set! It should look something like this:


Or, if you want to customize it, replace the img src links with the links to your own images. Here's an example of how you could customize this code:


See? Relatively easy. If your blog template has a border around your images, you might want to take the automatic border off, but that's your call. Let me know if you have any questions or problems and I'll see if I can help! Good luck!
Another Update! I've gotten so many requests for the Google Plus and Tumblr codes that I've decided to paste the code here. If you want those icons, paste this code in instead:
Hope that helps!

Photobucket

87 comments:

Wanda said...

Enjoyed this tutorial but couldn't actually get it the images to display.

Tiana Smith said...

Hi Wanda - Sorry it didn't work for you. Try pasting the code directly after the first div class='post-footer' tag rather than the second. Sometimes if you have a heavily tailored blog design, yours will be slightly different.

O. said...

Dear Tiana,

Thank you so much for sharing this with us!
I changed it a little bit, as I needed something really simple - just the buttons without the text - and I hope you don't mind; )
By the way, I love your design work.

/Olívia
(a beginner blogger from Hungary)

Tiana said...

Olívia - Of course I don't mind! I'm glad you were able to tailor it to your needs and I'm glad you like it :)

Enduring Epilepsy said...

Thank you! I've been looking for a way to customize these on my blog. I saw all the services, but couldn't figure out how to code my own buttons. Much appreciated. :-)

Blog Decorator said...

Enduring Epilepsy-So happy it helped you! Enjoy!

Melissa Lueders said...

Thank You! I had to post your html when the share buttons was on. Then my post footer showed up. I copied your address and then saved and went back and check off the google buttons. I don't know if this makes since but it worked. Thank you!

Blog Decorator said...

Melissa-Don't you just love html sometimes?! I'm glad it worked!

hammermama said...

Hi Tiana,

Thank you for sharing such a wonderful tutorial. My blog is still a work in progress and I LOVED how you customized the sharing buttons. I've made this attempt several times and I am getting an error message:

'Could not load template preview: Error parsing XML, line 1947, column 75: Open quote is expected for attribute "src" associated with an element type "img".'

Do you think you can help me, please? And a most gracious thanks!

Blog Decorator said...

Hi Hammermamma ~

Today's my day off, but if you email me at theblogdecorator (@) gmail (.) com, then I should be able to help you out tomorrow. (Your blogger profile isn't set up to respond via email, otherwise I would have contacted you directly. I hope you come back here to check for a response!) I think your problem lies in not copying over your own custom image links correctly (you might be deleting some quotation marks by accident.)

Elisheva said...

Thanks so much! I had to fiddle around with the new template editor, but once I figured it out it worked:)

Kimberly Renee said...

This is exactly the type of tutorial I have been looking for. I have 2 questions though. How do you add a Google+ button so people can share the post and is there any way to a via twitter username to it as well? Thanks for sharing this tutorial.

Blog Decorator said...

Hi Kimberly - I couldn't figure out a way to add a Twitter username without making the code go wonky, but you can add Google Plus pretty easily. Blogger isn't letting my paste the code for it since their commenting system isn't allowing the HTML, but I'll email it to you. If anyone else is wanting Google Plus, just shoot me an email. :)

Britni Jai said...

Hi there! It worked for me -- however when clicked it shares the blog "in general" not the post... Make sense?

Blog Decorator said...

Hi Britni - The code is such that it will automatically pull the URL from wherever the site visitor is at - so if they're on a specific post, it will pull that URL, and if they're on the homepage, it will pull that URL. If it's something that really bothers you, you could always change it so that the buttons don't appear on the homepage, but only appear on the post pages. If you want to do that, here's a tutorial that can help you out. Hope that helps!

Britni Jai said...

I got it! Thanks! You're awesome!!! :)

Putting my vote in now for a post on how to make unique date headers in Blogger ;)

Blog Decorator said...

Britni - When you say "unique date headers" what exactly are you meaning? How to put the date inside an image (like what's seen on my Halle template), how to put an image to the side of it (like what's seen on my Kate template) or how to change the font (like the Kate template)?

I can do a tutorial on any of those, but it'd help if I knew what you were looking for :) Once you let me know, make sure you subscribe to my blog so you'll know when I post it!

Melissa Cook said...

You are so awesome! Thank you for these cute buttons! I didn't like the share buttons but know I need them. This is a great way to display them.

Thanks!
www.mysoulisthesky.com

Lauren B said...

Thanks ever so much for this tutorial - it really saved my blog!

I'm going to email you with arequest for the Google Plus code.

Thanks again.

Lauren

Eric Korin said...

it worked! thanks a lot
http://showfirepost.blogspot.com/

Lynsey Betz said...

This is an awesome tutorial! Thanks!

Miles Of Style said...

Hello, thank you so much for this tutorial. It is indeed a blessing!

I was wondering what would I have to change in this code to go with google plus and tumblr icons .

Persis.

Blog Decorator said...

Hi Persis - I sent you an email with the Google Plus and Tumblr added in :)

lifeisalovelydream said...

Thank you for this simple and to the point post, I have literally scoured the interwebs for over an hour, and your post was the best. HAHAHA Only down side is when I try and find "div class='post-footer'" it shows 0 results, I have even red through all the code trying to find it and it just isn't there. :( Help!!

Blog Decorator said...

When I look at your code I can see it ... That's where your labels section is housed as well as your comments. So it is there! I'm not sure why you can't find it in your code. Did you try clicking inside the HTML box before doing CTRL F? Blogger has made some changes so that if you're not actually clicked inside the box it will return zero search results.

Jhem Arzaga said...

Hi, Corinne! Thanks for this tutorial, I am really excited to try this one for my new blog but it doesn't work for me. Even the default share buttons dont work and wont show up under every posts, which in fact i enabled already the social sharing buttons in my blog post configuration. ca you tell me what's wrong with it? or was it a conflict with my template? been trying a lot of times...
my blog is yourquotesdiary.blogspot.com, please lend me a hand on how i could do this like yours.hope to hear from you! thanks in advance..god bless :)

Blog Decorator said...

Hi Jhem - It sounds like you have some corrupt template code. :( You could try following this tutorial to resetting your corrupt widgets, but make sure you hit preview first before saving, because this could alter some of your other widgets. Also make a back up copy.

If that does not help, then it's something in your template that is set to "hide" the post footer, in which case, I can't really help you much since I wasn't the one who created that code. Hope that helps!

Jhem Arzaga said...

Corrine, thanks for your response! i gladly appreciate it, but it still wont work. so maybe you are right, its a template matter. thanks ayway for giving me an answer.. take care!

Alex Stephens said...

I have searched the web inside and out for this type of post! It's perfect thankyou. Question- How can I move these buttons to show on the full post when viewers click on the 'read more' button?

www.blushousbeauty.blogspot.com

Alex Stephens said...

Scratch that! It does show on the full page. Is there a way I can remove it from the homepage and it just be viewed once the view full post button has been clicked. Also I would love to add in a tumblr and bloglovin icon, do you have these? Thank you so much!

www.blushousbeauty.blogspot.com

Blog Decorator said...

Hi Alex - In a previous comment I explained how to do what you're asking, but here's the link again for the tutorial on how to remove share buttons from homepage, but leave them on the post pages.

I don't have a bloglovin icon, but I do have a tumblr. Like I've mentioned before, Blogger won't let me paste the code in a comment, so you'll need to email me for me to send it to you (your Blogger profile doesn't have your email address for me to grab).

Sundays are my day off, so if you email me, I should be able to send that to you tomorrow.

Bhavuk Khandelwal said...

good one....but how to add this sharing button left side to your post

Blog Decorator said...

Hi Bhavuk - It's automatically set to display on the left. If it's showing up somewhere else on your template, that means your template post-footer has a different justification hard coded in. If you don't want to change the code that's in your template, you could try following these directions to change where the share buttons are displayed within the code I created.

Jessica Wendel said...

I could not find the code in the widget template.

Blog Decorator said...

Hi Jessica - I'm not sure what you mean ... Do you mean you couldn't find the "post-footer" part in your template? If so, it's kinda hard for me to help you, since you didn't leave a link to your site and your profile is set to go to your google+ page, which also doesn't have any links to your site. Since I can't email you or contact you in any way to help, I hope you come back to leave more information :)

Tim Bajrami said...

thank you.

Pradeep Musale said...

Great. It works for Me.

Chris Mit said...

Hello Tiana, your tutorial was very helpful and it worked for me with some changes. I was wondering if the same thing is possible for social media counters as well, or if the code can be adjusted to receive customized counters. Looking forward for your reply.
Best regards,
Chris.

Blog Decorator said...

Hi Chris - No, as far as I know, you can't have customized images with the auto counters, nor can you set up a customized look for the counters. :/ I might be wrong, but I personally don't know how it'd be done. Sorry!

Kristy Gonyer said...

So awesome...very new to blogging and just starting to get everything close to the way I like it. (Although I have a feeling that it will be a never-ending process since I am a bit of a perfectionist!) This tutorial was just what I was looking for thanks!

http://www.naturenurturegrow.com/

Rachel said...

Hi!
How do I add a google+ share button along with these?

Blog Decorator said...

Hi Rachel - As I've mentioned in both the post and in the comments, you'll need to email me if you want that code. Your Blogger profile isn't set up correctly to receive emails, so I can't email you unless you email me first.

Greluches et Fanfreluches said...

Hey Tiana! Thank you so much for this tutorial and for answering my mail about the Google + button so promptly! You are a blog angel! ^^

Tito Khan said...

not working for my blog
http://urblue.blogspot.com/

Blog Decorator said...

Hi Tito - I'll need a little more information to be able to help you out. Did you get an error message? If so, what exactly did it say? Or did you try it, get no error message, but it's just not showing up? If that happened, then try putting it after a different time of the div class='post-footer' code (like the first time). I see that the original share buttons are still up on your blog, so are you sure you followed all the steps?

Natasya H. said...

Thank you so much for this tutorial! I love your blog :)

bicepsbrachii.net said...

Very helpful article on adding sharing buttons in Blogger posts.
Thanks a lot!

Anne Di said...

Hi Tiana! Your code worked out perfectly! Although I was wondering if there's a way to get the comments to be on the same line as the share buttons (I have them both on the post-footer-line-1, but the comments part is showing up below)? I want my comments to be aligned to the right and the share buttons to the left.

Thanks!
Anne

Blog Decorator said...

Hi Anne,

To get them to display on the same line, you'll need to go into the layout part of your blog. You'll see the skeleton of your design there. Find the part where your blog posts sit, click on "edit" in the lower right hand corner and rearrange the elements in your footer there :)

If this doesn't work, then you might have hard coded your design too much for a simple drag and drop. In which case, you'll need to insert the code in a different part of your HTML code. You'll need to look for the part where the comments are in your footer in your blog HTML, look for the opening and closing tags of that widget, and then place this code before. Make sure you hit preview first so that you don't accidentally break anything :)

For your specific blog, if it's saying it's all on post-footer line one, you might need to delete div class='post-footer-line post-footer-line-2' all the way through the ending end div tag, including all the brackets before and after (I can't post it here or it will break the comment). Again, make sure to hit preview first!!! You could also try adding a div align='right' code into your comments widget to see if that puts them in where you're wanting (You'll have to end the div align left from the share buttons, then add the div alight right to the comments and end that as well.

Hope that helps! Let me know if you have questions, and sorry for the super long reply :)

Lena L said...

hi Tiana!
i'm so late to find this tutorial post but wanted to thank you for this beautiful work.
this works perfectly well for my blog and makes a huge difference.
thank you so much! xoxo

http://www.lenallure.com

Bree Tany said...

do u also have button for tumblr ? thank u..

Blog Decorator said...

Hi Bree - Yes, I do also have a Tumblr. But your Blogger profile isn't set up to receive emails. So, as I've mentioned before in the post and in the comments, you'll need to email me in order for me to send it to you. I can't put code into a Blogger comment.

Persis Shah said...

Hi Tiana,

Thank you for this tutorial. I have customised and added these images to my blog design here http://atfirstblink-coldmountain.blogspot.in . I was wondering if there was any way through which I could get these share buttons, and the 'labels' (label 1, label 2) to show up in the same line. So that the labels could be on the far left and the custom icons at the far left side under the blog post but all in one line.

Any help with this would really be helpful.

Thanks once again.

Loves, Persis.

Blog Decorator said...

Hi Persis - Look up above at the comment I wrote to Anne, you'll need to do the same thing (Sorry, it was a long comment and I don't want to write it all out again!) :)

Persis Shah said...

Hi Tiana,

Thanks for your reply. I tried all the methods you have suggested Anne, but somehow am unable to get the comments, label and icons in one single line.

If it's not too much to ask can you please take a look at my blog http://atfirstblink-coldmountain.blogspot.in and suggest an alternative? If not, then that's okay too and thanks once again for this great tutorial and taking the time to answer all queries :)

Persis.

Blog Decorator said...

Hi Persis - Well, I'm in a bit of a conundrum...

I was going to offer to go into your design and make the changes for you, but then when I visited your site, I found that you are actually a fellow designer who sells premade Blogger templates! I can't really offer to fix your template for you if you're going to then sell that design in competition with my own, and claim all the work and profits as your own. Especially when the problem lies with your footer, and not my tutorial.

I am aware that other designers are probably using this tutorial, but I can't really in good conscience do all the "heavy-lifting" work of getting your design to show it exactly how you want it to when my original tutorial has done it's job of getting the share buttons to be customized.

I'm really sorry. I'm trying to be nice, but it just doesn't make good business sense for me to take my own free time to educate and help out my competition! I'm glad you got the share buttons to work on your site, and I hope you'll be able to figure out how to get your footer to display the way you're wanting for your template. Please don't take it personally, but I won't be able to help you.

Amy Neal Larkin said...

Hey Tiana! I really appreciated this tutorial. Much like a lot of the other bloggers, I couldn't figure out how to create my own share buttons. Thanks so much for this tutorial!
Also much like the other bloggers, could I get the coding for Tumblr and Google Plus, please? That would be super helpful. Thank you!
-Amy

Amy Neal Larkin said...

PS: (so sorry) here's my blog - fastest way to find how to contact me.
http://glitterinmytea.blogspot.com/2013/08/contact-me.html

Persis Shah said...

Hi Tiana,

It's no problem at all if you can't help me any further. I apologise if I didn't tell you earlier on that I am a self taught blog designer. I really had no idea that the tutorials were only meant for non designers. If I had any bad intention in mind I could easily have written to you from another id and shown you some other template instead of my commercial design. Like I said.. I had no idea about the limitations of your tutorials.

In all fairness I would like to say that it is a bit of a grey area since one cant lay claim to html coding which forms the crux of all blog designs, one can certainly lay claim to their creations and while I may have used the html codes from your tutorial to learn to change share buttons to images, I have not used any of the images created by you on any of my commercial templates.

I hope you will appreciate this and I once again apologise for taking your time. We both may be fellow designers but the blogosphere is huge and there is plenty of work for everyone. You can rest assured that I will never knowingly intrude in your work space. Wishing you all the very best and my sincerest apologies for asking you to take out time in assisting me with this tutorial.

Regards, Persis.

Blog Decorator said...

Hi Persis,

Oh, other designers can use my tutorials (so don't feel like you can't use this one!), I just can't take the time to help out my competitors when the problem isn't with my tutorial but is with something else (in your case, the problem is with the layout of your 'post-footer' section, not the share buttons themselves).

I really do appreciate you using your own images and being transparent about which site you were using and everything. So thank you for that! I wish you the best of luck in getting your template the way you'd like - As a self-taught designer myself, I do know how important online tutorials are, so you are welcome to use it. I'm sorry if my comment wasn't more clear. I didn't want to call you out for using the tutorial! I just wanted to explain why I couldn't take the time to fix your footer myself.

P.S. You might find the following tutorial helpful... http://www.blogbulk.com/2009/02/moving-elements-in-post-footer-labels.html

Persis Shah said...

Dear Tiana,

Thank you for your positive response and for guiding me towards blogbulk. Really appreciate you taking the time out for this. All the best :)

Persis.

Stefanie said...

OH MY GOODNESS that you SO MUCH for posting this! I have been trying to fix this for HOURS and it finally works!! HOORAY!!

Tyler Mahan Coe said...
This comment has been removed by the author.
JayBee Qadri said...

This was great and very helpful! I uploaded my own share buttons on a draft post and copied and pasted the image url in the img src tag. Worked like a charm. Thanks! :)

kimberly alaniz said...

Thanks, it took me a minute but i did it! I love it!

Elizabeth said...

Thanks so much! Worked perfectly.

Priscillia Putri said...

thank you so much, it really really works for my blog.

Qumber Rizvi said...

Hey,
Is there an option to remove these share buttons from specific pages..
My blog is http://qumbr.com
I want the buttons to appear on posts but not on pages..
Please help. Thanks :)

Blog Decorator said...

Hi Qumber ~ In a previous comment to Alex, I explained how to remove this code from the home page and only have it display on post pages. The same tutorial should be able to help you do what you're wanting :)

Qumber Rizvi said...
This comment has been removed by the author.
Qumber Rizvi said...

I guess it ain't working.
Any other way..?
Please have a look and help.
www.qumbr.com
Thanks :)

Blog Decorator said...

Hi Qumber,

Take a look at these two tutorials and see if one of them might be able to hide it for you - you don't necessarily want to hide your sidebar, but if you edit the HTML code, you should be able to get it to just hide the post footer from your pages. Hope that helps! (PS. Also, I noticed you used the share buttons but also had your own for Google Plus added on - There's coding for Google Plus as part of my share buttons as well if you want them all to match!)

http://www.bloggersentral.com/2010/02/apply-different-layoutstyling-to-static.html

http://forums.bloggerplugins.org/topic/hiding-sidebar-and-footer-on-static-pages/

Qumber Rizvi said...

Thanks Tiana :)
Your help was great..

Carissa Anne Holiday said...

SO sorry! I have read through all of these posts, found a similar problem to mine, as well as your response. However, I've tried all the options to "fix" the problem and the buttons still don't show for me. I've tried inserting the code after the first set of footer div's, as well as the second. I've also tried adding an html widget with the code, but still nothing works. Anything you can recommend is greatly appreciated...Been searching for WEEKS and have been completely disappointed in the button options...UNTIL I FOUND YOURS!

Carissa Anne Holiday said...

My goodness, sorry again! My site is carissaanneholiday.blogspot.com. You can email me at carissaanne2@gmail.com. Thanks!

Blog Decorator said...

Hi Carissa - I sent you an email :)

Heather Blaise said...

Thank you!!!! It worked.

LindsayB said...

Just wanted to say thank you!!!! I love this update to my blog. Much improved and appreciated for all your hard work!

Coco N said...

I used this on my blog. Thank you for this post. Very helpful! You're the best!!!

KIR Douven said...

Hi! Awesome tutorial but I have a problem... When I click on my post, both the default share buttons and these buttons are there. How do I get rid of the default share buttons? [ http://kirdouven.blogspot.com/2014/01/warna-cermin-apa-sih.html#.Usk43dIW3E0 ]

Blog Decorator said...

Hi KIR - In my post I gave instructions on how to delete the original share buttons. Did you try that?

If you did and it didn't work for you, you'll want to remove them from your hard coding. Like I've mentioned before, I can't paste HTML code into a blog comment, so I can't give you detailed instructions unless you email me (and if you do email me, I won't be getting back to you until tomorrow, because Sunday's are my day off). If you want to try tackling it on your own, you can look for the code 'post-share-buttons' in your template and remove it entirely, starting with the first 'div' tag and all the way through it's ending 'div' tag. Make sure you hit 'preview' before you hit save!!

If you can't get it to work, go ahead and email me and tomorrow I'll look at your specific coding to let you know what you need to do.

Summer S. said...

First let me say that I love this simple design. Works perfectly with my blog. This being said, it doesn't matter if I have it on the main page or the post page, it still posts the entire blog "in general" and not just the one post :/

Blog Decorator said...

Hi Summer - You didn't leave me with your email to contact you, and your blog is set to private. So I'm afraid I won't be able to help you troubleshoot.

If you email me, I should be able to help you out tomorrow, since I take Sunday's off.

Samantha. said...

INCREDIBLE!!! I am so incredibly grateful!!! THANK YOU!

Rebecca Fraser said...

Hi I tried searching for the Post footer code but nothing came up? Any chance you can help me please?

Blog Decorator said...

Hi Rebecca, I sent you an email. To anyone else who might have the same problem, here's what I would recommend:

When you searched for the code, are you sure you put your cursor inside the "edit" box, rather than just searching the whole page? Blogger changed it so that you actually have to click inside the HTML before searching, otherwise it won't search the template HTML (annoying, I know).

Blog Decorator said...

Update: I underestimated how popular this post would be! I feel like I've answered all the questions people might have with this tutorial, so I'm turning off the comments for this post. Please read the ENTIRE tutorial step by step, and then read ALL the comments if you are struggling with this tutorial. If you've tried everything and you still can't get it to work for you, then you can email me and I'll see if I can help you. MAKE SURE YOU GIVE ME YOUR SITE URL in your email, otherwise I won't be able to see your code in order to help. I don't mind helping, but please respect my time by only requesting help if you have honestly tried everything else first.

 

Facebook Fans

Connect with Us

Search Away

Get Our Button

THE BLOG DECORATOR

Subscribe by Email