SEO: Flash and SWFobject

alledia · Post by **alledia** » Tue Mar 25, 2008 5:04 pm

Short description

Inclusion of Geoff Stearns SWFObject to embed flash movies implementing div tag usage of the script.

Expected benefits/ Problem solved

Option to turn on/off a swfobject mambot to add in flash content, having SWFobject included at source would not only eliminate the annoying "click here to activate feature" when embedding flash but would also enable the flash to be somewhat SEO friendly. You can add content related to the flash movie within div tags this is read in place of the flash movie by the search engines, since the SE's dont see the swf file. The same content can also be delivered to your flash movie too.

Potential issues

Security upgrades to swfobject if any - would this require a patch or update to the main joomla source? Saying that SWFObject has been stable for sometime now.

Comments/References

This was a request i made at Joomla Austin 2007, I also contacted with Geoff Stearns with a view to him helping with the implementation.

SWFObject 1.5: http://blog.deconcept.com/swfobject/

SWFObject 2.0: http://code.google.com/p/swfobject/wiki ... umentation

AmyStephen · Post by **AmyStephen** » Tue Mar 25, 2008 6:59 pm

Excellent extension, but why core, Steve? So many people hate Flash anyway. Hm.

Great extension, though. Would be awesome in a nice editor.

cognac · Post by **cognac** » Thu Mar 27, 2008 9:47 pm

Fresh newcomer here .. a few days into using Joomla .. but an essential requirement was to use swfobject to embed flash components to extend user functionality ..

Here was my experimental approach.

First I experimented with AnyTags! plugin

http://extensions.joomla.org/component/ ... Itemid,35/

and I got swfobject (standard distribution files) to work by adding code to HMTL editor.

But I found this to be tricky editing in TinyMCE editor.

So I switched to using AddPHP plugin

http://extensions.joomla.org/component/ ... Itemid,35/

and I created some external php files to include in HTML editor with a single line ..

example ...... {rdaddphp file=myphpfiles/swfobject/addphp_swfobject.php}

The included php file .. addphp_swfobject.php .. echos back the html code to include in index.php.

It can be edited in an external editor.

Code: Select all

<?php
$pathtoswfobject = "/joomla/templates/custom/swfobject/";   //  path to swfobject folder
$swfobject_src = "so_tester.swf";
$swfobject_id = "sotester";
$swfobject_width = "300";
$swfobject_height= "300";
$swfobject_version = "9";
$swfobject_bgcolor = "#FF6600";
$quote = "'";
$separator = "', '";
$arguments = $quote.$pathtoswfobject.$swfobject_src.$separator.$swfobject_id.$separator.$swfobject_width.$separator.$swfobject_height.$separator.$swfobject_version.$separator.$swfobject_bgcolor.$quote;

// uncomment to echo arguments string for testing
// echo $arguments;

echo "<script src='".$pathtoswfobject."swfobject.js' type='text/javascript' ></script>\n";
echo "<link rel='stylesheet' href='".$pathtoswfobject."swfobject.css' type='text/css' media='screen' />\n";

