Using HTML to show a swf flash banner in Joomla 3.1

In a previous tutorial, we showed you how to create a Joomla 3.0 banner using an image. Not all banners are images however, some banners may be flash banners (.swf files) for example. To show a flash banner, you will need to enter HTML code when creating the banner (instead of defining an image as the banner).

Steps for using HTML as a banner in Joomla 3.0:

In the following steps we’ll show you how to create a banner using HTML instead of an image. If your banner is not an image, most likely it will be a flash banner, but it could be any HTML that you’d like. These steps assume that you already have the HTML ready that you want to use.

  1. Log into your Joomla 3.0 admin dashboard
  2. In the top menu, click Components and then click Banners
  3. Click New in the top left of the page
  4. Enter the details of your new banner and then click Save in the top left of the page. These are the details we entered:

    Name Enter a name for your banner. This name will not appear on your website, but will instead show in your joomla dashboard, and help you manage this particular banner.

    We entered My Flash Banner

    Category Select a category for the banner. If you plan to use many banners on your site, you may find it to be a good idea to create categories to help organize your banners.

    We haven’t created an categories yet, so we left this option as Uncategorised

    Type Select Custom as the banner type.
    Custom Code After setting Custom as the banner Type, you will see a Custom Code textbox appear. This is where you will need to enter the HTML that is required for your banner. We entered the following code:

    <div style="width:150px;height:100px;">
    <object type="application/x-shockwave-flash" data="http://domain.com/banner.swf" width="150" height="100">
    <param name="movie" value="http://domain.com/banner.swf">
    <param name="wmode" value="opaque"> <param name="flashvars" value="direct_link=true">
    <embed src="https://domain.com/banner.swf" width="150" height="100" wmode="opaque" flashvars="direct_link=true" />
    </object>
    </div>

    That’s all there is to it! After you’ve created a banner module to show this banner, you’re flash / HTML banner will now show on your Joomla 3.0 website.

Leave a Reply