ScottKing.com.au

SEO

Part 5: Adding Google Analytics tracking to the SWFAddress include

by Scott King on May.31, 2009, under ActionScript, Flash, SEO

Dynamic SEO tags for your Flash site using PHP

To include Google Analytics tracking into your deeplinked flash site configure your SWF address like this:

       <script type="text/javascript">
            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script type="text/javascript">
            var pageTracker = _gat._getTracker("UA-XXXXX-1");
        </script>

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

Substitute UA-XXXXX-1 with your actual UA number (available in your Google Analytics control panel), make sure you’ve got the var pagTracker set before including the swfobject.js & swfaddress.js files.

Remove any original Google Analytics code you have in the page and you should be set.

In your Google Analytics control panel you will now see your deeplinks being tracked such as /#/page.

Leave a Comment more...

Part 2. Enabling back, forward and history buttons for your Flash site

by Scott King on May.22, 2009, under ActionScript, Flash, SEO

Dynamic SEO tags for your Flash site using PHP

Step 1, lets get those back buttons, forward buttons and history working in our browsers navigational bars.

This functionality relies heavily on utilizing the excellent swfaddress script which you need to download from here (http://www.asual.com/download/?swfaddress).

1. Extract the swfaddress script to the same directory that your Flash .FLA’s live in, then setup your Flash file to use swfaddress. I’ll provide a quick guide here. if you require more information no the setup of swfaddress you can view the documentation online here: http://www.asual.com/swfaddress/docs/.

2. We need to include the swfaddress javascirpt support files into our HTML, so add the following two lines:

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

So your HTML looks like:

<?php
	function getDeepLink(){
		$requestedDeepLink=curPageURL();

		$requestedDeepLink = substr($requestedDeepLink,strrpos($requestedDeepLink,":80")+3);
		if(strrpos($requestedDeepLink,"/")==strlen($requestedDeepLink)-1){
			$requestedDeepLink = substr($requestedDeepLink,0,strlen($requestedDeepLink)-1);
		}
		$requestedDeepLink = substr($requestedDeepLink,strrpos($requestedDeepLink,"/"));
		$exclusions = array(".html", "/","index.php"); // URL extension exclusion list
		$requestedDeepLink = str_replace($exclusions, "", $requestedDeepLink); // remove extensions eg: "about.html" becomes "about"
	}

	function curPageURL() {
		$pageURL = 'http';
		if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
			$pageURL .= "://";
		if ($_SERVER["SERVER_PORT"] != "80") {
			$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
		} else {
			$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
		}
		return $pageURL;
	}

$requestedDeepLink=getDeepLink();

$title="Home";
$description="Meta Tag Description for Home";
$keywords="Meta Tag Keywords for Home";
$inPageContent="Some altenate content for non-flash users on Home";
$noscript="Some altenate content for non-javscript users on Home";
if($requestedDeepLink=="about"){
	// SEO Tags for About Me
	$title="About Me";
	$description="Meta Tag Description for About";
	$keywords="Meta Tag Keywords for About";
	$inPageContent="Some altenate content for non-flash users on About";
	$noscript="Some altenate content for non-javscript users on About";
	$inContent=true;
}
if($requestedDeepLink=="contact"){
	// SEO Tags for Contact Us
	$title="Contact Us";
	$description="Meta Tag Description for Contact ";
	$keywords="Meta Tag Keywords for Contact ";
	$inPageContent="Some altenate content for non-flash users on Contact ";
	$noscript="Some altenate content for non-javscript users on Contact ";
	$inContent=true;
}
?>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title><?=$preTitle." ".$title?></title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="Description" content="<?=$description?>">
	<meta name="Keywords" content="<?=$keywords?>">
	<script type="text/javascript" src="swfobject/swfobject.js"></script> 
	<script type="text/javascript" src="swfaddress/swfaddress.js"></script> 
</head>
<body>
	<div id="flashcontent">
		<?=$inPageContent?>
		<a href="http://www.adobe.com/go/getflashplayer">Click here</a> to download the latest flash player to view this site.
	</div>
	<script type="text/javascript">
		// <![CDATA[
		//INSERT YOUR SWF OBJECT EMBED CODE HERE
		// ]]>
	</script>
	<noscript>
		<?=$noscript?>
	</noscript>
</body>
</html>

3. Now we need to move on to setting up the actual Flash .FLA. We will need to import the swfaddress class, this is done by simply adding this ActionScript line to the first frame of your Flash .FLA's:

import com.asual.swfaddress.*;  // SWFAddress code

4a. And we need to tell swfaddress when a user clicks on a navigational item in your Flash file. We do this by adding the following code to your Flash Navigational Buttons/MovieClips:

this.onRelease = function() { 

 SWFAddress.setValue('DEEPLINK_URL'); 

//Here you can add the rest of your navigational logic, eg if you need to load a new SWF called example.swf into a MovieClip called "loaderClip", you might add the following line:

// loaderClip.loadMovie("example.swf");

}

4b. Substitute your required deeplink URL into the "DEEPLINK_URL" section. For example if this code was going on the button for your "About Me" section of your Flash site, the code would look something like:

this.onRelease = function() { 

 SWFAddress.setValue('/about-me/'); 

//Here you can add the rest of your navigational logic, eg if you need to load a new SWF called example.swf into a MovieClip called "loaderClip", you might add the following line:

// loaderClip.loadMovie("example.swf");

}

4c. You can then add your ActionScript that you would call normally to load the About Me section of your Flash movie, this might look eg if you need to load a new SWF called example.swf into a MovieClip called "loaderClip", you might add the following line:

loaderClip.loadMovie("about-me.swf");

So the code for your About Me button now looks like this:

this.onRelease = function() { 

 SWFAddress.setValue('/about-me/'); 

loaderClip.loadMovie("about-me.swf");

}

Repeat steps 4a to 4c for each of your navigational buttons. eg, your "Portfolio" section might look like this:

this.onRelease = function() { 

 SWFAddress.setValue('/my-work/portfolio/'); 

 _root.gotoAndPlay("portfolio");

 _root.breadCrumbs.text="My Work > Portfolio";

}

So now every time a user clicks on a navigational button in your Flash .SWF, the SWFAddress.setValue(); function will be called and swfaddress will create an entry in your browsers History and add the previous content section to the browsers Back button.

You can now test your Flash movie by previewing it in your browser. Now when you click on a button to load a new section of your Flash file you'll notice the browser's URL has the DEEPLINK_URL appended to the URL.

eg: from the example above, clicking the "Portfolio" section will change the URL from:

http://www.example.com

to:

http://www.example.com/#/my-work/portfolio/

or clicking our "About Me" section will produce:

http://www.example.com/#/about-me/

If you open up your browsers History bar, you may also notice some new entries going in each time you hit a your nav buttons. You may also notice that your browsers Back and Forward buttons become active but clicking on them doesnt load the previous section - but don't worry we're just about to address that.

Summary

Now we have our Flash file telling the browser each time a user clicks on a section in your Flash file. Next we need to a way for the browser to tell the Flash file that the user has clicked the Back or Forward button in the browser window.

5. Making your Back and Forward buttons work.

Tell the Flash file that the user has clicked the Back or Forward button in the browser window. We do this by adding an SWFAddress.onChange listener to our ActionScript, so copy and paste the following below the import statement we added in step 2:

import com.asual.swfaddress.*;  // SWFAddress code

SWFAddress.onChange = function() {

var sectionToLoad = SWFAddress.getValue();

}

Now, everytime a user click the Back or Forward button in the browser, this function will be called inside your Flash .SWF and the variable sectionToLoad will contain the section that the browser expects to load. For example if the user was on the "About Me" section, then clicked the Flash navigation button to load the "Portfolio" section and then hit the Browsers Back button, the sectionToLoad variable would contain the "about-me" as this is the section the Browser is trying to load.

5 Comments more...

Part 3. Add scrollbars for small browser windows

by Scott King on May.22, 2009, under ActionScript, Flash, PHP, SEO

Dynamic SEO tags for your Flash site using PHP

For this step, we’re going to use swfforcesize, a small script which will do most of the ground work for us.

Firstly download and extract the script.

<html>
<head>
<title>Full Screen Flash How To</title>
<meta name="description" content="Google Optimized Description">
<meta name="keywords" content="Google Optimized Keywords">

<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="container">
<script type="text/javascript">
// <![CDATA[

var container = new SWFObject("[FLASH MOVIE].swf", "source", "100%", "100%", "8");

// ]]>
</script>
<noscript>
Google Optimised Description and alternate content
</noscript>
<div id="flashcontent">
More Google Optimised Descriptions and alternate content

<strong>You need to upgrade your Flash Player</strong><br>
<a href="http://www.adobe.com/go/getflashplayer">Click here</a> to download the latest flash player to view this site. <br><br>

This is replaced by the Flash content.
Place your alternate content here and users without the Flash plugin or with
Javascript turned off will see this.
</div>
</div>
</body>
</html>
Leave a Comment more...

Part 4. Flash alertnate content, White hat usage and source code

by Scott King on May.22, 2009, under ActionScript, Flash, PHP, SEO

Dynamic SEO tags for your Flash site using PHP

Best Uses of Flash – http://mezzoblue.com/archives/2008/05/05/image_replac/
See point #2 in regards to sIFR, an ideologically similar concept to CSS image replacement, which suffers from the same potential abuse vectors. As this is a Google blog, it appears sIFR has an official blessing. Also mentioned in this article is a similar guideline to the previous one: show users and the Googlebot the same content. Sensing a theme here?

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title><?=$globalPageTitle.” “.$title?></title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<meta name=”Description” content=”<?=$description?>”>
<meta name=”Keywords” content=”<?=$keywords?>”>

<script type=”text/javascript”>
var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src=’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));
</script>
<script type=”text/javascript”>
var pageTracker = _gat._getTracker(“UA-1694586-18″);
pageTracker._initData();
//pageTracker._trackPageview();
</script>

