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.
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.