First things first, you need to download your icons and save them wherever you store the images used on your blog..... Picasa Web Albums, Flickr, Photobucket, etc. It's a bad idea to link directly to the site offering the icons because you will end up with a broken link if the image is ever moved or deleted.
Now it is time to write the button code. To make the code easy to understand, I have dissected it into it's essential parts. Please click on the image to make it larger.
Anatomy of a Social Media Button
- Inside the <a> tag, you link to your social media profile page using the href attribute. href="URL of your social media profile"
- Add target="_blank" to open the link in a new browser window.
- Inside the <img> tag, you link to your social media icon image using the src attribute. src="URL of your social media icon image"
- Add height and width attributes to specify the size of your image in pixels. This is where you resize your icon to fit your blog. You can make the icon smaller, but I would not recommend going larger than its original size. height="height in pixels" width="width in pixels"
- The alt attribute is required in the <img> tag. It specifies alternate text for an image in the event the image cannot be displayed. For example, the user has a slow internet connection, or in the case of a blind person using a screen reader. alt="text describing what the button does"
OK! OK! You can think of me as one of those meanie school teachers who wanted you to understand the material instead of just memorizing it! NOW that you understand the parts of the code, you may copy and paste, and fill in your info where appropriate.
<a href="URL of your social media profile" target="_blank"/><img src="URL of your social media icon image" height="desired height in pixels" width="desired width in pixels" alt="text describing the button"/></a>
<a href="URL of your social media profile" target="_blank"/><img src="URL of your social media icon image" height="desired height in pixels" width="desired width in pixels" alt="text describing the button"/></a>
Add Your Buttons to the Sidebar in Blogger
- Open the Dashboard and click on your blog's name.
- Click Layout located in the list on the left side of the screen.
- Click Add a Gadget located above the sidebar.
- A new window will open. On the Basics tab, scroll down to find HTML/JavaScript and select it.
- Add a title if you want one. In Content type your button code as shown below.
- Click Save. Back in the Layout screen, drag your new button gadget to the location where you want it in the sidebar. Click Save Arrangement in the upper right corner of your screen.
And that is it! Don't hesitate to shoot an email if you have questions.
Thanks for this great tutorial Kirstin!
ReplyDeleteGreat tutorial! Sarah @ dwellonjoy.com
ReplyDeleteI used the titanium ones for my blog. Thanks so much for the tutorial! I never would have figured this out on my own.
ReplyDeleteThank you SO much for this tutorial. I've tried to add social media buttons in the past and have just given up...until now. I added them successfully thanks to your clear explanation. :-)
ReplyDeleteWhat great info. I just did my own buttons yesterday for the first time. These look way better then the ones that you get from facebook and twitter. I have a link party on Wednesdays, and I would love it if you would link this post. It is called Wednesdays Adorned From Above Link Party.
ReplyDeletehttp://www.adornedfromabove.com/2012/08/pink-honey-beeswax-lip-balm-and.html
I hope to see you there. Have a great Day.
Debi Bolocofsky
Adorned From Above
www.adornedfromabove.com
brilliant, thank you!
ReplyDeleteWill eventually do this for my blog, now I know how! :)
Thanks so much for the tutorial! It's something I have wanted to add to my blog a long time ago.
ReplyDeleteLynn
Great post and tutorial! Thanks for sharing at the Pomp Party! Pinning to our Pomp Party board!
ReplyDeleteThanks for the help. Thanks so much for linking up at One Creative Weekend! Enjoy your weekend.
ReplyDeleteGreat tutorial, I've got mine all set up now. Thanks for sharing!
ReplyDeleteTerrie - HearthandWhimsy.com
Useful tutorial thanks! for posting
ReplyDeletecustombuttonco.com
Kirstin, you are amazing!! Super sweet for offering the icons.. and DOUBLE sweet for the tutorial!
ReplyDeleteThanks for sharing this at The DIY Dreamer.. From Dream To Reality!
What a great post!! Thanks. I would like to invite you to enter my HomeGoods 50 dollar gift card giveaway. The card can be used at TJ Maxx and Marshalls as well.
ReplyDeletePlease visit my site to enter :)
This is absolutely fantastic! I have been looking for buttons everywhere. Even tried making my own, but didn't love them.
ReplyDeleteThank you thank you!!
Dani - www.inspiremotivatelove.com
Thanks for the social icons and the tutorial. I choose the Pink Flambe ones for my blog and I have design my own YouTube and aNobii icons in pantone.
ReplyDeletehttp://la-casita-de-cristal.blogspot.com.es/
wonderful thanks!!!
ReplyDeleteDo you use a hosting company? Im just starting out and not sure what to do or what I want to do..im so crafty and artsy... this is what I have so far for anyone who could give some advice(www.UniqueDesignsAndFinds.com) Also how do you get the tiny tiny Icon to show up on tabs at the very top og your browser or by the www in the address bar? meg_jones25-at-hotmail-dot-com
No hosting company, I just sat down and started playing around in blogger. I think your site looks great! The little tiny icon that shows up in the address bar is called a favicon. You can add one by opening Layout in your Dashboard. The favicon widget should be in the top left corner. All you do is upload a small, square image when prompted.
DeleteI love these buttons!! I am having a TERRIBLE time trying to make them work though (keeping in mind, I have zero clue about html code). I have tried uploading them into Picasa and couldn't get them to show up so then tried Photobucket and the links it gave me wouldn't display the image correctly (either a broken link image showed or there was still html code displaying after the image). Can you shed any insight?
ReplyDeletePlease email the code that you are using to me and I will take a look.
DeleteThanks Kirstin!! I enlisted the help of someone who knows MUCH more about html code than I do and he was able to make it work for me :) Thank you so much for the free buttons!!!
DeleteLove these. But what I love EVEN more is your buttons at the bottom of your blog post! The "pin it" "tweet it" etc - really very cool!
ReplyDeleteCould you post an idiot proof guide to doing those? And maybe email a link to grabaspoon(at)live.co.uk in case I miss it?
Thank you SO much in advance :)
Unfortunately, I put those share buttons in my footer, which requires editing the html of your blog template. It was very involved, with a lot of trial and error on my part, and at this point I don't even remember all the changes that I made. Not to mention, if somebody doesn't have a good understanding of html, they could really mess up their template. Sorry I can't be of more help. If you want to try it, google the following: add custom share buttons footer blogger
DeleteHi there! Thanks so much for sharing! This is very helpful and considerate of you! I kinda feel like a dork since it looks like all your other readers didn't have a problem installing the buttons, but I think I'm stuck on the source of the image. I tried using the URL that you have for each button through google docs and it doesn't seem to be working. Do I download and save each button on my computer first? If so, how do I get the URL after it's saved to my computer? Thanks so much again and I hope you're having a great weekend!
ReplyDelete- Julia {http://www.roastedrootfood.com}
I have the same question! I must be missing something here!
DeleteI just figured it out... upload the image to photobucket. click 'share' then 'links' and it will assign the image a url that you can then paste into the html code as the image source :)
DeleteHi Kirstin,
ReplyDeleteThank you so much for the wonderful social media buttons. I have been looking for something just like them but never thought I could put them on myself. With your fabulous tutorial I now have the best social media buttons on any blog out there. Plus, I feel like I learned something! That's always fun. You have a fabulous site. Thanks again for sharing your talent with the rest of us.
Aidan xo
www.conjugatingirregularverbs.com (if you'd like to see your buttons in action!)
Could these buttons be added to a WordDoc, like on a resume, perhaps? :) Thanks for the tutorial!
ReplyDelete-Courtney (www.415bond.blogspot.com)
I know you can convert a word doc to html to publish it on the web, so it seems you could do it. But I don't know the specifics. Sorry I can't be more help.
DeleteHi! Thanks so much for these buttons! I added them to my blog today. I still have a question though. How do I create a link for my readers to e-mail me using the button? I'd appreciate your help if you have some time! Thanks again!
ReplyDeleteDominique from gusto & grace
THANK YOU SO MUCH FOR THIS!
ReplyDeleteThis is great!
I too am curious about how to get people to email me from the envelope icon.
Also I really like your sharing icons at the end of the post. Can I use these icons for sharing instead of connecting? And if so- how?!?!
~Alicia from Love-ful (aliciamariechristensen.blogspot.com)
I will be writing a post on the email button very soon! Yes, you can use the icons for sharing, but it is much more complex and involves editing your blog template. I had to use several tutorials I found on the web and don't feel that I am qualified to teach it to anyone.
Deletehttp://www.craftiments.com/2012/10/how-to-add-custom-email-contact-button.html
DeleteThanks for this! wonderful :)
ReplyDeletehttp://photosbylmb.com
I have been looking at everyone's icons saying I want to do that with my blog, you're so sweet, Thank you for sharing!
ReplyDeleteThanks so much! This was very easy to follow and my buttons are up and running!
ReplyDeleteHi Kirstin - these are fantastic! I would love to use them on my own blog, but (of course) - I want to give credit where owed! When you say "link back to my blog" - how do I do that? IE, write a post saying I used these buttons, etc? I'm clearly new at this one (!) and my apologies if I am missing something very obvious. Thanks so much in advance, for any insight!
ReplyDeleteThank you! No need to link back if you are just using the buttons on your blog. That request is for bloggers who want to write a blog post about the buttons.
Deletehi thanks for the tutorial, I followed it step by step but now the button pictures are not showing up on my site..the links are fine but the icon pictures don't show up..please help..thanks!
ReplyDeletePlease email the code to me and I will take a look at it.
DeleteThank u so much! You are amazing in providing tutorials. I have no idea what I am doing, but just follow step by step and I can actually understand them! Thanks again!
ReplyDeleteIda
This was sooo awesome!! It worked perfectly and I semi-understood what I was doing, which is really quite impressive! THANK YOU!!!
ReplyDeleteThank you, thank you, thank you! A simply written tutorial. Love it! I have no excuse not to do this now!!!
ReplyDeleteI got all my buttons to work, except the email! Do you know what the HTML should look like for the email icon? Thank you so much for the cute icons and the user tutorial!
ReplyDeleteKaryn, check out this post:
Deletehttp://www.craftiments.com/2012/10/how-to-add-custom-email-contact-button.html
Hi Kirstin,
ReplyDeleteThank you SO much for your great tutorial and your other post with the pantone 2012 follow buttons. I had follow buttons that I've used for awhile but were no longer working (exactly because you stated, the images I had linked directly to another site). I was able to update my follow buttons and I like these even better than what I had before. This was so very helpful and I really appreciate you sharing! Sharon
great post! Do you know how to add custom social media share buttons? I want my readers to click on an icon and be able to share my blog. Thanks so much!! Oh yeah I found your blog on Sverve :)
ReplyDeleteThank you so much! I have wanted to add these to my blog and your tutorial was so easy! An extra thank you for the e-mail tutorial, too. ;-)
ReplyDeleteI'll be hanging out here this weekend, figuring out how to add my social media buttons. Disappointed people got greedy with your icons, they were so cool. I had hoped to use them. At least I get to use your tutorial :)
ReplyDeleteThank you so much for this tutorial! I love my new icons! :)
ReplyDeleteBlessed Bashert
Hi there, I'm really struggling with this. Your tutorial is extremely well written and I'm sure I'm doing something very obviously wrong but I can't work out what. Tried Flickr and Photobucket to save your images and still same problem. Nothing shows up on Blogger (After saving)
ReplyDeleteAny help you could shoot my way would be amazing. Thanks so much :)
Thank you so much for this blog! made my life a whole lot easy! And i used your rose smoke social media icons! will be definitely recommending you :) xxx
ReplyDeleteThank you so much! I've been trying to figure this out forever! It's perfect!
ReplyDeleteHiya! Thankyou so much for this post, I really had no idea how to put social media icons on my blog up until now! I absolutely love the free icons you created and have used them on my blog! :)
ReplyDeleteCourtney - from www.styledbycourtney.blogspot.com xx
Hey! this post is amazing and really helped me, I've written a blog post about it with a link to both your blog and the free buttons post, basically saying thank you... so thank you!! haha xoxo
ReplyDeleteyou can check it out here- kaskainwonderland.blogspot.co.uk/2013/09/ooo-i-want-some.html
mine doesn't work :( the image is not showing up, it's just a question mark. please help!
ReplyDeleteMichelle, I can't email you personally because you are a no-reply blogger. Please send the code you are using to me via email and I will take a look. Thanks!
DeleteMany many thanks I used your icons successfully!
ReplyDeleteThank you so much! You are a life saver!
ReplyDeleteHoly cow! This is by far the most helpful tutorial I've found on this subject. Thanks so much for writing it. I really appreciate the actual explanation of the HTML as so many sites just chatter about it and never really explain it as simply as you have.
ReplyDeleteI'm trying it out right now. Wish me luck! Thanks again!
They worked! I can't tell you how much I appreciate you digitally holding my hand through this. Wow. I'm headed to bed with a serious sense of accomplishment!
ReplyDeleteOne question: what do I plug into the place for the social media site url when I want to use the email icon? Thanks again!
Thank you so much. I have been searching for a tutorial like this. You were so helpful and you made it so easy.
ReplyDeleteThanks! These are great!
ReplyDeleteHelp! Where do you get the url for the social media icons?! Am I missing something or just totally thick when it comes to HTML?
ReplyDeletethanks for the awsome tips. i've managed to make the first twitter tab and link it up but the image isn't showing up, just a blue question mark - any ideas what i've done wrong. i'm linking to a flikr image of a twitter logo.
ReplyDeleteI know that this is an older post, but I still wanted to thank you for everything you share here. I am working on reformatting my blog and don't know much about HTML. Your tutorial worked awesomely and I love your buttons! Thanks for helping me out.
ReplyDeleteThis was a great and easy tutorial to follow. I have one question. I would like the buttons to line up in a row, rather than stacking on themselves. How do I do that?
ReplyDeleteI've also tried uploading my icons to a Picasa web album, and experimented with adding only one to my sidebar which is not showing up correctly. Am I suppose to share the album on Google+? Also when I click on the image within the album the web address does not show .png ending. I am so confused, and have endured this every time I've tried uploading icons.
ReplyDeleteWOW! I feel like a REAL programmer now! LOL! I never thought I would be able to do this. THANK YOU SO MUCH!
ReplyDeletei cant get the pictures to show up :( help!
ReplyDeleteThanks si much for these great social media buttons! I am still trying to figure out how to change the size, when I look at the HTML I do not see any width ir height! Thanks so much!
ReplyDeleteCathy
www.threekidsandafish.com
Thank you so much for sharing this and for your lovely buttons. :) They're now proudly displaying on my blog. :D
ReplyDeleteGreat tutorial although i have the same problem as some other commenters as the pictures won't show up.... Do you know why? Thanks
ReplyDeleteThank you so much for these buttons! Your tutorial really helped me streamline my social media links. And they almost look custom made for my site. Plus they were so easy to use. I appreciate your efforts so much!
ReplyDeleteHi, Thanks so much for this tutorial! It worked for me!! BUT I was wondering how I get the buttons to link to where I want them to go if that makes sense?! So how do I make the Instagram button open my instagram?
ReplyDeleteThanks x
Thank you for the tutorial and the icons. It took a little trial and error, but I did it! I could not have done it without your help.
ReplyDeleteThank you so much for sharing your time and talent, I had no idea how to do any of this so I rely on tutorials and yours rocked! I did it!
ReplyDeleteThank you Kristin.. I finally did it.. Can upload my social media buttons. But, I need to find the easiest way to have URL for social media buttons by linking to Photobucket. Voila, I can get my URL directly..
ReplyDeleteThanks for the icons. I use them on my blog.
ReplyDeletehttp://monicasclosett.blogspot.com/?m=0
just used this and loooooved it!! Thank you
ReplyDeleteThis is amazing! I'm so grateful for this :)))
ReplyDelete