<script type=”text/javascript” src=”/js/swfobject.js”></script>
<script type=”text/javascript” src=”/js/swfaddress.js?tracker=pageTracker._trackPageview”></script>
<script type=”text/javascript” src=”/js/swfmacmousewheel.js”></script>
<script type=”text/javascript” src=”/js/swfforcesize.js”></script>

<style type=”text/css”>

/* hide from ie on mac \*/
html {
height: 100%;
overflow: auto;
}

#flashcontent {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width:  100%;
}
/* end hide */

body {
height: 100%;
margin: 0;
padding: 0;
background: #f2f1ed url(‘/images/bg.jpg’) center center repeat-x; margin:0px; padding:0px;
}

*{
margin: 0;
padding: 0;
}

</style>
</head>
<body>
<div id=”flashcontent”>
<?=$inPageContent?>
<a href=”http://www.adobe.com/go/getflashplayer”><img src=”/get_flash_page.gif” border=”0″></a><br>
<a href=”http://www.adobe.com/go/getflashplayer”>Click here</a> to download the latest flash player to view this site.
</div>
<script type=”text/javascript”>
// <![CDATA[

var so = new SWFObject("/site_final7.swf", "source", "100%", "100%", "8");

so.useExpressInstall("/js/expressinstall.swf");
so.addParam("menu", "false");
so.addParam("scale", "noscale");

