How to add cute social media buttons to your site
Many themes and templates already include a set of social media icons or buttons. But perhaps you don’t like the ones with your template, or perhaps you don’t like where they are by default and want to set up your own. Setting them up in a nice neat row can also free up valuable space on your sidebar. However, that can be pretty confusing unless you know what to do.
Fear not – all the code you need is below, and you can follow through the step by step for how to add cute social media buttons to your site, in the tutorial video. Do enlarge the video or show it full screen in high resolution so you can follow through. And before you know it, blog prettiness (and practicality), and social media followers can be yours.
<div align="center"> <form><textarea rows="21" cols="20"> <!--social media icons---> <center> <a href="http://FACEBOOK PAGE ADDRESS HERE" target="_blank"> <img src="DIRECT LINK FOR FACEBOOK ICON HERE" border="0" alt=" facebookicon"/ title="TEXT ON HOVER HERE"></a> <a href="http://TWITTER ADDRESS HERE" target="_blank"> <img src="DIRECT LINK FOR TWITTER ICON HERE" border="0" alt=" twittericon"/ title="TEXT ON HOVER HERE"></a> <a href="http://PINTEREST ADDRESS HERE" target="_blank"> <img src="DIRECT LINK FOR PINTEREST ICON HERE" border="0" alt=" pinteresticon"/ title="TEXT ON HOVER HERE"></a> <a href="http://GOOGLE PLUS PAGE ADDRESS HERE" target="_blank"> <img src="DIRECT LINK FOR GOOGLE PLUS ICON HERE" border="0" alt=" googleplus icon"/ title="TEXT ON HOVER HERE"></a> <a href="http://YOUTUBE CHANNEL ADDRESS HERE" target="_blank"> <img src="DIRECT LINK FOR YOUR TUBE ICON HERE" border="0" alt=" youtubeicon"/ title="TEXT ON HOVER HERE"></a> <a href="mailto:YOUR EMAIL ADDRESS HERE"> <img src="DIRECT LINK FOR EMAIL ICON HERE" alt="Click to email me" title="Click to email me"></a> </center></textarea></form> </div>
If you need to make your icons smaller so that they will all fit in one row, set the size using width=XXpx where xx might be typically 40-62 pixels, or smaller if you have a narrow sidebar or a lot of icons. The smaller the number = the smaller the icon.
Where to find some icons you like? Try these links:
- 3000 plus social media icons
- hand-stitched social media icons
- 18 ribbon social media icons
- 19 cute icons in a choice of colors – these are the ones used in the video. 19 different icons to chose from in a lot of colors. Why not mix and match and have one in each color to co-ordinate with your blog header?
March 28, 2013 @ 4:07 pm
Pinning this, great to reference.~di @ Musings
March 28, 2013 @ 10:03 pm
Cool, need to check out the video – thanks for sharing!
March 28, 2013 @ 10:04 pm
Does this work for blogger? It doesn’t show the icons… just the linkable text when I add it. Any ideas?
March 28, 2013 @ 10:24 pm
Hi Carrie – yes it should certainly work for blogger. I tested it on one of my old sites. Would you like to copy the entire code from your sidebar widget into an email and send to me, and I’ll look it over and test it…and a screen print if you can take one of what end result you get on your site. Email [email protected]
March 29, 2013 @ 9:06 am
Thank you for sharing! Pinned {from the Pin Me party} 🙂
March 29, 2013 @ 8:19 am
Just pinned this. Thanks to you!
March 29, 2013 @ 8:21 am
Btw, got you from Petals to Picots.
March 30, 2013 @ 7:59 am
Great tips! Pinned! I found you at Or So She Says–thanks for sharing! Happy Easter!
~Abby =)
March 30, 2013 @ 9:09 pm
I have been thinking about doing this on my blog so I really appreciate your post. Also looking forward to perusing your site here as I an leaning toward putting ads on mine but not sure where to start.
So nice stopping by to visit with you!
Kindly, Lorraine
March 30, 2013 @ 11:42 pm
Oh wow! I guess I won’t pay someone to do it! There it is! GREATTT tip! Really.
Come link up tomorrow morning on my blog??
XOXO
Isabelle
March 31, 2013 @ 6:28 am
Thanks for sharing this. I’ve been meaning to spruce up my site with nicer buttons! I am always so grateful when someone takes the time to share their experience with newer bloggers like me! Happy Easter!
I found you at the Sundae Scoop-
Kate @ Eating in the Shower
March 31, 2013 @ 3:49 pm
Visiting from Mop It Mondays! Thank you for this! I am pinning!!! If you would like to link up at my link party you are welcome to! It goes live at 5 am every Monday!
Happy Easter,
Shelley Robertson
http://www.piggyinpolkadots.com
April 1, 2013 @ 2:07 pm
I added you to the list SHelley
April 1, 2013 @ 9:39 am
I’ve “Pinned” so I can come back to this later! Thanks so much for sharing this tutorial!
April 2, 2013 @ 3:41 am
Very useful, thanks!
April 2, 2013 @ 8:23 am
So good to know how to do this myself (I’ve been hiring people to do the design work for me). Thanks for sharing! I’d love it if you’d link up to The DIY’ers link party. http://homecomingmn.blogspot.com/2013/04/the-diyers.html
April 2, 2013 @ 10:01 am
This is so helpful for newbies! I remember wondering how this was going to work on my site….and then tutorials similar to this really helped me. Thanks for sharing at Pinworthy Projects.
April 2, 2013 @ 2:20 pm
Thank you for posting this! I have been wondering how to add the cute one’s!
http://emilyandtylerglover.wordpress.com/
April 2, 2013 @ 6:42 pm
This is great!! I agree – having the buttons in a nice and neat row or grouping makes a huge difference on the sidebar! I’m kinda OCD and these play a huge part in my first impression of a blog! Thank you for sharing this!
I’d love for you to share this at the Pinterest Power Party – it goes live Wednesday at 5:00 pm {PST}! The link is below but it won’t be accessible until then… Hope you have a terrific Tuesday!
Danielle
http://www.sewmuchcrafting.com/2013/04/pinterest-power-party.html
PS – I found you at the Fluster Buster party…
April 2, 2013 @ 6:51 pm
Hi Danielle, thanks for the invite – I’ll be there. See you Wednesday
April 3, 2013 @ 7:40 pm
Thanks for linking up with us! Happy Wednesday!!
April 2, 2013 @ 7:21 pm
Oh this is awesome! I’ve been wanting to make a icon for bloglovin’. I’m pinning this! Found you on Fluster Buster’s link party! 🙂
April 2, 2013 @ 8:26 pm
Awesome…thank you!!!
April 2, 2013 @ 9:57 pm
Thank you SOOOO much for this! I was able to do it and it made my night!
April 2, 2013 @ 10:27 pm
Yay – well done. I am so happy to have helped. They look perfect.
April 2, 2013 @ 10:18 pm
Your posts are so helpful to me, and this one is no exception. Thanks for sharing! I’ve pinned this. I found you at the Hope Studios link up.
April 3, 2013 @ 9:08 am
I’ve been wanting to re-do my social media buttons. This post is timely. I’m now following you on twitter and pinterest. Pinning and tweeting this, too! Have a lovely day!
Neighbors About Town Blog
April 3, 2013 @ 9:25 am
Thank you for the publicity. I’m off to visit you now.
April 3, 2013 @ 9:11 pm
Thanks for this info!
April 3, 2013 @ 9:56 pm
These are awesome! Wish I had enough energy to play with these right now! Found you on the I Gotta Create party! Thanks for sharing these!
April 3, 2013 @ 10:54 pm
Your site is so relevant for new bloggers!! Kudos to you for helping. Thanks for coming to our Link Up Party at allthingswithpurpose.com!!
April 4, 2013 @ 9:49 am
Thank you so much for the easy “how to”. Love finding WordPress relatable information.
April 4, 2013 @ 12:55 pm
No blog is complete without social media buttons! Thanks for your tips! Thanks so much for linking up to Give Me The Goods Monday! Can’t wait to see what goods you bring next week! Jenna @ Rain on a Tin Roof
April 4, 2013 @ 8:19 pm
Great post! We would love for you to share this at our Kitchen Fun & Crafty Friday link party…just posted it! http://kitchenfunwithmy3sons.blogspot.com/2013/04/kitchen-fun-and-crafty-friday-link.html
April 5, 2013 @ 10:47 am
Thanks for the invite Jill – I’ll be at the party
April 5, 2013 @ 3:37 am
I have to say a HUGE Thank you. I just launched my buttons. The tutorial was easy too.
How about sharing this at Pin It Monday Hop Where you pin and get pinned (LINK). You can share up to 4 post. If you get a chance, I’d love for you to stop by and share your project with us. I hope to see you there.
Judy
http://www.pursuitoffunctionalhome.com/
http://www.kusinaniinday.blogspot.com/
April 7, 2013 @ 5:58 pm
Do you have to use photobucket? How else can you get the link? How do you put things on photobucket and find the link? That part is confusing to me.
April 8, 2013 @ 7:30 am
Hi Cindy – no it doesn’t have to be Photobucket, it can probably be any of the online photo hosting and sharing sites. The files have to be hosted online somewhere so that they can be ‘called on’ when your page loads to display the images. Once you have a photo account, you upload the images and then there will be an option to share. It will be here thatyou will find the various ways to share your images, and on will be a direct link which you can copy, starting with http://. If you need help, do use the email icon and drop me a message and I’ll be happy to send you a step by step video tutorial of exactly how I upload and find the link.
May 13, 2013 @ 2:26 pm
Hi, Deby! Your tutorial is awesome! I’ve made more progress with this project, now that I’ve found your helpful video and codes needed for installing in my widget. I’m having trouble finding matching circle icons that include the Hometalk button. I know it’s a new site, but where can I find the icon? Thanks in advance for your help (again!).
Kim @ Curtain Queen
May 13, 2013 @ 5:18 pm
Hmm, its a new one to me but I like the site a lot. I can make you a circular button using the Hometalk graphic – just let me know what color you want – send me the color code (or one of your other buttons to copy the color) and I’ll have it done in a jiffy. Use the email me link.
May 28, 2013 @ 10:07 pm
Thank you a million times over for the tutorial, Deby! I was struggling all day with adding social media icons to my blog (I’m not techy at all), and then I came upon your site with a google search–your instructions finally did the trick! I’m thrilled with the results. I’m signing up for your newsletter immediately…
May 28, 2013 @ 10:22 pm
I’m really glad I could help Joy – welcome to the team.
June 10, 2013 @ 3:47 am
Thank you so much for your tutorial Deby. Would you be willing to share which social media icons you used on your site? I love them, but couldn’t find them in the various lists that you shared.
June 10, 2013 @ 10:19 am
I found them in another good list of icons here: http://www.tripwiremagazine.com/2012/11/social-media-buttons-and-icon-sets.html.
June 10, 2013 @ 5:04 pm
Saved me looking them up – I couldn’t remember where I found them! I really must bookmark that page. Enjoy!
June 25, 2013 @ 5:17 pm
Wonderful! I was looking for this! You are great! Thanks!
July 17, 2013 @ 5:35 am
This is exactly what I need right now. Thank you for doing my research for me. Have a happy day, Deb!
August 4, 2013 @ 6:41 pm
Thank you so much for this post!
August 4, 2013 @ 7:06 pm
You are very welcome Amber
August 14, 2013 @ 6:51 pm
thank you so much! 🙂
October 7, 2013 @ 10:50 am
Your icons are beautiful! Do you know what font the bloglovin icon uses? (The one with the B and the heart, not the plus sign.)
October 8, 2013 @ 8:52 am
Hi Chelsey, no I don’t know and I’ve not been able to find the answer online. Are you trying to create a button for their site? It seems like most sets don’t have this button. Maybe this is a project for the future for the MMM site!
April 23, 2014 @ 2:12 am
Thanks !
May 19, 2014 @ 2:15 pm
This was magnific. I am really grateful for this. A few modifications and there you are! The buttons exactly as one wanted them to look and to work! May God reward you for your work and your kindness in sharing 🙂
June 3, 2014 @ 7:10 pm
Great tutorial! Thank you!
July 28, 2014 @ 12:08 pm
I’ve had so much trouble with this until I found your tutorial! Thank you so much! You made it so easy!
November 6, 2014 @ 3:36 pm
This was so easy to follow. Thank you so much for the amazing tutorial on both your blog and YouTube channel.
November 13, 2014 @ 12:33 pm
Thank you for making this so easy!!
December 2, 2014 @ 10:59 pm
I just have to thank you for your great posts! I’ve done several (very high-tech-to-me) things on my blog because of your help. Your explanations are always so easy to follow and well explained. I really appreciate your tips and your site. thank you!
January 13, 2015 @ 5:29 am
Interesting article, I recently found an interesting tutorial and that seems really nice… I find a very easy method described there, how can you make money with facebook… [link removed]
does not seem all that complicated and not have anything to lose …
has anyone tried this method? can anyone help me with some advice?
January 14, 2015 @ 4:38 pm
That link leads to the lamest, most unethical and least likely method to earn money I have ever seen. I’m assuming its your own link and you are trying to drive traffic there for some reason, but honestly, who do you think is going to fall for that! Stop wasting your time and do something genuine.
October 17, 2015 @ 12:25 pm
Deby thank you so much for excellent tutorial Abby from Just a Girl and Her blog recommend you.
Many thanks – already added few buttons.
Lyubov
December 2, 2015 @ 12:46 pm
Thank you for sharing this, so cool buttons, I’ll add this 😡 xoxo keep sharing this type tips.
December 7, 2015 @ 12:05 pm
How do add buttons or labels for your certain posts on sidebar? Ex a weekly series or something like that
March 12, 2016 @ 2:40 am
Hello, I was recommended this blog for adding social media share widgets, but it seems the code is gone 🙁 or is it just me missing it?
March 12, 2016 @ 7:26 pm
Hi Catherine,
Thanks for the comment, you pointed out a bug in the site which we’ve now fixed. The code is now on the page but to be honest, there are easier ways now to imbed social media icons such as using Jetpack or many good WordPress themes have them incorporated right into the them now. You can check out our article: Are you mobile friendly? for the themes we recommend. Like I said, the code here will work but I think there are easier and more elegant ways of doing it now. Guess it’s time for a new article on the subject?
January 14, 2017 @ 11:27 am
So excited to go try this!!