social bookmarking

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="[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. Here is zip file with the code snippets and icons. Have fun.

Stumble Upon Something New

I’ve been stumbling quite a lot lately and its nothing to do with cool beer on a summer day. I’ve been stumbling upon new websites, blogs, and videos with StumbleUpon, a great Web 2.0 tool that downloads to your browser and allows you to sample web pages according to your specified interests.

I’ve tried using other social bookmarking sites like Digg and Del.icio.us and nothing has hooked me so far. StumbleUpon is easy to set up: register and download the browser add in at StumbleUpon, click on the Stumble button on your browser toolbar and off you go. You can flag and tag those you like, give the thumbs down to those you don’t (further honing in on exactly what interests you) and you can share finds with friends.

E-bay bought StumbleUpon earlier this year and it remains to be seen how this will change the offering. Recent updates to the interface have annoyed longstanding Stumblers and they have been criticised for their insensitivity to freedom of speech.

Social bookmarking sites like this are evolving and becoming more dynamic with alternatives like Trailfire also gaining popularity. Its becoming easier everyday to find and track new sites you like and you might just stumble upon something amazing.

Tag It!

A tag on a blog or article is just like a tag on your shirt: it’s a label that provides brief information about the item in question. A tag on a shirt usually gives the name of the maker or sometimes (in the case of my kid’s) the owner’s details. In other words tags give brief information pertaining to that particular shirt. With a blog or other web posting its the same: a tag is a word or very short phrase that describes concisely what the subject of the piece is all about. Think of them as keywords used to identify the content within.

Extending the shirt analogy, if I lose my shirt and there’s a tag on it with my name on then I’m more likely to find it again. Same goes for tags on the Internet: they are used to make it easier for people to find items such as articles, blog posts, photos, video clips and so on – stuff that interests them.

Blog search engines and bookmarking pages such as Technorati and Del.icio.us use tags extensively to make it easier for users to navigate the blogosphere – users can even give articles their own personal tags so that they can organise information in a manner suited to their needs.

Marshall Kirkpatrick has some more great reasons why you should use tags in his 13 Reasons to Use Tags article.

Tagging a blog article is really easy. Most blog software allows you to create categories that are relevant to each post. These categories are the tags that blog search engines will use to categorise your piece. To use them, simply categorise each blog post before publishing by checking the appropriate word or phrase or adding a new one and checking that.

Here are a few points to remember when you’re coming up with tags:

1. Tags must be concise (1 -2 words max);
2. Tags must be relevant;
3. There is no limit to the number of tags you use;
4. Remember to check your spelling.

Web 2.0 – The Evolution of the Internet

Still confused about Web 2.0? Mhairi from Outsmart sales and marketing has written a great article explaining what’s what.

Continue reading »