Adding social media/networking icons to your site is standard for blogs nowadays and important for giving your readers the ability to connect with you and share you with others. What's even more fun than just adding boring old icons (did I say that?) is adding really cute ones that match your blog design and tastes.
Many blog designers will create custom icons to go with your blog if you order their services. You can find some adorable designs on Etsy that are very affordable (like $2!) However, if you are trying to be more thrifty when you are beginning blogging you can find FREE social media icons easily by using the search terms "social media icons" on your favorite search engine. And of course, don't forget your Pinterest button...Pinterest is your friend!
Free icons from April Showers
Here is a really nice list of icons at http://www.iconarchive.com
And here's an extensive list of places to find icons at Makin' Cute Blogs
How to install icons on Blogger:
- Download the icon set you wish to use (or right click and save to your desk top)
- If there is a .zip file, "unzip" it and open the folder (create an "icon" folder for easier retrieval)
- Decide which icons you wish to use and upload to a site like Photobucket to create the HTML code
- In Blogger Design add an HTML widget
- Copy and paste the image code of the icon you have chosen using the code from PHOTOBUCKET into the new HTML widget. Not sure how to use Photobucket? We have pre-hosted icons HERE. Click HERE to learn about rearranging and resizing your sidebar icons and buttons.
- Select (highlight) the icon image and click the link to button to add the link to the "social network" associated with the icon. For example, for a Twitter icon you will link it to your twitter URL (e.g. http://www.twitter.com/BlogGuidebook links to the @BlogGuidebook account).
- Drag and drop the widget to the location you prefer.
- Click Save (very important)
- Review how everything looks and you're done! (If you need help lining up your buttons please drop us an email and we will help you!)
****EXTRA TIP: There's an easy way to add a link to your email icon.
Use the BOLDED code: mailto:youremailaddress@youremailaddress.com in the LINK field.
 |
| CREATE LINK ICON |
ie. click on the email icon image, then click the CREATE LINK icon, and type in the mailto: plus your email address...make sense?)
Read our original post on Social Media Icons.
Thanks so much...but the April showers link is coming up as non-existent.
ReplyDeleteYou can still right click and save these icons for use.
DeleteAlways appreciate your tips doll.
ReplyDeleteBy the way--have you heard that my 1st novel is being released on Amazon.com tomorrow?! Check it out on my blog! Have a wonderful Cinco De Mayo honey! Kori xoxo
www.blondeepisodes.com
CUTE!! :)
ReplyDeleteFixed the Link to April Showers.
ReplyDeleteOh, thank you so much! I have been trying to make some simple links from my blog, but haven't been sure how... Now I know!
ReplyDeleteI might just try this!
Thanks for your comments! I'm glad it was helpful. Sorry that the link didn't work originally. Thanks Sarah for fixing it!
ReplyDeleteoh my gosh! I just found some more cute freebies: http://ritzydesign.com/freebie-web-2-0-social-icons-freebie/
ReplyDeleteCuties!
DeleteI've been trying to figure this out on my own all day but I still don't understand how to do Step 6+7! Can you explain that a bit more because I really don't like the way my buttons looks currently!
ReplyDeleteI need to work on some of mine. These will help.
ReplyDeleteThis is great!
ReplyDeleteI have blogger and I really despise the teeny, invisible share buttons they have at the bottom of each post. Do you have any idea how to change THAT?
Hmmm...that's a good question Luci! Never thought of actually changing them...I'm sure there is a way to enlarge them...but I think your best bet would be to delete them and create your own. Good luck! I'll see if I can find anything out about the change.
DeleteHow is it done for wordpress
ReplyDeleteI'll see if I can find a wp tutorial for you!
DeleteHere's a plugin for you...you can customize the URL to use your own image too...http://wordpress.org/extend/plugins/tipsy-social-icons/
DeleteHere's another plugin that might be even better...http://wordpress.org/extend/plugins/social-media-widget/
DeleteI find commenting on blogger blogs to be a PITA so I voted for moving to wordpress :)
ReplyDeleteCommenting isn't that hard to do, it's the annoying word verification. Turn it off already people!
Deletethanks for this post! will have to give it a shot...
ReplyDeleteHere's some more adorable icons...from Besotted Brand Blog: http://www.besottedblog.com/2012/08/free-social-iconsparcel-inpsired.html
ReplyDeleteThis is really Helpful!Thank You for the post :)
ReplyDeleteXo
This was extremely helpful, before I found this post I had NO idea what I was doing, and it all worked out well enough! I may have to change icons later on but for now I'm pretty pleased with even having working links on my blog! Thanks!!!
ReplyDeleteIt's easy to find more icons on the web for free, or check out Etsy for really cute affordable icons.
DeleteHello! I find your posts so helpful! I'm a fellow blogger and my blog is called "My Sweet Mission" wwww.My-Sweet-Mission.com.
ReplyDeleteI'd love to know how to make my icons line up horizontally instead of vertically when creating them? Any tips would be really appreciated!
Thank you,
Heather
Not sure what you're asking but I found this site that makes a vertical floating social media bar for you: http://www.floatingsocialmediabuttons.com/
DeleteI will check out your blog and see if I can figure your question out.
HI again Heather, I checked out your blog and I totally see what you mean. I want to email you an example of the code on from one of my blogs, as I can't add it in the comment section...the blog is www.differentdog.com
DeleteJust remember to not have center in between buttons and they should line up perfectly for you, also depending on how much white space is around the buttons when created. I got mine on Etsy.
Thanks for the info and website Sarah! I'm sure I can figure it out! :)
ReplyDeleteHi Sarah. Well, I did it. The problem was my icons were too big (48 x 48). When I used 32 x 32 icons, it worked perfectly! Check them out and let me know what you think!
ReplyDeleteThanks again!
Awesomeness! I forgot about that aspect...if you're using Firefox you can drag the icons to the size you need too (when you're in your sidebar).
DeleteSarah and Heather I still trying to figure out how to line the icons vertically. Help!!!
DeleteHi Julieta. I created a post (don't publish it though) with the icons in a row and with their URLs linked. Got the HTML code from that post and put the code on the side bar as a HTML gadget. Hope this helps.
DeleteHeather
My-Sweet-Mission.com
Thank you very much for you instruction :) I've been trying to do this for few hours... It took me 2 mins to successfully add social icons on my blog using your steps.
ReplyDeleteHello, I can't quite figure out where the link button is. I pushed the link button after highlighting the code and then tried to link it to my pinterest and facebook. That did not work. How do I link it?
ReplyDeletehttp://makingmemoriesofus2012.blogspot.com/
So thankful to have found your site :)
ReplyDeleteHi I'm trying to add a social media button to my website. They are located in my HTML code though, NOT in my side bar. How do I go about editing my HTML to add a button?
ReplyDeleteCan you share with me how to align them side by side... thank you!
ReplyDeleteThank you for this tutorial! I got it to work on my blog, and I love it.
ReplyDelete