News

Search

Top Results

Result

Bookmark

Share

Poll

Tag Cloud

Links

Redirect If Flash Is Not Installed

03rd October, 2009


Hello, have been really busy lately so as a result, the blog on here has become a bit out dated, don't worry though as I am planning to start up the blogging again!

I noticed recently that there is no simple answer to redirecting someone to a non-flash version of a website, or to replace flash content with something more compatible.

In this short post I will show you a very basic script that will allow you to redirect your visitors who have an old or even no version of flash player installed.

A quick example of what the script will do:

The user without flash (or an old version) visits part of your site with flash content on.

The script will detect this and redirect them to a completely different page set up to work with no flash, or to tell them to upgrade Smile.

First things first though, you will need to grab a copy of swfobject.js, (Google it) and include it in the header of your page.

if (swfobject.hasFlashPlayerVersion("7.0.0")) {
// User has flash
} else {
// User does not have flash
window.location="noFlash.php";
}

The 7.0.0 part of the script is the lowest version number of flash that is allow to run without a redirect.

But what if I want to redirect to the same page but add a URL parameter?

Read on... Smile

You could always wrap the Javascript with some php code to prevent a never ending loop of redirects if you want to redirect visitors back to the same page, but with a new URL parameter.

e.g.

if($_GET['flash'] == "no") {
//don't do anything
} else {
//Redirect Javascript code goes here
}


This would then redirect a visitor to:
http://example.com/flashContent.php?flash=no

(providing the Javascript is set to redirect to flashContent.php?flash=no if there is no flash or it is out dated.)

Hope that helps out someone Smile

As always drop me a comment if you want to ask a question, or say hi Big Grin


Comments

austin smith

02nd February, 2010 at 1:29 pm

Hi there, I'm a bit of a novice but on our site I want to add a redirect to a URL and have followed the instructions above but I still cannot get it working. Any Ideas?
Ross

02nd February, 2010 at 11:14 pm

Hi

First off make sure that you have included the swfobject.js in your page, e.g.

<script type="text/javascript" src="PathTo/swfobject.js"></script>

You could then do the following to redirect to a non-flash page


<?php if($_GET['flash'] == "no") { } else { ?>


<script type="text/javascript">
//<![CDATA[


if (swfobject.hasFlashPlayerVersion("7.0.0")) {
// User has flash
} else {
// User does not have flash
window.location="non-Flash-Page-Name.php?flash=no";
}


//]]>
</script>

<?php } ?>



The above code simply says that if the parameter flash equals no, then do nothing, else, redirect them to a non-flash page with the flash parameter equal to no e.g. non-Flash-Page-Name.php?flash=no

Hopefully that helps, if not, post me your code so far in a comment, or tell me whats not working Smile :)

Thanks for checking out the blog


Ross
Rob Kinnear

18th February, 2010 at 3:45 pm

Hi

I have a Flash site at the moment and am building an html site for SEO purposes. I'd like the new html site to start as the index page but wondered if I could redirect anyone with the Flash plugin to another URL. This will hopefully sort out my SEO problems - as Google and others will index my entire html site but people with Flash get redirected to the nicer styled pages...

Thanks in advance...
Ross

26th February, 2010 at 12:24 pm

Hi

You can simply use the code below to do that, for example..

First include the Javascript file in the head of your document like so. (Google swfobject to downlaod the Javascript file)

<script type="text/javascript" src="PathTo/swfobject.js"></script>

Then paste in the rest of the code below

<script type="text/javascript">
//<![CDATA[


if (swfobject.hasFlashPlayerVersion("7.0.0")) {
// User has flash so redirect them window.location="Flash-Page-Name.html";
} else {
// User does not have flash, do nothing
}


//]]>
</script>



Thanks Smile :)
AJ

05th March, 2010 at 12:22 pm

Hi Ross,

Thanks for the tutorial, just what i was looking for, but i think imust be doing something wrong. I have a flash site, and i would like that users on mobiles/pda's and non flash users to be directed to antohername.html when they visit the index page.
I entered the first script at the beginning of my index.html and added the php script after the head and edited the location, and still not working, can you advise anything?

Kind Regards

AJ
Ross

05th March, 2010 at 2:48 pm

Hi AJ

First off, make sure that you have the correct file path for the Javascript include file, sometimes all it takes is an extra / to mess things up Smile :)

Providing that's correct, If you want to redirect users to a completely different page that is built for non-flash visitors then the php side of the script is not needed.

