Social Icons are very important on your blog. You can set up gadgets and widgets galore, but users look for those happy social icons. It’s a typical blogger user interface. If you don’t have them you become harder to reach and you want to be able to be reached. As an example, each week Alison and I set up the #FF post. Each week Alison or I if she’s busy, look for bloggers to feature. This past week it was my turn and I went to five blogs before I actually found a blog with contact information that I could locate easily. All of these bloggers are relatively new bloggers – so there is a learning curve, but really the fact that five blogs had no contact info is crazy. What if an author wants to get in touch with you? Or your reader, or a blogger that wants to give you free publicity. Common sense, you would think.

This is where I come in, to teach you how to set up social icons on your blog.

Today we will be using these icons for our tutorial. Download them here.

socials

Setting up Your Social Icons

1. Host your images on a free image sharing platform, I recommend Flickr, but any platform is essentially the same. The point is to turn your image into a URL

2. Once you host your images, get their URL. Easy way to get a URL, right-click on the image and scroll to Copy Image Url

Free Social Icons

3. An easy way to keep it in order is by copy and pasting the URLs into a word doc, this way I keep them all together

Untitled_2

4. Now it’s time to get your HTML ready, the HTML you will need is a simple link and IMG code, you will have one code string per image and link, the code looks like this:

 


<a href="http://www.twitter.com/parajunkee" target="_blank"  ><img src="https://farm9.staticflickr.com/8661/16676294140_719e3bf489_o.png" alt="Twitter" title="Twitter" border="0" /></a>

5. The above code shown is for just one image with one link. The HTML code that you will have to change is highlighted in yellow. Add your image URL you collected to the second highlighted area, insert your twitter username in the first highlighted snippet.

6. One of the challenges of this code can be the alignment, you have to copy this code over and over again for each image and link. Sometimes this results in uneven images, or weird alignments. I wrap the code with a DIV. A DIV is basically a box or a boundary. This is the same code with a div wrapped around it, new code is highlighted in yellow:

 


<div style="float:left;" text-align: center;">
<a href="http://www.twitter.com/parajunkee" target="_blank" ><img src="https://farm9.staticflickr.com/8661/16676294140_719e3bf489_o.png" alt="Twitter" title="Twitter" border="0" /></a></div>

7. Now all you need to do is repeat this code, insert your URL, the full URL (don’t forget the http://) and change the image URL, Title and Alt tag if you want to keep things organized. See the full code snippet with items you should change in yellow:


<div style="float:left;" text-align: center;">
<a href="http://www.twitter.com/parajunkee" target="_blank" ><img src="https://farm9.staticflickr.com/8661/16676294140_719e3bf489_o.png" alt="Twitter" title="Twitter" border="0" /></a></div>


<div style="float:left;" text-align: center;">
<a href="http://www.parajunkee.com/feed" target="_blank" ><img src="https://farm9.staticflickr.com/8661/16676294140_719e3bf489_o.png" alt="RSS" title="RSS" border="0" /></a></div>

<div style="float:left;" text-align: center;">
<a href="http://www.Facebook.com" target="_blank" ><img src="https://farm8.staticflickr.com/7600/16837809756_7e982b674c_o.png" alt="Facebook" title="Facebook" border="0" /></a></div>

<div style="float:left;" text-align: center;">
<a href="http://www.Bloglovin.com" target="_blank" ><img src="https://farm8.staticflickr.com/7639/16862652701_5a691bc1f1_o.png" alt="Bloglovin" title="Bloglovin" border="0" /></a></div>

<div style="float:left;" text-align: center;">
<a href="http://www.Goodreads.com" target="_blank" ><img src="https://farm9.staticflickr.com/8582/16862652681_e363da25ec_o.png" alt="Goodreads" title="Goodreads" border="0" /></a></div>

8. Finally, copy and paste your code into a Text Widget in your sidebar. This is what the above code will look like:

Twitter
RSS
Facebook
Bloglovin
Goodreads
[clearboth] [br] Things to keep in mind when creating your code:

  • Paste within ” ” quotes – this can drive you crazy if you forget one “
  • You can have as many social icons as you want, but if they are bigger than your sidebar they will automatically flow to the next line
  • You can use this code with any social icon images, just have the URLs of the images
  • If you want your social images to float right, change the float:left; to float:right;

Good luck and let me know if there are icons to are integral to book bloggers that I didn’t include!