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"
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.
Pin It!
Like It!
Tweet It!
Stumble It!
Email It!
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 :)
ReplyDelete