if( so.write("flashcontent") ){
var forcesize = new SWFForceSize(so, 975, 620);
}

SWFAddress.setValue('<?=$requestedDeepLink."/"?>'); // Trigger SWFAddress event to load correct flash section, add "/"
// ]]>
</script>
<noscript>
<?=$noscript?>
</noscript>
</body>
</html>

Leave a Comment more...

Sanity.com.au Build Preview

by Scott King on May.07, 2009, under CSS, Design, Flash, JavaScript, SEO

This is the new Sanity.com.au revamp I am presently working on. Being a large consumer site I built the site with all best practice and progressive enhancement techniques available.

Site Preview:

http://www.scottking.com.au/portfolio/sanity.com.au/

Themed version:

http://www.scottking.com.au/portfolio/sanity.com.au/index_batman.html

Technology:

  • xHTML 1.0 Strict
  • Custom Styled Form Elements
  • sIfr Flash Font Replacement
  • jQuery Animation
  • swfObject Flash Embed
  • CSS class based Themes

Features:

Leave a Comment more...

Site Launch – Budget Greenslips v2.0

by Scott King on Mar.04, 2009, under CSS, Design, SEO

With all the development work I don’t get much time to design these days, but for Budget Greenslips I decided to break out the Stylus and updated the design to a more modern, web 2.0(ish) design. I then rebuilt the site using strict CSS and xHTML, re-optimised for maximum SEO.

Take a look:

http://www.budgetgreenslips.com.au/

Technology:

  • Photoshop
  • PHP
  • xHTML, CSS
  • JavaScript
Leave a Comment more...

Midori’s “Blend a Bartender”

by Scott King on Jan.20, 2009, under ActionScript, Flash, PHP, Past Work, SEO

This is a new section I put together for the Midori Welcome to Greenland web site which we built a while back, this was built with Jonathan Miranda doing a fantastic job on the design.

This new section allows you to create your very own bartender out of an array of parts including body type, hair type, skin tone – you can even give your bartender some bling!

It features advanced deeplinking functions, a Send To Friend function that allows you to send your “perfect bartender” to an unsuspecting friend and flv playback.

Technologies:

  • Flash AS2
  • PHP
  • Fusekit
  • SWF Object
  • JavaScript

Try it for yourself here:

http://www.welcometogreenland.com.au/#/locals

Or

View my Bartender

Leave a Comment more...

BT Super for Life

by Scott King on Jan.18, 2009, under ActionScript, CSS, Flash, JavaScript, SEO

This is a web site I developed for financial service provider BT Financial Group (part of Westpac), quite a nice looking site, features lots of SEO, a dynamic Flash intro panel with full CMS. A nice group to work for and a good job all around.

Technologies:

  • Flash
  • ActionScript 3
  • CSS
  • JavaScript
  • Classic ASP
  • Advanced SEO

You can see it in action here:

http://www.btsuperforlife.com.au/

Leave a Comment more...

Googles new browser launches tomorrow

by Scott King on Sep.01, 2008, under SEO

Google’s “Chrome” Browser launches globally tomorrow. It will be open-source and knowing Google it will be in Beta for a sometime but should adhere to standards better then most other commercial browsers out there.

http://googleblog.blogspot.com/2008/09/fresh-take-on-browser.html

Leave a Comment more...

Quitnow Site Launch

by Scott King on Jul.07, 2008, under CSS, Flash, JavaScript, SEO

This site I built for the Australian Government, I was given the requirment that the site would have to be built on top of a Lotus Notes CMS. For this reason alone I decided to absolutely separate the presentation layer into pure CSS and just have the Notes CMS server the content DIV’s. It worked a charm, the site looks great even though it is based on an aging CMS.

Check it out at:

http://www.quitnow.info.au

Leave a Comment more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...

Archives

All entries, chronologically...