WordPress

Add social bookmarking icons to your sidebar without using widgets

As social bookmarking sites such as Twitter, Facebook and Linked in become more and more popular, these days, I find myself being asked to make adjustments to several WordPress websites by adding social bookmarking links and icons to the sidebar. After 2 such web updates this week, I was asked by a friend to send me the code so that they could add it to their site. So instead of doing the work and sending it to him, I thought I would share it with you all.

The following examples are just code snippets that you can add to your sidebar.php template file. These snippets will not work if your website use sidebar widgets. (That’s not exactly true, but it’s a bit more complicated.)

The first example is very simple and can be seen live on the kitsilano.ca website.

First you’ll need to edit your sidebar.php template and add the following lines of code:

<h2>Follow Us</h2>
<ul>
	<li class="rss"><a href="[insert your rss link here]">Get our Feed</a></li>
	<li class="twitter"><a href="[insert your twitter link here]">On Twitter</a></li>
</ul>

Next you can adjust the styling by adding this piece of code to your style.css

#sidebar li.rss {
	background:url(images/rss.gif) 0 50% no-repeat;
}
#sidebar li.twitter {
	background:url(images/twitter.gif) 0 50%  no-repeat;
}
#sidebar li.rss a,
#sidebar li.twitter a {
	padding-left:20px;
	}

The icons will also have to be uploaded in your templates’ images folder. You can use your own icons or grab the ones that I’ve used by downloading the zip file.

The second example may look a bit more complex, but is just as easy and can be seen on the mudcreative.com sidebar.

First insert these lines of code in your sidebar.php:

<div id="social_media">
<h2>Follow Us</h2>
<ul>
	<li><a href="[url here]"><img src="<?php bloginfo('template_directory'); ?>/images/linkedin.png" alt="View our linked in profile" width="32" height="32" border="0" /></a></li>
	<li><a href="[url here]"><img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="On Twitter" width="32" height="32" border="0"></a></li>
	<li><a href="[url here]"><img src="<?php bloginfo('template_directory'); ?>/images/rss.png" alt="Via our RSS feed" width="32" height="32" border="0" /></a></li>
	<li><a href="[url here]"><img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="On Facebook" width="32" height="32" border="0"></a></li>
</ul>
</div>

Next, add the following to your style.css

#social_media {
	width:200px;
	background:#F2F7F7;
	border:1px solid #ACD0D1;
	padding: 0 0 5px 0; margin-bottom:10px;
}
#social_media ul {
	list-style-type:none;
	margin:0 0 0 6px; padding:0;
}
#social_media ul li {
	display:inline;
	padding: 0 6px 0 0;
}

Depending on what your stylesheet already contains, you may need to make a few tweaks, but it should be pretty straightforward. Here is zip file with the code snippets and icons. Have fun.