echo "<div id='flashcontent'>\n";
echo "<strong>You need to upgrade your Flash Player</strong>\n";
echo "This is replaced by the Flash content.\n";
echo "Place your alternate content here and users without the Flash plugin or with Javascript turned off will see this.";
echo "Content here allows you to leave out noscript tags."; 
echo "Include a link to <a href='".$pathtoswfobject."swfobject.html?detectflash=false'>bypass the detection</a> if you wish.</div>";
echo "<script type='text/javascript'>\n";
echo "var so = new SWFObject(".$arguments.");\n";
echo "so.addVariable('flashVarText', 'this is passed in via FlashVars for example only');\n";
echo "so.write('flashcontent');\n";
echo "</script>\n";
echo "<div id='info'>\n";
echo "<p>This Flash movie was embedded using the <a href='http://blog.deconcept.com/swfobject/'>SWFObject</a> embed method by <a href='http://blog.deconcept.com/'>Geoff Stearns</a>.\n";
echo "</p>Other sample embeds:</p>\n";
echo "<ul>\n";
echo "<li>Basic Flash Embed with alternate content</li>\n";
echo "<li><a href='".$pathtoswfobject."fullpage.html'>Full page Flash embed</a></li>\n";
echo "<li><a href='".$pathtoswfobject."expressinstall.html'>Basic Flash Embed with Express Install allowed</a></li>\n";
echo "</ul>\n";
echo "<p>You can also <a href='".$pathtoswfobject."flashversion.html'>view your installed Flash version</a>.</p>\n";
echo "<p><a href='view-source:http://blog.deconcept.com/swfobject/swfobject.html'>View source</a> (in mozilla, firefox) | <a href='".$pathtoswfobject."swfobject_source.js'>View Javascript</a>.</p>\n";
echo "<p><a href='http://blog.deconcept.com/swfobject/swfobject1-4.zip'>Download Source</a>.</p>\n";
echo "</div>\n";
echo "<p style='clear: both; margin-left: 20px'>\n";
echo "<a href='http://validator.w3.org/check?uri=referer'>Validate XHTML</a> and <a href='http://jigsaw.w3.org/css-validator/check/referer'>CSS</a>\n";
echo "</p>\n";

?>

I have also used this AddPHP approach to embed sIFR code.

There might be cleaner ways of including swfobject .. but it works.

***** Manual signatures are NOT allowed ********** Manual signatures are NOT allowed ********** Manual signatures are NOT allowed ********** Manual signatures are NOT allowed ********** Manual signatures are NOT allowed ********** Manual signatures are NOT allowed *****_______-

postscript ..

Sure enough .. after playing around as above I found an easier approach which requires less code hacking ..

You can change the path to swfobject installation to suit your installation ..

In module manager I created a new module "swfobject" and dropped in this code ..

Code: Select all

<script type="text/javascript" src="/joomla/templates/custom/swfobject/swfobject.js"></script>
<style type="text/css">

body {
background-color: #eeeeee;
font: .8em/1.3em verdana,arial,helvetica,sans-serif;
}

#info {
width: 300px;
overflow: auto;
}

#flashcontent {
border: solid 1px #000;
width: 300px;
height: 300px;
float: left;
margin: 15px 20px;
}

</style>

<div id="flashcontent">
<strong>You need to upgrade your Flash Player</strong>
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. Content here allows you to leave out <code>noscript</code> 
tags. Include a link to <a href="/joomla/templates/custom/swfobject/swfobject.html?detectflash=false">bypass the detection</a> if you wish.
</div>

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

var so = new SWFObject("/joomla/templates/custom/swfobject/so_tester.swf", "sotester", "300", "300", "9", "#FF6600");
so.addVariable("flashVarText", "this is passed in via FlashVars for example only"); // this line is optional, but this example uses the variable and displays this text inside the flash movie
so.write("flashcontent");

// ]]>
</script>

<div id="info">
<p>
This Flash movie was embedded using the <a href="http://blog.deconcept.com/swfobject/">SWFObject</a> embed method by <a href="http://blog.deconcept.com/">Geoff Stearns</a>.
</p>
<p>Other sample embeds:</p>
<ul>
<li>Basic Flash Embed with alternate content</li>
<li><a href="/joomla/templates/custom/swfobject/fullpage.html">Full page Flash embed</a></li>
<li><a href="/joomla/templates/custom/swfobject/expressinstall.html">Basic Flash Embed with Express Install allowed</a></li>
</ul>
<p>You can also <a href="/joomla/templates/custom/swfobject/flashversion.html">view your installed Flash version</a>.</p>
<p>
<a href="view-source:http://blog.deconcept.com/swfobject/swfobject.html">View source</a> (in mozilla, firefox) | <a href="/joomla/templates/custom/swfobject/swfobject_source.js">View Javascript</a>.
</p>
<p>
<a href="http://blog.deconcept.com/swfobject/swfobject1-4.zip">Download Source</a>.
</p>
</div>

