How to create an Adobe Air installation badge on a Drupal site

While I was trying to post the article, Adobe Air App: Drupal Jobs I discovered that setting up the Adobe Air installer badge was not that obvious to do in Drupal and that although it might seem to be quite simple, it proved to be quite hard to find any direct and detail guides to solve the problem. So here and now I present to you a guide of how to create a Adobe Air installation badge on your Drupal site.

One of the first things to do is to read these two articles, Getting started with the custom install badge and Using Badger for Adobe AIR applications.

First create a folder on your remote web server in the root directory of your website, example: APPS
Now create a folder inside APPS for your application, example: EXAMPLE-AIR-APP
Now open Badger (created by Grant Skinner) and create the Adobe Air install badge.
In Badger press SELECT .AIR FILE, this will automatically fill-in a majority of the fields for you.
In Badger make sure to change the APPLICATION URL to reflect where the .air app will be located on your remote web sever, example: http://www.mydomain.com/apps/example-air-app/example-air-app.air.
Also do the same for the IMAGE of the installer badge, example: http://www.mydomain.com/apps/example-air-app/example-air-app-badge-image.jpg, the image should be the same size as the settings under BADGE SETTINGS in Badger.
Once these key fields are set, you can then press EXPORT BADGE, this will then export the necessary files into a folder of your choice, on your local machine.
Go to the folder where you have exported the Air installer badge, transfer all the files excluding the INDEX.HTML file to your remote folder on your server, http://www.mydomain.com/apps/example-air-app/
Open INDEX.HTML and copy,

1	<script type="text/javascript" src="http://www.mydomain.com/apps/example-air-app/swfobject.js"></script>

and copy

<div id="flashcontent" style="width:215px; height:180px;">
		<strong>Please upgrade your Flash Player</strong>
		This is the content that would be shown if the user does not have Flash Player 6.0.65 or higher installed.
	</div>
 
	<script type="text/javascript">
		// < ![CDATA[
		// version 9.0.115 or greater is required for launching AIR apps.
 
			var so = new SWFObject("http://www.mydomain.com/apps/example-air-app/AIRInstallBadge.swf", "", "215", "180", "9.0.115", "#000000");
 
		so.addVariable("airversion", "1.5.2");
 
		so.addVariable("appname", "APP-NAME");
 
		so.addVariable("appurl", "http://www.mydomain.com/apps/example-air-app/DrupalJobs.air");
 
		so.addVariable("image", "http://www.mydomain.com/apps/example-air-app/drupal-jobs-badge.jpg");
 
		so.addVariable("appid", "APP-NAME");
 
		so.addVariable("appversion", "v1");
 
		so.addVariable("hidehelp", "true");
 
		so.addVariable("str_error", "Error1");
 
		so.write("flashcontent");
 
		// ]]>
	</script>

and paste into a new document pasting them in the order in which they were copied, one after the other.

Before the next step make sure, in Drupal that your input filters are setup correctly, we will be using the HTML input filter.
Now open a node (or create a new node), and in the Body of the node, paste in the previously created new document of the copied snippets from the INDEX.HTML file.
Once this is done, you can save the node, and you should see the Adobe Air installer badge.

Garth Humphreys

Sandbox

How to create an Adobe Air installation badge on a Drupal site