Another blogger asked me how to get the Wowhead mouseover links to work in her blog. For example, when you mouseover this item, you can see its Wowhead tooltip: Support Girdle

This is a really handy thing to have – it makes it nice and easy on your readers; they don’t have to click the link (or go search for the item) to check out its stats. They won’t have to worry about going looking for the item to know what you’re talking about.

It’s actually very easy to implement this – it will take you about 2 minutes of your time. The script itself lives over at Wowhead.com; you just have to paste some code into your blog to point to it. Then, any time you post a Wowhead item link, it will automatically convert to a mouseover. :)


Adding Wowhead links to Blogger/Blogspot blogs

  1. Go to your dashboard, go to Layout, and in the widget section, make a new widget.

  2. Choose html/java, because it’s going to just be a bit of code pasted in. Don’t give it a title; this way it will show in your dashboard list of widgets as “html/javascript” but wont show on your blog’s widget list. It’ll be working for you behind the scenes.
  3. Paste this in:

    <script src=”http://www.wowhead.com/widgets/power.js”></script>

  4. Save, and you’re done!



Adding Wowhead links to WordPress blogs

Note: I run self-hosted WordPress blog, and I can control the layout of my site entirely. I assume that WordPress-hosted blogs are similar, you will just need to navigate to your template to paste the code in.

  1. Go to your dashboard; under Appearance, click on Edit.

  2. Open Header template file (putting it in the header means it will function on each page of your blog), and inside the <head></head> tag, paste this in:

    <script src=”http://www.wowhead.com/widgets/power.js”></script>



Posting a mouseover link

  1. Go to wowhead and grab your item’s address/link, eg http://www.wowhead.com/?item=1215

  2. When you write your post, you’ll need to write the link like this:

    <a href=”http://www.wowhead.com/?item=1215″>Support Girdle</a>


That’s it! :)



Possibly Related Posts: