Adding Social Media Icons to your Blog

As you have probably noticed, I am making a lot of upgrades to both my blog and online store. My newest additions are the pretty social media icons you can see to the right. Adding these icons to my blog took a lot of trial and error, looking at the source code for other sites and trying to figure out how to modify it for my site. Well in the end Dylan helped me and I FINALLY got it to work.  Since I found this process so difficult, I thought others might be going through the same struggles as me and perhaps I could save them some time and hassle. These directions are only for Blogger (Blogspot) blogs. So here we go:

Step 1:
Find some social media icons that you like. A simple Google image search for "social media icon png" will bring up a ton of options. Download the ones you decide to use. For my site, I am using a set called "Minimalist" that was designed by Zee Que at designbolts.com. You can get them here for free.

Step 2:
If you have your own website upload your images to your Public_HTML folder. This will allow you to access the icon at www.YOUR_WEBSITE.com/IMAGE_NAME.png. Obviously, you need to change YOUR_WEBSITE to the name of your site and IMAGE_NAME to the name of the image (likely something like Twitter.png or Pinterest.png).

If you do not have your own site to upload the images you can upload them to a place like Flickr where you can get a link the the specific icon image.

Step 3:
Go to your blog and select the layout tab. Then click on the 'Add a Gadget' in the area of the blog that you would like to place your icons. In the popup, select the "HTML/JavaScript add third-party functionality or other code to your blog" gadget.

Step 4:
Give this gadget a title if desired. Then you will have to type in a modification of the code given  below. You will need to add the text highlighted in gray between <a and </a> into the content box. The first example is for Facebook. In the text below, where it says YOUR_USERNAME you will need to change to text to reflect your Facebook name. You will also have to change/modify the link to access your icon image; replacing YOUR_WEBSITE with the name of the site where the image is stored and ICON_NAME to the exact name of the icon.

<a href="http://www.facebook.com/YOUR_USERNAME">
<img width="60/" title="Follow YOUR_USERNAME on Facebook" alt="Follow  YOUR_USERNAME on Facebook" src="http://www.YOUR_WEBSITE.com/ICON_NAME.png"/>
</a>

Here are the examples for Twitter and Pinterest for my site. Now following the directions above, just change where I have Ladybug Soapworks and my website and image name to the appropriate names for your site.

<a href="http://www.twitter.com/#!/LadybugSoapwork">
<img width="60/" title="Follow Ladybug Soapworks on Twitter" alt="Follow Ladybug Soapworks on Twitter" src="http://www.ladybugsoapworks.net/Twitter2.png" />
</a>

<a href="http://pinterest.com/LadybugSoapwork/">
<img width="60/" title="Follow Ladybug Soapworks Pinterest" alt="Follow Ladybug Soapworks Pinterest" src="http://www.ladybugsoapworks.net/Pinterest.png"/>
</a>

 

I hope this tutorial will help you to get your blog looking a little more professional, too!