Thursday, July 2, 2009

Add JavaScript in blogger (blogspot) post

Blogger post
Summary:
This post talks about why javascript sometimes does not work in blogger post and how to make it works.

Javascript code works well in HTML/Jscript gadgets, so it is no need to talk of this. Here we focus on Javascript in a post.

Let's start with an example. I added this SWFObect Javascript code to embed a flash video player generated by Moyea Web Player (http://www.playerdiy.com/ ) to show videos in my blog post and it was not working:

<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">Player will show here</div>
<script type="text/javascript">
var so = new SWFObject('mwplayer.swf','player','500','450','9');
so.addParam('wmode','opaque');
so.addParam('quality','high');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.write("flashcontent");
</script>


To my strange is that this code works in my Dreamweaver or other HTML editor. But why does not work in blogger?
I tried many other code and then I found this javascript code work well in blogger post:

<a onclick="alert('This works.')" href="#" >Test</a>


After this, I look carefully at my blogger post source (Edit Html):

<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">Player will show here</div>
<script type="text/javascript"><br />var so = new SWFObject
('mwplayer.swf','player','500','450','9');<br />so.addParam
('wmode','opaque');<br />so.addParam('quality','high');<br />so.addParam
('allowfullscreen','true');<br />so.addParam
('allowscriptaccess','always');<br />so.write("flashcontent");<br
/></script>


There is a problem. In almost each new line. Almost Every time you have new line, blogger editor adds <br /> tag. Because of this <br /> tag web browser can't execute jscript.

So correct solution for my problem should look like this:

<script type="text/javascript" src="swfobject.js"></script><div id="flashcontent">Player
will show here</div><script type="text/javascript">var so = new
SWFObject'mwplayer.swf','player','500','450','9');so.addParam('wmode','opaque');
so.addParam('quality','high');so.addParam('allowfullscreen','true');so.addParam
('allowscriptaccess','always');so.write("flashcontent");</script>


To work well javascript in blogger post should be in one line.

Here is example of JavaScript code that works(The player works but videos are deleted so you couldn't see the videos in the player):

Player will show here

Stumble Upon Toolbar

8 comments:

  1. Thanks! Your solution just worked for me. I am trying to come up with an idea for my blog, and could not get the javascript to work. Thanks again

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. Thanks so much... it works great.


    Flv Player

    ReplyDelete
  4. Thanks for your support.I will try it to my website at http://www.shopprice.com.au/

    ReplyDelete
  5. thanks for the info. provided...

    ReplyDelete
  6. Thanks for posting this. really wonderful blog.. i like it.. good work .. keep it up..

    Youtube Technical Support

    ReplyDelete
  7. Much thanks for the useful information. It is really good!!
    http://quicksupportservice.com/

    ReplyDelete