SEO Articles

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:

Download file

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:

Download file

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.

Have fun!

Digg!

Did you like it? Was it useful? Bookmark or share this post:

13 Responses to “How To Add Web 2.0 Tagging Links to a WordPress Blog”

  1. Blog Technology » Blog Archive » Adding Web 2.0 Social Bookmarks to a WordPress Blog by Oleg Ishenko, Says:

    [...] 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. In this tutorial we are going to create a panel of social bookmarks to be displayed above the comments block in your WordPress blog entires. Proceed to the Web 2.0 Social Bookmarks tutorial. [...]

  2. Web 2.0 » Blog Archives » IAlog Tagging 2.0 talk at SXSW Says:

    [...] How To Add Web 2.0 Tagging Links to a WordPress BlogA handy and simple tutorial on adding Web 2.0 social bookmarks (eg. Digg It! or Add To Yahho!Web) to Web 2.0 Tagging and Blogs. Do you use Web 2.0 tagging websites ? Well, I do. They are so much [...]

  3. Alex Szilaghi Says:

    One of the best tutorials I ever read over the internet.
    Thank you!

  4. Heiko Says:

    Thanks for the info. i was seeking for this. Heiko

  5. submitter Says:

    Hello. Look at http://socialposter.com/blog/social-bookmarks-submitter/ – this will be interesting to you, it is a program that lets you submit Links to social bookmarking websites automatically! Over 20 popular social bookmarking sites.

  6. Adding Web 2.0 Social Bookmarks to a WordPress Blog at Internet Marketing Guide Says:

    [...] Originally published at How To Add Web 2.0 Tagging Links to a WordPress Blog [...]

  7. Business man Says:

    yes great, you done a good job, really its worth and informative for all, i don’t much about php, after i read your blog i’m very much interested to learn php, so first i’m going to learn php in W3School after that i’m going to try out this process, and let you know my doubts soon. thanks for your nice blog

  8. website design company Says:

    web 2.0 website are very helpfull fro promotion they generate lots of traffic

  9. BharatBook Says:

    Hello,

    You have done a great job by explaining the ppl How To Add Web 2.0 Tagging Links to a WordPress Blog…
    it is very helpful for the internet users using the blogs and link popularity program.
    http://www.bharatbook.com

  10. Anni Lenox Says:

    how i understand, i must learn php :)

  11. Germanische Mythologie Says:

    Thank you … The tutorial really helped.

  12. Suchmaschinenoptimierung Says:

    This contribution has really helped. Thank you very much!

  13. sohbet siteleri Says:

    Any hope of making the images attachments to the post, so the images use the attachment.php template when clicked? I realize it’s been about a year since you last updated, but I can always hope

Leave a Reply