Adding Social Media Icons

Adding social media icons is a cinch if you just have the know how. My problem before today was the know how. So, to save others the hours of research it take for me to figure out the html, here’s a quick tutorial on how to add those beloved icons to your layout. Keep in mind I am NOT a blogger expert. I’m just sharing what I’ve learned in an effort to help others along the way and remember in case I ever decide to change my layout in the future!

How to Add Social Media Icons to Your Blog on Blogger:

1. Download and save the social media icons you would like to use on your blog to your computer. There are many free icons out there to choose from. Web Design Booth or Web Design Ledger are too good places to start looking. Or, you could even right click on the above icons in this post and “save image as…” if these icons meet your needs and are to your liking. Basically, all an icon is before adding the html is a picture so any picture would technically work. However, since we are talking social media here, it’s best to stick with icons others will easily recognize also.

2. Okay, now that you’ve saved the icons to your computer you wish to use, now open a Photobucket account. Photobucket is a free image hosting website. Make sure when you open your account that you set it to “public.”

3. Download your social media icons to Photobucket by clicking “upload now.”

4. In a separate window, open your blog. Go to design in blogger and select layout. Click “Add Gadget” to the location you want to add the icons. Select the “Html/Javascript” gadget.

5. Now, go back to your Photobucket window. Select the album from “My Albums” in which you saved your icons. Select the first icon you want to input on your social media bar. Click on the html code. Clicking the code will automatically copy it to your computer’s clip board.

6. Return to your blog gadget window. Paste the html code on your gadget content window. The code should look something like this….

The first web address is the link you want the icon to take your readers too and the second web address is the address of your icon. You will need to change the first address to the link of your desired web page (in this case Facebook page).

Note:

For an email link, the web address is:

mailto:youremailaddress@yourhost.com

For a subscribe via email link, the web address is:

http://feedburner.google.com/fb/a/mailverify?uri=yourblognamenospaces (i.e. mine is cornerstoneconfessions)

For a RSS feed, the web address is:

http://feeds.feedburner.com/yourblogtitle

(If you haven’t already added an RSS feed to your blog I’ll try to explain this in a future post so check back).

7. Repeat steps 5 and 6, adding each html code below the last in your gadget content window until you’ve added and edited all the icons you want in your icon bar.

8. Decide if you want to add a title to your gadget or leave it blank. I have chosen to leave mine blank as whatever title you give it will be posted on your blog and in this case I think the icons speak for themselves. But others choose to title them “Follow Me” or “Stalk Me.” It’s totally up to you.

9. Click save and that’s it. View your blog and check out your new Social Media Icons. You did it!