<p style="clear: both;margin-left: 20px"><a href="http://validator.w3.org/check?uri=referer">Validate XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></p>

beyoyo · Post by **beyoyo** » Sat Mar 29, 2008 2:10 am

I am using joomla 1.0.13. will this module approach work? How would I configure that? (What position does it go in, what parameters did you set, etc.)

I am using swfobject 2.0 for other flash files on my site and those seem to work fine, but when I tried to use a Flash video player to load .flv videos the video never loads. Could it be that our server is not recognizing the .flv extension? I know the path is right because the posterframe.jpg shows up and its in the same folder.

Thanks
-B

cognac · Post by **cognac** » Sat Mar 29, 2008 9:36 am

A quick google search .. "swfobject flv" .. suggests that you might just need .flv mime type to be defined in Apache httpd.config.

Mime type for .flv = video/x-flv

I have no experience in joomla 1.0 and I've only just started with joomla 1.5.

It appears from reading a tutorial that you can just add html (body) content into a joomla 1.0 module as in joomla 1.5.

Although swfobject usually requires links to scripts to be defined inside <head></head> they do work if placed inside <body></body> in the module.

In joomla 1.5 it seems tricky to add custom headers although I now understand that joomla 1.5 framework allows this ... see quote from joomla 1.5 framework below:-

This example adds a short script to the page.

Example

global $mainframe;
$script = "alert( 'A script has been added to the page!' );";

$document = &JFactory::getDocument();
$document->addScriptDeclaration( $script );

Might add the following to the head of the document:

Result

<script type="text/javascript">
// 
</script>

Another approach is to burn these *.js and *.css links into index.php header in your template, but this hack is required for each template that you use.

I'm sure that you can also use AddPHP to embed the code (there was a joomla 1.0 version - mambot?).

...

Back to swfobject and flv .. this thread might give more clues on parameters to use:-

http://blog.deconcept.com/swfobject/for ... configxml/

and see here ..

http://www.jeroenwijering.com/?thread=8786

...

beyoyo · Post by **beyoyo** » Sat Mar 29, 2008 2:42 pm

I used the hack method of adding the javascript to the head of the template index.php and just putting the javascript into the div on the page.
Works.

We had to add the .flv mime type to the server as well.

I also had some troubles making a good .flv file w/ metadata. The only way It seemed to work was an export from QuickTime. I tried Squeeze 4.5 and Visual Hub. Neither worked properly producing the metadata. (I probably need to do some more reading because I know Squeeze can do it.)

Sure would be nice to have an option for SWFObject built in. (optional of course for Flash haters.)

Thanks for the links.. VERY helpful!

cognac · Post by **cognac** » Sat Mar 29, 2008 5:20 pm

A couple of links on metadata injection ..

http://www.buraks.com/flvmdi/

http://soenkerohde.com/2005/04/15/flvto ... -injector/

carlaf · Post by **carlaf** » Fri Apr 04, 2008 3:59 pm

hello everyone,

I need a huge help.
I'm using swfobject to include a swf inside a module (which I created module custome html ) and named MAP
my code:
<script type="text/javascript" src="http://www.propaganda-virtual.co.uk/pag ... "></script> <style type="text/css">
#content {
background: url(http://www.propaganda-virtual.co.uk/pag ... ind_us.jpg) no-repeat top left;
}
</style>
<div id="flashcontent"> </div>
<script type="text/javascript">
// <![CDATA[

var so = new SWFObject("http://www.propaganda-virtual.co.uk/pag ... es/map.swf", "sotester", "356", "374", "8" );
so.addParam("wmode", "transparent");
so.write("flashcontent");

// ]]>
</script>

.......................................................................................
My template has a header, 2 columns (left and right) and footer
my left side is divided into leftbox, main (as right side) and publi (as a footer to include banners some times)

