4 Steps to Having Social Media Icons That Match Your Theme

Installing Theme Consistent Social Media Icons

As promised in my last post Don’t Just Share Your Posts, Share Your Blog, here are the instructions to installing your social media icons that fit your theme.

Step 1 Find the icons you’d like to use or make them.

These icons can basically be any picture you want, however, I suggest if you use your own pictures, be sure it’s easy to tell that they are icons and not just pretty pictures. Google search Free Social Media Icons and you’ll find lots of results for pages listing awesome icons where you can visit that site and download them for free. Once you’ve downloaded the package of icons, I suggest going through it and grabbing the ones you want and dropping them into another folder. I’m using icons found on http://webtreats.mysitemyway.com/tag/icons/ for the example below.

Step 2 Adjust the Size of the Icons

Use your favorite editing application to scale the icons. If you don’t own an application that does so, www.pixlr.com does a great job. The size of your icons are based on how many icons you’ll be using, how many rows you want to have and the width of your sidebar. If your sidebar is 200 pixels wide and you’re adding 4 icons per row, divide the 200 by 4 and you get 50 pixels per icon. Majority of these icons come with transparent space around them. Keep that space! Creates a nice even gap between the icons.

Crop those icons to 50×50, leaving a bit of area around them and save to a new folder. I named mine “cropped”.

Step 3 Upload to image host

WordPress users can use their blog’s media library.

Blogger users can use Photobucket or whatever host usually used for images.

Upload all the icons in a batch and copy and paste the URL to a text document for use in Step #4. In Photobucket, the url you’re looking for is named Direct Link.

Be sure to fill in the info boxes for each picture. Title, Alt text, Description. In depth descriptions not needed.

Step 4 HTML coding

In WordPress, head over to the Widget Area and add a Text Widget to your side bar.

In Blogger, head over to the Design area and add a HTML/Javascript box to your gadget area.

Copy the below html codes that you’d like to use into the widget/gadget area.

You can use any social media link, it doesn’t have to be the ones I’ve listed. These are just an example.

Replace the “Link URL” and “Image URL” per social media site. Be sure to paste it within the parentheses.

For sites like twitter and facebook, use this code:

<a href=”LINK URL” target=”_blank”><img src=”IMAGE URL” /></a>

(example: <a href=”http://www.twitter.com/VsAfterBedtime” target=”_blank”><img src=”http://afterbedtimeblog.com/wp-content/uploads/2011/05/twitter-bird2-square-webtreatsetc.png” /></a>)

For an email button:

<a href=”mailto:EMAIL ADDRESS” target=”_blank”><img src=”IMAGE URL” /></a>

For RSS Feed Subscription:

<a href=”RSS FEED ADDRESS” target=”_blank”><img src=”IMAGE URL” /></a>

For Newsletter Signup if you’ve burned your feed with Feedburner

1. Head over to http://feedburner.google.com/fb/a/myfeeds

2. Click on the feed

3. Click on Publicize tab

4. Click on Email Subscriptions (in the sidebar)

5. Scroll down the page and look for Preview Subscription Link…

6. Copy the link without the parentheses.

Code: <a href=”ADD The Link from #6 HERE” target=”_blank”><img src=”IMAGE URL” /></a>

Be sure to place each code one after the other, like this:

<a href=”LINK URL” target=”_blank”><img src=”IMAGE URL” /></a><a href=”mailto:EMAIL ADDRESS” target=”_blank”><img src=”IMAGE URL” /></a><img src=”IMAGE URL” /></a><a href=”RSS FEED ADDRESS” target=”_blank”><img src=”IMAGE URL” /></a><a href=”ADD The Link from #6 HERE” target=”_blank”><img src=”IMAGE URL” /></a>

I know it’s tempting to add as many ways as possible for people to connect with you. Be cautious only to add the profiles you use regularly. You want to connect with your readers, to be personable, so only install the icons that are part of your regular routine.

And That’s it People!

If you’re a “visuals person”, I’ve create videos of Step 1&2, Step 3 and Step 4. But I screwed it up and it won’t play audio or it ends up being fuzzy. Not sure what’s up. Have to read the bloody video capture manual I guess. I’ll be sure to re-do the videos and upload them as soon as I can. They will be in a new post, so if you’re interested in seeing the videos, please subscribe to the Newsletter and you’ll get it in your email box when ready.

If you found this post helpful, please share via twitter, facebook, stumble upon, linkedin, wherever.

THanks!

UPDATE: The Videos can be found at The Movies: 4 Steps to Having Social Media Icons That Match Your Theme