When I first started blogging, it was about the same time as Twitter exploding and then Pinterest. Like a lot of other bloggers, I wanted to be able to add a social media area to my blog to direct people to my other sites, but for the life of me, I could NOT figure it out. This was around the same time that I was becoming more and more knowledgeable with HTML and CSS coding in general. But, this seemingly simple task had me stumped. Finally, many years ago, I finally figured it out so I thought I would share with those who may be interested. To clarify, this is to show your followers where you post in the social media world… it is not for having your followers share to their social media sites.

First, you’ll need to find the exact social media buttons/images you want to use. There are quite a few websites that offer free downloads of high-quality images, but here are two of my favorites:

1. designcrazed.org 
2. www.vandelaydesign.com

** Once you’ve found the icons you want to use, save them to your computer. **

Whether you use WordPress.com or Blogger, the next step is essentially the same. You’ll want to add a “Text/HTML” widget to configure your social media bar. The intention of this tutorial is to have your social media bar set in your sidebar or “widget” area. See an example of mine below.

The widget is aligned at the top of my sidebar, however, you can place yours wherever you’d like. Just be sure to add the coding below in a “Text/HTML” widget (Blogger & WordPress.com).

1. Once you have the icons you want to use, plan ahead on how you want to line them up and in what order. I’ll leave that up to you! 🙂
2. You’ll want to host the images with an image host such as PhotoBucket or Postimage.org. I prefer PhotoBucket. This is so your images are able to have a link associated with them so they can be used and sourced. This is how I learned so that’s how I am sharing. 😉
3. After you have uploaded the social media icons/images you’ve downloaded, copy the “direct link” from your hosting site for each image. It will start with “http”. Copy these codes in notepad, stickies, or word, etc., just for the time being so you can easily get to them in the next step.
4. Gather your social media site’s link for your profile page, i.e. the page you want your viewers/followers to be directed to. Copy/paste them into notepad, etc. for the time being.

As you’ll see from my media bar, I have 4 places where I’m social. You may have more. You may have less. The code listed below can be customized to meet your needs. NOTE: Copy the code EXACTLY as it’s listed below and edit with YOUR info.

<div style="text-align:center;">
<a href="http://twitter.com/USERNAME">
<img src="DIRECT LINK FROM IMAGE HOST"
title="Tweet Me @USERNAME!" /></a>
<a href="SOCIAL MEDIA PROFILE PAGE">
<img src="DIRECT LINK FROM IMAGE HOST"
title="PHRASE FOR THIS IMAGE" /></a>
<a href="SOCIAL MEDIA PROFILE PAGE">
<img src="DIRECT LINK FROM IMAGE HOST"
title="PHRASE FOR THIS IMAGE" /></a>
<a href="SOCIAL MEDIA PROFILE PAGE">
<img src="DIRECT LINK FROM IMAGE HOST"
title="PHRASE FOR THIS IMAGE" /></a></div>

• You’ll need to change what is in BLUE text to your info.
• Do NOT omit the ” “. These are necessary.
• Only change the details within the ” “.
• I did mine 2 across by adding a <br> after the second icon. Cater this to your liking and width availability within your widget. Simply omit or add the <br> as needed. Add it immediately after the entire code for the image to be right justified.
• You’ll notice I have phrases that appear when you hover over my images. You can customize this phrase to your liking, but I would keep it simple.
• Essentially, the coding above is 1) the link to your social media landing/profile page, 2) the link to the image you downloaded and then hosted, and finally the 3) Phrase
• Don’t alter this code or it may not work.
• Don’t create or omit any spaces or it may not work.
• WordPress.com will update your code in real time, so you’ll be able to see your media bar in action.
• Once it appears as it should in your widget/sidebar, click save and voila!

ENJOY your new social media bar!

If you have any questions or if you run into any problems, let me know. I’m happy to help!

~April