Web 2.0 Tagging and Blogs
Do you use Web 2.0 tagging websites? Well, I do. They are so much handier than the traditional browser bookmarks! I can easily access my favorites’ list at home, at the university campus, at cyber cafes, at airports or train stations. I can always find something interesting by looking at what other people tag. By now millions of Internet users have discovered the advantages of the social web sites like Digg, Fark, Del.icio.us and others. These websites bring huge benefits to webmasters as well. When your visitors tag your content they affirm that it is actually interesting and useful. And since most of the social websites allow favorites lists sharing, or use tags as a scoring parameter to rank news entries, thousands of other members can easily discover and visit your site. So social and tagging websites are indeed a great way to promote a site. By adding links to Web 2.0 tagging resources to your posts you remind the visitors to bookmark your content. Besides, including the post url and title as parameters into the link code simplifies the task of tagging.
How can you do it in your WordPress blog? Quite easily. You don’t need to have PHP or CSS skills; although you have to understand what your Stylesheet and Main Index Template are for. We are going to create a panel of links that looks something like this:
I can’t guarantee that this tutorial will work with any WordPress theme – there are just too many of them. I used one of the simplest available (Simpla) hoping that this will ensure the maximum compatibility.
Web 2.0. Tagging Links Panel
First of all, we need these Digg, Technorati, Del.icio.us etc. icons. Download, unrar and copy them to your images/bookmarks/ directory.
Then we have to update your Stylesheet file. Login to your WordPress blog, and open the Dashboard. Click the ‘Presentation’ menu item and you will see your current theme as well as other available WordPress themes. Click the ‘Theme Editor’ link. On the Theme Editor page click ‘Stylesheet’ in the right menu, scroll the CSS code down and place your cursor at the end of the code, then press ‘Enter’ to start a new line. We are about to add a few lines of code to the stylesheet. Be careful not to alter or delete the existing code – this can ruin the outlook of your blog! To avoid an accidental damage of your theme, FIRST copy and paste the current stylesheet code to the Notepad and save it to your hard drive! Then copy and paste at the end of the stylesheet the following code:
Now click the ‘Update file button’.
To explain shortly why are we doing this: our links will be formatted with the UL tag. Normally the UL tag produces a list like this:
- item 1
- item 2
- item 3
But we need to have our links in one line. It can be done by inserting whitespaces between them, but this is not the best way to do it. By using the CSS modified UL tag we display our links in one line and ensure the equal intervals between them at any screen resolution.
Next step: adding links code to your WordPress template. I used some WordPress defined PHP functions to get the post url and post slug (the title of your post with whitespaces replaced by ‘+’ characters to be used as a parameter in tagging links). Also we are going to display the tagging links only when the post itself is displayed, but not on your front page. Otherwise the tagging panel would appear multiple times on your index page – after each post, and this can seriously damage the usability of your design. So I am going to use a simple is_home() check the ensure that this is indeed a post page.
In your Theme Editor click ‘Main Index Template’ item in the right menu. To avoid an accidental damage of your theme , FIRST copy and paste the current template code to the Notepad and save it to your hard drive! Our tagging panel will be shown right above the comments block. So look through the code and find the following line:
< div class="entrymeta">
Place your cursor right before this line and paste the following code:
Click the ‘Update File’ button.
The links contain the post url that is automatically retrieved by the_permalink() function, and the post slug is retrieved by the sanitize_title($post->post_title) function. When a user clicks on one of the links both parameters will be automatically entered into the submission form on the tagging website.
Now refresh your website. Does it look as it is supposed to? If yes – congratulations! If not – you’d better revert to the previous condition by copying and pasting the old versions of your theme that you saved before adding the above code blocks.
Once again: I cannot guarantee that this tutorial will work with any theme – there are just too many of them. I used one of the simplest available, hoping that this will ensure the maximum compatibility. If you have any questions about your particular case, comment this post, and we will try to find a solution.
Did you like it? Was it useful? Bookmark or share this post: