When you start a web site or blog it is almost a default next step to create accounts at various social sites to reach a wider audience. This is a great way to share unique content in these social circles to engage with users there and perhaps attract them to your site.

Also, many people who visit your site will want to stay up to date with what you have going on. They may have a particular tool that they like to do that with, be it Twitter, an RSS reader, Facebook, etc. Or they may want to “follow” your site on all the social circles in case you share unique content on each platform. So, it is common to see “subscribe and follow” type boxes on web sites that host icons with links to the various social profiles.

Subscribe and Follow sidebar box

There may be links to: a Facebook page or profile, an RSS feed, an email subscription form, a Twitter profile, a YouTube channel, a Google+ page or profile, a Pinterest profile, an Instagram or Flickr photo set or profile, a LinkedIn profile, etc.

In this article I will explain how to add these icons to your WordPress sidebar using a widget.

First, Gather Up Some Icons To Represent The Profiles

Assuming the profiles and pages are already setup, and you have the URLs to them handy, lets download an icon set to use for the links.

One place I like to go for free icons is this Icon Search Engine. You can search for any icon that you want and specify that you only want “free” results listed. There are other sites too that will let you download an entire matching set that are similar in size and style to eachother, rather than having to find them one by one.

Now, The Code To Display The Icons And Social Links

There are many methods for doing this, some easier than others. Here is an approach that I have used for a long time and have carried from one site to another. It involves placing some HTML (that revolves heavily around CSS for display) into a sidebar widget. I will display both sets of code (the HTML and CSS) below.

For the sidebar widget:

 


<div class="side-social">
<p>
<a href="http://sociallink.com/socialpage/" target="_blank" class="fb"> </a>
</p>
</div>

<p><br class="ss-clearer" /></p>

 

 

You would just create new “paragraphs” for each profile/page you want to link to. Name the class whatever you like, then be sure to include the path to the correct icon/image in the following CSS. As you can see in the above, I used a class called “fb” which will be used for Facebook.

 


.side-social {
    margin:0;
    padding:0;
}

.side-social .fb {
    float:left;
    margin:0 3px 0 0;
    background:url(http://website.com/images/socialicons/facebook2.png) no-repeat 0 0;
    width:33px;
    height:33px;
}

.ss-clearer {
	clear: both;
	line-height: 0!important;
	font-size: 0!important;
	height: 0!important;
}

 

 

The above CSS (the second line) can be repeated for all social accounts you plan to link to. That example is for Facebook. You would need to modify the path to the actual image. Plus, in the example above the height and width used for the images (icons) are 33 pixels each. You can modify those if yours are a different size.

Place the CSS is a custom style sheet if one is provided for your theme.

I did it in reverse order for this demo, but placing the CSS first is a smarter idea.

Video: Demonstrating Icon And Link Placement

Watch the video to show how I add the icons and links for my social profiles one by one.