First of all, if you’re in WordPress, you have a few plugin options to make the process of adding social media icons to your blog very, very easy. There are numerous plugins including Social Media Widget and Floating Social Media Icon, among others. If you’re using the awesome premium Genesis Framework and theme, I highly recommend Simple Social Icons. WordPress users with Thesis can also use the Simple Social Icons plugin.
So with all of those options for WordPress users, this guide is mainly for Blogger folks.
First, you’re going to have to find some icons that are okay for you to use on your blog.
• http://www.noupe.com/freebie/50-free-social-media-icon-sets.html
• http://too-much-time.com/2013/01/a-bunch-of-free-social-media-icons.html
• http://social-icons.com/50-free-social-media-icons-mixed-designs/
Make sure to click through and see the rules for usage. Some ask for a link back, some ask for nothing. Make sure you’re doing what you’re supposed to.
So once you have decided which icons you want to use, get them each on individual files on your computer. If you download them, that’ll work. You can also do the screenshot/crop method. Whatever works, just get them onto your computer. Then, upload them to Photobucket or a like service.
Once you have your images uploaded, you’re going to want to attach links to the image codes so that when a person clicks on the social media icons, they take them to the proper place.
Here’s how to get the image link from your Photobucket account after you have uploaded and clicked the “Library” menu option:
Do that for each image to get the codes for all of your social media icons.
The HTML code with proper link for each button will look like this:
Copy and paste the code from the box below for easy use. Just replace with your links where shown!
Create all of those pieces of code in a Word or Notepad document so they’re ready for copying and pasting!
Now you’ve got several sets of HTML code, each one is a piece of code that will display a social media icon that links to that site when clicked. Now what?
Well, here’s the good news: you’ve already done the hardest part! Now all you have to do is head to the layout section of your blog, and add an HTML gadget wherever you want your social icons (typically toward the top of the sidebar) to be.
All you have to do from here is copy and paste the HTML code pieces that you created earlier. Don’t press enter when pasting if you want the on the same line. If you only have a few icons, they should all fit on one line. There is a bit of trial and error here if they don’t fit the way you want them. You’ll have to re-size each icon (I use Paint) and try again. You’ll get it though, and it’ll be worth it! If you’d like to center the icons, add a center tags like this:
A couple of notes:
• when re-sizing the icons, you won’t be able to go bigger without compromising quality
• try and choose a set of icons that compliments the look of your site while standing out just a bit
• try and estimate the total size of your icons so you only have to do this once
So there you go! Hopefully this helps make the placement of your social media icons a breeze!
Google+ | Twitter
You. Genius. Thank you!! My icons are HUGE though…can you explain how to resize using paint?
Thank you!
Ok, to shrink them on a PC computer, open the icon image in Paint. Click re-size from the top menu and change pixels to like 50. Generally, Icons are right around 50×50 pixels.
Here’s a pic I Tweeted to you: https://twitter.com/MorefromUrBlog/status/325670114647224320/photo/1
thank you so much, it was very useful!
xoxo
Coco et La vie en rose
Coco et La vie en rose on Bloglovin
Coco et La vie en rose on Facebook
No problem!
Adding social media buttons was without a doubt the hardest thing I have done so far on my blog. I tried and I tried and I tried and I couldn’t get it to work til I tried yours! Thank you so much!!
Oh awesome! Glad it helped! 😀