HTML Hack to get Flash Banners to click through to external URL's

Flash Banner Click Hack

This might be old news to some of you but for those of us who spend most of our time developing rather than designing or cutting up sites this is a neat hack for getting flash banners to have click-through events without having to build them into the Flash Object itself.

I was given some banners the other day written in flash to put on a new site I am working on the-jag.com.

However these banners did not have any links built into them and as we all know you unless a flash object has a click event and a redirect to a URL, either hardcoded or passed in as a parameter then you cannot just add an <A> tag around it as you would with an animated gif or another image as it just won't work.

As CSS is not my speciality I asked a friend how to hack this so I wouldn't have to go back to the designer to get such a URL click through parameter added and these are the steps he gave me.

So if you ever want to add a click event or <A> around a flash banner then this is what you can do.

1. The original banner code. This was the standard OBJECT / EMBED mix, which although not standard compliant is still used a lot on the web.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" 
 width="300" height="300" id="banner-300-300" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="wmode" value="transparent">
<param name="movie" value="banner-300-300.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#fff200" /> 
 <embed src="banner-300-300.swf" 
  quality="high" 
  bgcolor="#fff200" 
  width="300" 
  height="300" 
  name="banner-300-300" 
  align="middle" 
  wmode="transparent" 
  allowScriptAccess="sameDomain"
  allowFullScreen="false" 
  type="application/x-shockwave-flash" 
  pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

2. First off I added the wmode="transparent" parameter to the object and embed tag to stop the flash object being the top most element in the DOM. This allows you to then add other objects on top of it.

3. I then wrapped the object in a DIV tag that was position relative, had the same width and height as the banner I was showing which was 468x60 and had the same background colour.

This was because adding the wmode="transparent" removed the colour from the banner so it needed to be replaced by the DIV.

<div style="position:relative;background:#fff200;width:300px;height:300px;">

4. I then added some styling to the actual object tag to make it absolutely positioned within the DIV and positioned as the first item within it e.g top: 0px; left: 0px;

I also add a z-index on it of 5. You will see why later.

<object style="position:absolute;top:0px;left:0px;z-index:5;" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 

5. I then added my <A> tag with the href of the URL I wanted the user to go to when they clicked the flash banner at the bottom of the <OBJECT> and before the closing </DIV>.

</object>
<a href="http://www.google.com" title="Google Search Engine" />Google Search Engine</a>
</div>

6. I then added some styling to the <A> element so that it was also positioned absolutely within the DIV and was the same size as the banner.

I also made sure the text within the anchor element was hidden off screen by adding text-indent:-9000px; to it. This allows search engines to still access the anchor text for Search Engine Optimisation but it doesn't appear on screen which would look silly.

I also made sure the <A> was the top element in the DOM (above the FLASH object) by increasing it's z-index to a figure larger than the value of 5 I had set earlier on the DIV (see point 4)

</object>
<a style="position:absolute;top:0px;left:0px;z-index:10;width:468px;height:60px;text-indent:-9000px;" href="http://www.google.com" title="Google Search Engine" />Google Search Engine</a>
</div>

7. Putting this all together looks like this.

<div style="position:relative;background:#fff200;width:468px;height:60px;">
 <object style="position:absolute;top:0px;left:0px;z-index:5;" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="468" height="60" id="jag-banner-468-60" align="middle">
 <param name="allowScriptAccess" value="sameDomain" />
 <param name="allowFullScreen" value="false" />
 <param name="wmode" value="transparent">
 <param name="movie" value="banner-468-60.swf" />
 <param name="quality" value="high" />
 <param name="bgcolor" value="#fff200" /> 
  <embed src="jag-banner-468-60.swf" quality="high" bgcolor="#fff200" width="468" height="60" name="banner-468-60" align="middle" wmode="transparent" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
 </object>
 <a style="position:absolute;top:0px;left:0px;z-index:10;width:468px;height:60px;text-indent:-9000px;" href="http://www.google.com" title="Google Search Engine" />Google Search Engine</a>
</div>

I tested this code in the latest versions of Google, Firefox, IE as well as going back to IE 7 in quirks mode and the banner was shown as it should and any click on it took the user to the desired anchor location. No text within the anchor was seen on the screen.

This is just a hack that non designers, like myself, might like to know for future reference as it saves having to ask the developer of the flash file to re-develop it to allow for click-throughs.

Wordpress, WP-O-Matic and custom HTML tags

Automating Wordpress posts with WP-O-Matic

If you use wordpress you should really look into the great WP-O-Matic plugin that allows you to automate postings by importing content from RSS or XML feeds. You can set up schedules to import at regular times or import on demand from the admin area.