You can simply include the non-php script right after you have included the swfobject file, so that both sections are in the head of the page.

The code below should work fine for you.

<script type="text/javascript" src="PathTo/swfobject.js"></script>

<script type="text/javascript">
//<![CDATA[

if (swfobject.hasFlashPlayerVersion("7.0.0")) {
// User has flash so do nothing
} else {
// User does not have flash, so redirect them
window.location="antohername.html";
}

//]]>
</script>


That should fix the problem, If you are still stuck, feel free to leave me another comment.

Thanks for visiting Big Grin :D
AJ

08th March, 2010 at 8:26 am

Hi Ross, thanks, it worked ok. but i also have another question, when i visit the site from an iTouch i get directed to the non flash site, but when i use my pda which has Windows Mobile 6 installed, it doesnt get directed. any ideas?

Thanks for your help so far Smile :)

AJ
Ross

08th March, 2010 at 10:12 pm

Hi AJ, good to here its working Smile :)

I have not got a Windows Mobile 6 OS to test on but I think that your PDA most likely has flash player 7 installed therefore causing the script to not redirect.

Try lowering the .hasFlashPlayerVersion("7.0.0") version to a lower one.

See if that works, if not post back and I will have a closer look at the problem Big Grin :D

Thanks
Otter

09th April, 2010 at 7:29 am

very well written blog i enjoy reading this site
meeyop

27th April, 2010 at 4:41 pm

Thanks for this useful article.
PA

07th May, 2010 at 8:20 pm

great share, great article, very usefull for me...thank you
sunmani

22nd May, 2010 at 1:08 am

Really good sharing this.
SC

02nd June, 2010 at 2:53 pm

Hey Thanks for the article!
I have a working script that I don't want to mess with
Except
I want to have a redirect page if user does not have flash
(for all the iUsers) where would I put that in this code?
I read the comments above but this "set up" I have is a bit different.
any help would be appreciated.
thanks

<!DOCTYPE html PUBLIC "<//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>version 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {
bgcolor : "#000000",
allowFullScreen : "true",
scale :"noscale",
allowScriptAccess : "always",
swLiveConnect : "true"
};
var attributes = {};
swfobject.embedSWF("preview.swf", "myContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
<style type="text/css">
html, body, div {
height: 100%;
overflow: hidden;
}
body {
background: #000000;
font: 86% Arial, sans-serif;
margin: 0;
}
#main {
height: 100%;
}
</style>
</head>
<body bgcolor="#000000">
<div id="myContent">
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>
Ross

05th June, 2010 at 3:41 pm

Hey, thanks for the comment and sorry about the late reply

I will take a look @ your problem in a bit and see if I can give you a solution Big Grin :D
Ross

05th June, 2010 at 5:43 pm

Ok SC, the following code is your original with the flash detect code from my blog added in.

The page will run as normal on browsers with flash, but when they don't have it, i.e. iPad's iPhone's etc it will redirect to a page called noFlash.html which can easily be changed, and is defined near the top of the script.

Thanks for visiting



<!DOCTYPE html PUBLIC "<//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>version 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
if (swfobject.hasFlashPlayerVersion("7.0.0")) {
// User has flash so setup parameters etc as normal

var flashvars = {}; var params = {
bgcolor : "#000000",
allowFullScreen : "true",
scale :"noscale",
allowScriptAccess : "always",
swLiveConnect : "true"
};
var attributes = {};
swfobject.embedSWF("preview.swf", "myContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

} else {
// User does not have flash so redirect to a different URL
window.location="noFlash.html";
}


</script> <style type="text/css">
html, body, div {
height: 100%;
overflow: hidden;
}
body {
background: #000000;
font: 86% Arial, sans-serif;
margin: 0;
}
#main {
height: 100%;
}
</style>
</head>
<body bgcolor="#000000">
<div id="myContent">
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>
CR

10th July, 2010 at 6:13 am

Awesome thanks!

Name Required

(Not Displayed)

Invalid Email
Message Required

 

Recent Comments

» CR

...

» Tabster

Ty, nice tutorial :)....

» Ross

Ok SC, the following...

New Posts

» Video capture card software VideoGlide for Mac (with Xbox 360 setup)

Posted on: 22nd April, 2010

» Apples iPad UK (Updated)

Posted on: 28th January, 2010

» Free Music With Spotify Invite

Posted on: 08th October, 2009