The BC Ad Rotator is a powerful feature but there is no native functionality for a Flash Ad with an image fallback for browsers and devices with no Flash support. This jQuery plugin aims to merge that gap by giving you the power to have an ad with flash fallback with a few javascript references and some easy markup for your ad rotator item.
- jQuery >= 1.4.3
- SWFObject 2.2
Since these scripts are required, you must load these required libraries in your page before you load the BC Ad Rotator with Flash Fallback Script
* Each ad rotator item's HTML markup needs a unique ID. The SWFObject script requires an ID to embed the flash object and this becomes especially important if you have multiple ads on one page.-
Ensure jQuery (at least version 1.4.3) is loaded in your page or template before continuing.
-
Add SWFObject Library to your page or page template:
-
Download the SWFObject project and unzip it locally.
-
Upload the whole "swfobject" folder to the root of your website.
-
In your page template or page that you will be serving your ads on, add this script reference to the HEAD of your HTML doc:
<script src="/swfobject/swfobject.js"></script>
-
-
Add the Ad Rotator with Flash Fallback Library to your page or page template:
-
Open the jquery.adRotatorFlashFallback.js file and save it locally. Then, upload it somewhere on your website and remember the path to this file. For this example we'll assume you are placing it in the "js" folder in the root of your site.
-
In your page or page template where you'll be serving ads, reference the script you just downloaded. Make sure it goes after our swfobject.js and jquery references in the head of your HTML doc:
<script src="/js/jquery.adRotatorFlashFallback.js"></script>
-
-
Upload the backup image you want to use for non-flash devices to your website and remember the URL/path of that image. For our example we'll use "/images/demoad.gif".
-
Upload your .swf file to your site and remember the URL/path to that file. For our example we'll use "/swfads/demoad.swf".
-
Create a new ad rotator item
-
Choose the Item Type as HTML
-
Add your Label (title) and Item Click-thru URL
-
In the Item HTML box you can manually add the markup for your fallback image. We'll use special "data" attributes:
<span id="demoad-1" class="bc-ad-fallback" data-bc-ad-fallback data-swf="/swfads/demoad.swf" data-width="300" data-height="250"> <img src="/images/demoad.gif" /> </span> -
IMPORTANT: You must use a unique ID in your markup.
-
In the BC Admin, open up your page or template where you'd like to include the Ad Rotator and use the Module Manager to insert the ad rotator module code where you'd like it to appear in your code.
It should be similar to {module_adrotator,1111}, where "1111" is the ID of your Ad Rotator. Read about adding CSS hooks for styling your ads
After you've created your ad rotator items, prepared your page by making sure jQuery is loaded and referencing the SWFObject & jquery.adRotatorFlashFallback libraries in your pages or templates and added your {module_adrotator} code into your page or template you are ready to instantiate our jQuery plugin which will embed the SWF file over your fallback image.
Add the following code after your {module_adrotator} in your page or template. You only need instantiate this once per page so it is advised to add this javascript to an existing javascript file already in your page template. If you need to add it to the page, it's best to include this just before your closing </body> tag:
<script>
(function($){
$("[data-bc-ad-fallback]").adRotatorFlashFallback();
})(jQuery);
</script>
Read more below for a better understanding of our markup, plugin parameters and caveats.
Here are the parameters you can pass to our function.
-
swf
- Required parameter
- The path to the .swf file on your server.
- There is no default value for this parameter. It must be included in your markup via the data-swf attribute. If not present the plugin will fail silently unless you set the debug parameter to true.
-
width
- Required parameter
- default: null
-
height
- Required parameter
- default: null
-
debug
- Set this parameter to true to see javascript alerts of errors with the script that result from incorrect markup or missing dependencies
- default: false
-
noStyles
- Our plugin adds the width and height to the link element BC uses for our ad rotator item. If you think these inline CSS styles are messing with your website layout, set this parameter to true
- default: false
-
flashParams
- Params to pass into your Flash object
- default: {wmode: "transparent"}
-
flashVars
- Variables to pass into your Flash file
- default: {} (empty array)
-
flashVersion
- Minimum flash version required for your .swf file to work.. if not met it will use the flash fallback image in the markup
- default: "9.0.0"
-
expressInstall
- The path to the expressInstall.swf file to prompt devices that support flash but don't have it installed to install flash.
The default path is using the expressInstall file included in the SWFObject library you should have uploaded to your site. - default: "/swfobject/expressInstall.swf"
- The path to the expressInstall.swf file to prompt devices that support flash but don't have it installed to install flash.
Our jQuery plugin takes a few parameters that you can pass to it using "data-*" attributes. If you want to add a parameter to the script like the parameter flashVars you can pass it by adding the attribute data-flash-vars="{param: 'param value'}" to our markup.
If you wanted to stop our plugin from setting CSS styles on the surrounding link BC adds to your ad rotator item, just add the following attribute onto our span.bc-ad-rotator element in Item HTML markup while creating your ad rotator item:
data-no-styles="true"
You can also see error alert messages by setting the debug parameter by adding the addribue:
data-debug="true"
Our markup uses a class="bc-ad-fallback" just in case you want to style your fallback image ad specifically or for non-javascript enabled browsers you can use that class for styling the ad in just those instances. However, if the SWF file successfully replaces our fallback image, it will overwrite that entire span element and along with it that class name.
To style your ad rotator items via CSS, the best option is to wrap your {module_adrotator} code with a div that has a class you can use to target your ad items:
<div class="ad-rotator">{module_adrotator,1111}</div>
Then, you could use CSS to style your ads:
.ad-rotator { width: 300px; height: 250px; }
.ad-rotator img, .ad-rotator object, .ad-rotator embed { max-width: 100%; height: auto; }
If you intend to use a Flash Ad in a BC Ad Rotator, regardless of whether or not you implement this flash fallback solution, the "Click-thru URL" you define in the Ad Rotator Item won't work and any clicks on Flash ads won't be tracked for reporting on BC. The click-thru URL needs to be embedded in the .SWF file.
To take advantage of BC's reporting on Ad Rotator Items, you'll need to save your Ad Rotator Item first and preview the ad on your site to get the URL that BC generates for your ad rotator item and embed that URL into your .SWF file.
Once you have BC's link tracking URL you can update your .swf file to use that link so that the clicks on the flash movie are tracked by BC.
We are using a span element in our markup since BC wraps an anchor link (a element) around our markup. If we were to use a div instead of a span that would be invalid markup since div elements can't be inside anchor elements.
BC Ad Rotator with Flash Fallback by Chris Matthias is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Based on a work at https://gist.github.com/thetrickster/231590f903d0060f5da7.