How-To: Add Item and Spell Tooltips to your Blog

So I was out in Teldrassil, killing Young Nightsabers for the Balance of Nature quest when look what dropped:

No, not really. But it looks pretty nice, doesn’t it? If you’re wondering how I did that, you aren’t alone. A couple of visitors have written in recently inquiring about my item links, and I’m finally willing to share my secret. Note that there are other ways to include World of Warcraft items in your blog, one of which is the item links method recently highlighted by Big Bear Butt (original credits to Okoloth). But if in-line displays are more your cup of tea, and you’re interested in trying it for yourself, read on, plucky blogger!

The WoWHead Item and Spell Parser (WISP) is a small Windows application that Valenna of Parry! Dodge! Spin! and I co-developed in VB.NET to allow us to attractively display items and spells on our blog, using code automatically acquired from the WoWHead web site. To use it, you will need the following:

• The ability to use WoWHead.com (the program requires a valid WoWHead address to parse)
• Web space to host images (using images hosted on the WoWHead site would be an unfair abuse of their bandwidth — don’t do it, please)
• A text editor like Notepad to edit the configuration document
• WinZip or another program that allows you to open and extract Zip files
• The Microsoft .NET Framework 1.0+ (I believe that this is a requirement and can be acquired through Windows Update)

Instructions:

1. Download WISP.zip. (Doesn’t include an installer, much less a keylogger.)
2. Extract the contents of the *.zip file into a folder.
3. Use a text editor such as Notepad to open the Wisp.exe.config file.
4. Edit the ImageStoreLocation variable to point to the web directory where you’ll be storing images, including spell and item icons.
5. If you use Blogger and have it configured to automatically Convert Line Breaks, ensure that the ReadableHTML option is set to FALSE or NO. (Why?)
6. Save your changes and close the config document.

Before you can begin generating item tooltips, you’ll need to download, save, and upload the images used by WISP. You’ll also need to add a set of CSS styles to your blog’s stylesheet. You should only have to perform these steps once:

1. Open the application by double clicking on the executable file, WISP.exe.
2. At the bottom of the first window is a button labelled CSS Styles. Click it to open a form that contains the CSS that you will need to use for your site (customized with the URL you set up earlier). There’s a button below the CSS pane labelled Copy CSS that will copy all of the CSS to your clipboard so you can easily paste it into your Blogger or WordPress template/stylesheet.
3. Select each of the six images listed at the bottom of the Styles window and click the Open button. This will open the images on WoWHead so that you can save them to upload to your own web space.
4. Click the Close button to return to the main window.

Creating an Item or Spell Link:

1. Visit WoWHead.com and find the item or spell for which you want to generate a tooltip. Copy the URL of the page.
2. From the main window of WISP, click the Paste button at the top of the screen (you can also do so manually by clicking inside the URL box).
3. Click the Parse button.
4. HTML code should automatically be generated in the Parsed HTML pane. Click on the Copy HTML button below this pane to copy it to your clipboard.
5. Paste the copied HTML into your blog editor (be sure you aren’t editing in WYSIWYG mode).
6. Important: An image URL should populate at the bottom of the form (labelled “Hosted Image”). Click the “Open” button beside this field to open the image in a new window so that you can save it and FTP it to the directory you specified in your config file.
7. Save/Publish your post when you’re done.

Additional Notes for Blogger Users:

By default, Blogger converts your line breaks into the appropriate line break and paragraph tags. Unfortunately, this presents difficulties when working with tables and other HTML formatting that it helps to be able to see when coding. WISP can output HTML that contains line breaks and extra spaces to make the HTML more readable. If you have the Convert Line Breaks option turned on in the Formatting settings of your blog, be sure to switch ReadableHTML option to FALSE so that your output doesn’t include this additional spacing.

Additional Notes for WordPress Users:

WordPress users will need to install a plugin that tells WordPress not to automatically reformat your posts. Otherwise, WordPress will automatically eat the code necessary for displaying your items properly. The plugin that I use is called WP Unformatted, and once it’s installed you will need to add a Custom Field named “sponge” with a value of “1″ to any post where you intend to include one or more items or spells.

Related Posts

• Welcome to the New Resto4Life!
• Druids vs. Priests
• How-To: Set up a Custom Avatar for Resto4Life