Add social media icons to your sidebar without using widgets

With the current social media tsunami, it is extremely important to get your website social media ready. Christine from Bluelime Media tells you how to do this for WordPress in her recent blog post:

As social networking sites such as Twitter, Facebook and LinkedIn 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 uses sidebar widgets. (Thats not exactly true, but its a bit more complicated.)

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

First youll 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 Ive 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="[insert your link to linked in 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=”[insert your link to twitter here]“><img src=”<?php bloginfo(template_directory); ?>/images/twitter.png” alt=”On Twitter” width=”32″ height=”32″ border=”0″></a></li>
<li><a href=”[insert your link to rss feed 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=”[insert your link to facebook 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.

5 Comments

  1. Pingback: How to Get More People to Like Your Facebook Page - | Entrepreneurial Woman Magazine

  2. Ask for referrals from people you trust. If that doesn’t work, then use a site that ranks well, has expertise in your specific niche. Also, working with a local company allows you to meet the people you are working with if you desire.

  3. Pingback: Social Media Widgets and How They Impact Your Following – | Entrepreneurial Woman Magazine

  4. Pingback: Our Most Popular Blog Posts of 2011 | Out-Smarts Marketing Inc

  5. Pingback: Social Media Widgets and Their Impact on your Following » Out-Smarts Marketing Inc

Leave a Reply

Your email address will not be published. Required fields are marked *