29 March 2005

WordPress Browser Detection Plugin

Posted under: at 00:11

I’ve made another WordPress plugin (that makes four of them! go me!). This time it is the WordPress web browser detection plugin. It provides a function that takes user agent string as a parameter and then return a descriptive string. It also provides another function for easy insertion in comment template.

Features

  • Detects and shows commenters web browser and operating system (for use in comment template)
  • Describe an arbitrary user agent string (for general use)
  • Optionally show web browser and operating system icon.
  • If the user is ‘cookied’, it also displays an asterisk titled with the full user agent string (hover over them to see the full user agent string). Your regular visitors will not be shown this asterisk.
  • Most browsers detected: major desktop browsers, antiquated browsers, blogging software (for trackbacks and pingbacks), text based browsers, various PDAs and cell phones.
  • Humiliates those IE users :D.

Requirement

WordPress 1.5. WordPress 1.2 doesn’t store commenters user agent, so comment entries migrated from 1.2 won’t have browser description. Some basic knowledge of PHP and editing WordPress template are also required.

Instructions

  1. Download the plugin: browsniff.txt
  2. Put it in your wp-content/plugins directory and rename it to browsniff.php.
  3. Activate the plugin from your Wordpress Plugins administration menu.
  4. (optional) Download web browser and operating system icons: browsers.tar.gz. Extract it in your WordPress installation root directory. This should create a directory browsers filled with icons.
  5. Follow the usage below.
  6. (optional) You can change how the icons look in your CSS by modifying style for selector img.browsericon
  7. Send me correction if an user agent gets incorrectly detected.
  8. Send me a better icon if you find out my icon’s quality is not satisfactory :)

Usage

To show commenters web browser description, use the function pri_print_browser("Using ", "", true, 'on'); inside the comment loop. The function has three parameters:

  1. String to be printed before description
  2. String to be printed after description
  3. Whether to display icons or not, set this to true or false.
  4. String to be printed between web browser and operating system description, defaults to ‘on’.

String before and after the description will not be printed if there’s no recorded user agent string (as with comments migrated from WordPress 1.2). If the visitor is ‘cookied’ (blog administrator visiting the blog), the function will also print an asterisk titled with the full user agent string (hover to see it). This will ease you to see whether browser detection is functioning correctly. Please send me correction if an user agent string is incorrectly detected.

To find browser description from an arbitrary user agent string, use the function pri_browser_string("Mozilla/1.0", true, 'on'). The function takes two parameters:

  1. The user agent string to be detected.
  2. Whether to display icons or not, set this to true or false.
  3. String to be printed between web browser and operating system description, defaults to ‘on’.

The function will return a string with the browser description.

Note: you can edit the plugin file browsniff.php and adjust the variable $pri_width_height to set the width and height of each displayed icon file. All of my icons are in standard size 16×16, but I decided to scale it down to 14×14 in this blog.

Demonstration

You are usingUnknown browser

Changelog

1.0:

  • First release

1.1:

1.2:

  • Fixes for eLinks

1.3:

  • Detects Shiira. Thanks to CH Chan.

1.4:

1.5:

1.6:

1.7:

1.8:

1.10:

  • Detects all Ubuntu derivatives: Kubuntu, Xubuntu and Edubuntu.
  • Detects Debian Iceweasel and unbranded Firefox (BonEcho).
  • Fixes for Nintendo Wii.
  • Rearrange order for Debian derivatives.

376 Responses

Trackback: Use this URI to trackback this entry. Use your web browser's function to copy it to your blog posting.

Comment RSS: You can track conversation in this page by using this page's Comments RSS (XML)

Gravatar: You can have a picture next to each of your comments by getting a Gravatar.

Karma Threshold: none -3 -2 -1 0 +1 +2 +3