One issue however which I have just spent ages getting to the bottom of is the use of HTML such as OBJECT and EMBED tags. As a lot of content feeds contain multimedia files nowadays and you want this content to be imported directly into your site. The problem with WP-O-Matic and Wordpress in their default mode is that you will only get this content imported when you run the import from the admin menu or the page that the CRONJOB calls directly whilst logged in as an admin or publisher.

If you try to run the page the cronjob calls e.g /wp-content/plugins/wp-o-matic/cron.php?code=XXXXX whilst logged out or allow the job to run by itself you will find that certain HTML tags and attributes are removed including OBJECT and EMBED tags.

The reason is for security to prevent XSS hacks and its possible to get round this if you require to. This took me quite a long time to get to the bottom of as I am very new to Wordpress but I managed it in the end.

1. WP-O-Matic makes use of another object called SimplePie which is a tool for extracting content from XML and RSS. This object has a number of settings for stripping out HTML and the behaviour depends on how the feed import is called.

When running the import from the admin menu a setting called set_stupidly_fast is set to true which bypasses all the normal formatting and HTML parsing. When the CRONJOB runs this is set to false so the reformatting is carried out. In reality you want to run the reformatting as it does much more than just parse the HTML such as remove excess DIV's and comment tags and ordering the results by date.

If you don't care about this formatting you need to find the fetchFeed method in the \wp-content\plugins\wp-o-matic\wpomatic.php file and force it to be false all of the time:

$feed->set_stupidly_fast(false);

If you do want to keep the benefits of the stupidly_fast function but allow OBJECT and EMBED tags then you can override the strip_htmltags property in Simplepie that defines the tags to remove. You can do this in the same fetchFeed method in the wpomatic.php file just before the init method is called by passing in an array of tags that you do want Simplepie to remove from the extracted content.

// Remove these tags from the list
$feed->strip_htmltags(array('base', 'blink', 'body', 'doctype', 'font', 'form', 'frame', 'frameset', 'html', 'iframe', 'input', 'marquee', 'meta', 'noscript', 'script', 'style'));
$feed->init();

So that takes care of the WP-O-Matic class but unfortunatley we are not done yet as Wordpress runs its own sanitisation on posts in a file called kses.php found in the wp-includes folder. If you are logged in as admin or a publisher you won't get this problem but your CRONJOB will run into it so you have two choices.

1. Comment out the hook that runs all the kses sanitisation which isn't recommended for security reasons but if you wanted to do it the following line should be commented out in the kses_init_filters function e.g

function kses_remove_filters() {
// Normal filtering.
remove_filter('pre_comment_content', 'wp_filter_kses');
remove_filter('title_save_pre', 'wp_filter_kses');

// Post filtering
// comment out the hook that sanitises the post content
//remove_filter('content_save_pre', 'wp_filter_post_kses');
remove_filter('excerpt_save_pre', 'wp_filter_post_kses');
remove_filter('content_filtered_save_pre', 'wp_filter_post_kses');
}

Commenting out this line will ensure no sanitisation is carried out on your posts whoever or whatever does the posting. Obviously this is bad for security as if you are importing a feed that one day contained an inline script or an OBJECT that loaded a virus you could be infecting all your visitors.

2. The other safer way is to add the tags and attributes that you want to allow into the list of acceptable HTML content that the kses.php file uses when sanitising input. At the top of the kses file is an array called $allowedposttags which contains a list of HTML elements and their allowed attributes.

If you wanted to allow the playing of videos and audio through OBJECT and EMBED tags then the following section of code can just be inserted into the array.

'object' => array(
'id'=>array(),
'classid'=>array(),
'data'=>array(),
'type'=>array(),
'codebase'=>array(),
'align'=>array(),
'width'=>array(),
'height'=>array()),
'param' => array(
'name'=>array(),
'value'=>array()),
'embed' => array(
'id'=>array(),
'type'=>array(),
'width'=>array(),
'height'=>array(),
'src'=>array(),
'bgcolor'=>array(),
'wmode'=>array(),
'quality'=>array(),
'allowscriptaccess'=>array(),
'allowfullscreen'=>array(),
'allownetworking'=>array(),
'flashvars'=>array()
),

Obviously you can add whichever tags and attributes you like and this is the preferred way in my opinion of getting round this problem as you are still whitelisting content rather than allowing anything.

It took me quite a while to get to the bottom of this problem but I now have all my automated feeds running correctly importing media content into my blog. Hopefully this article will help some people out.