when I use the leftbox with the module (swf) and a article on the main I have a problem with IE alert window with:
Internet Explorer cannot open the Internet site http://propaganda-virtual.co.uk/page/in ... &Itemid=56 Operation aborted

can anybody tell me what's going on?

I heard some people talking about expandable divs can cause problems with swfobject, is that true?

Many Thanks

cognac · Post by **cognac** » Fri Apr 04, 2008 9:20 pm

Hello

Firstly, this link does not work .. http://www.propaganda-virtual.co.uk/pag ... ind_us.jpg

Not Found
The requested URL /page/templates/latasca/images/find_us.jpg was not found on this server.

Secondly, you have used movie id "sotester" which is the movieclip id / name of the test movieclip in the swfobject distribution.

You should use the id of the swf you are trying to publish .. i.e id of map.swf

.

carlaf · Post by **carlaf** » Sat Apr 05, 2008 11:27 pm

Sorry, I had to make some changes after I posted :-( thats why you can not find that file.

I did what you said (about the ID) but keep having the same problem, sort of cache problem with IE.... first time that I load the page with the flash file works fine if I try again the problem starts. Have you got any Idea what is going on? by the way my joomla running under legacy.

"I thought ID just affects variables that´s way I keep the old ID.

tks

cognac · Post by **cognac** » Sun Apr 06, 2008 9:48 am

Can you upload the full swfobject 1.5 distribution files (including so_tester.swf etc) into a joomla test folder to test that it works in IE and you can see so_tester.swf running in IE?

Download swfobject 1.5 from http://blog.deconcept.com/swfobject/#download

Also provide a link to your swfobject html embed page containing map.swf.

How did you identify the movie ID?

carlaf · Post by **carlaf** » Sun Apr 06, 2008 10:03 am

I´ve just point the module to the home page and is fine, no problem at all, but when I point to find us.... crashs.

the problem is not with swfobject.... is somewhere else....
I will point it now tho find us.... your are online so you will see whats happen with IE

carlaf · Post by **carlaf** » Sun Apr 06, 2008 10:08 am

weel I just figured out that when I use the module beside the text it´s crashes on the home page as well.....

sa247 · Post by **sa247** » Mon Apr 07, 2008 6:28 am

AmyStephen wrote:Excellent extension, but why core, Steve? So many people hate Flash anyway. Hm.

Great extension, though. Would be awesome in a nice editor.

Hi Amy,

I actually posted the suggestion on the Whitepages - the reason behind me wanting to include SWFObject was not just for working around the embed object issues with Internet Explorer but was more to take advantage of the SEO features of SWFobject.

SWFObject has a cool little feature that allows you to post content into specific DIV parameters which gets read by the search engines whilst it bypasses the script that plays the swf file - whats neat is that this DIV content can also be passed onto the flash movie and used as content.

I should probably right an extension for this but it would be nice to include it... perhaps im just getting lazy in my old age!

FYI - SWFObject using this "div" method does work...

carlaf · Post by **carlaf** » Mon Apr 07, 2008 6:16 pm

Hellooo everyone,

I just figured this out, usgin swfobject with joomla 1.5 "legacy" was crashing with IE6 I have no Idea why, so I just got my template 1.0 and converted in 1.5 and that´s it, is working fine.

shotokai · Post by **shotokai** » Sat Apr 12, 2008 4:37 am

An approach to including the swfobject.js file only when there is an actual flash object to embed is to build it into the themplate. For instance:

Code: Select all

<?php if(mosCountModules('above') && ($show_flash=="true")) : ?>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/swfobject.js"></script>
	<script type="text/javascript">
		defer="defer";
	    swfobject.embedSWF("/images/stories/homepage/intro.swf", "intro", "904", "330", "8.0.0");
	</script>
<?php endif ?>

I defined $show_flash at the beginning of the template so that I could test to see the <div id="intro"> content on a machine with flash installed - so that bit isn't necessary...

I am only using flash in the 'above' position, so this works nicely...

BTW - Although I live in Virginia, I've been to La Tasca - great Paella!

Hoosier3D · Post by **Hoosier3D** » Wed Jul 02, 2008 7:44 pm

I am so glad to see some activity in the forum with regard to this.

I am actually needing very badly for this to work because I am using software to create my flash images that requires this method. I have countless hours in trying to get this to work.

The file that is generated by my software gives the following instructions:

a. Copy the following code and paste it in your own web page:

<a href="#" onClick=javascript:window.open("kitchen-family.html",'_blank','status=yes,top=0,left=0,width=800,height=600');>
<img src="_scene/_kitchen-family.jpg" width="160" height="80" border="0">
</a>

b. Copy corresponding resource files, including _scene, config.xml, pw.swf, swfobject.js, kitchen-family.jpe, kitchen-family.html, to the folder of your own page. Please keep the file structure unchanged.

I am assuming that it is the last sentence in part b that is messing me up.

I am attaching a zip file in case anyone would like to expreriment. All the files are there in the structure that they need to be. The quality is not good, but I needed to put one together quickly that was under 500 K.

I wish that I could afford to pay someone to get this to work, but I am behind in bills already. I am trying to start a business and have had a few technical setbacks such as this along with major illnesses in the family, so I am afraid I am a charity case.

Anyone solving this for me would be my absolute Hero!!! I can't stress enough how important this is to me.

caltucker · Post by **caltucker** » Fri Sep 05, 2008 11:58 pm

SWFobject version 2.0 or 2.1 instructions.

Code: Select all

<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			var flashvars = {};
			var params = {};
			params.quality = "best";
			params.wmode = "transparent";
			var attributes = {};
			attributes.id = "YOUR FLASH ID";
			swfobject.embedSWF("YOUR FLASH MOVIE PATH.swf", "myContent", "800", "534", "9.0.0", false, flashvars, params, attributes);
		</script>
<div id="myContent" align="center">
<a href="http://www.adobe.com/products/flashplayer/"><img src="ALTERNATE CONTENT PICTURE.jpg" width="802" height="377" border="0" title="Download Abobe Flash Player"></a>
    </div>

emeyer · Post by **emeyer** » Sat Apr 18, 2009 9:45 am

AmyStephen wrote:Excellent extension, but why core, Steve? So many people hate Flash anyway. Hm.

Great extension, though. Would be awesome in a nice editor.

The reason is that multiple extensions compete swith each other trying to install the same or different libraries, many of which replicate each other's functionality. Already some sad soul decalared the decision has been made to include mootools in the core, and has condemned themselves to being loathed by billions of modem users all around the world.

emeyer · Post by **emeyer** » Sat Apr 18, 2009 7:41 pm

By the way, swfobject is no longer absolutely required for flash operation. I posted the information here:

http://forum.joomla.org/viewtopic.php?f=472&t=393538

RickGlaser · Post by **RickGlaser** » Thu Jul 23, 2009 4:43 pm

emeyer thank you very much. I saw your post at the perfect time.

lga1983 · Post by **lga1983** » Fri Jul 24, 2009 8:33 am

AmyStephen wrote:Excellent extension, but why core, Steve? So many people hate Flash anyway. Hm.

Great extension, though. Would be awesome in a nice editor.

Why many people hate flash?

siongraham · Post by **siongraham** » Thu Aug 13, 2009 7:59 am

Is there still interest in having a module to easily embed a Flash movie via swfobject in a template position? I was toying with the idea of looking into it as a first Joomla project but don't want to duplicate someone else's efforts...

bt-t · Post by **bt-t** » Wed Aug 19, 2009 8:34 am

Yessss, I am very interested... so please go on qith your search and let us know the results... THANKS!! :-)

The Joomla! Forum™

SEO: Flash and SWFobject

SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject

Re: SEO: Flash and SWFobject