Monday, December 28, 2009

How to Get Code to Work in Office Live

Essentially, with Office Live, you have two options for inserting code in Office Live. 

Method one (1) is to insert the code in the HTML module, this is the easiest, since you do not have to do anything special with the code, just paste it in the HTML Module.  However, not all codes work with the HTML module, about the only thing that works with the HTML module is plain HTML.  It should be noted, that the HTML module is an IFrame created through JavaScript.  Also NEVER NEVER try to use JavaScript that has external reference (<script type=”text/javascript” src=”somejssource.js”></script>) into the HTML module, it will lock up your site!  Solutions for Office Live does not recommend using the HTML Module!

Method two (2) is to use the Custom Modules (Header, Navigation, Footer).  It is recommend to use the Custom Footer module, though some people have errors with the Custom Footer module, in which case, you can try the Custom Header module.  With the Custom Modules, you can get most codes to work in Office Live, this method however is not as easy, since it requires modifying the code.  You can find several solutions for modifying codes to work at http://solutionsforofficelive.com, just use the search bar at the top of the site!  If you can’t find a specific solution, often a solution that is close/similar will work just as well.  If you still cannot find a solution follow the directions below.

The Custom Modules use XSLT, which requires a “base” code, currently there are two versions, each have there purpose, if possible you will want to use the first “base” code, which only supports Strict HTML/JavaScript and any comments will be removed (which is why the Google Adsense code requires further modification: http://solutionsforofficelive.com/googleadsense.aspx).  The second base code uses <![CDATA[  ]]> tags which basically tell the web server not to process the code.  Note, that there already is code in all of the Custom Modules, just make sure you remove that code before using any of these other codes!

First “Base” Code (For Strict HTML/JavaScript)
Your code, would go on line #4 (between the <xsl:template> tags.  The code can go all the Custom Modules.

1: <xsl:stylesheet xmlns:xsl="
http://www.w3.org/1999/XSL/Transform" version="1.0">
2: <xsl:output method="html" omit-xml-declaration="yes"/>
3:  <xsl:template match="/">
4: 
5: </xsl:template>
6: </xsl:stylesheet>

 

Example:

<xsl:stylesheet xmlns:xsl="
http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<marquee style="font-family: Times New Roman; font-size: 12pt"
direction="right" scrollamount="3" loop="-1" behavior="scroll">
replace text, replace text, replace text, replace text
</marquee>
</xsl:template>
</xsl:stylesheet>

 

Second “Base” Code (For any codes that will not work use first “base” code)
Your code, would go on line #5 (between the <![CDATA[  ]]> tags.  This code can go in all the Custom Modules.

1: <xsl:stylesheet xmlns:xsl="
http://www.w3.org/1999/XSL/Transform" version="1.0">
2: <xsl:output method="text" omit-xml-declaration="yes"/>
3: <xsl:template match="/">
4:  <![CDATA[
5: 
6:  ]]>
7:  </xsl:template>
8:  </xsl:stylesheet>

Example:

<xsl:stylesheet xmlns:xsl="
http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="text" omit-xml-declaration="yes"/>
<xsl:template match="/Footer">
<![CDATA[
<!-- AddThis Bookmark Button BEGIN –>
<script type="text/javascript"> addthis_url = location.href; addthis_title = document.title; addthis_pub = 'yourid'; </script><script type="text/javascript"
src="http://s7.addthis.com/js/addthis_widget.php?v=12" ></script>
<!-- AddThis Bookmark Button END –>
]]>
</xsl:template>
</xsl:stylesheet>

Saturday, October 3, 2009

New Business Application – Image Gallery

We have just released a new application for Office Live Business Applications that will allow you create a simple image gallery that will allow you enlarge images using Lightbox!  You can see it in action here: http://solutionsforofficelive.com/image_gallery.aspx and you can download it at: http://solutionsforofficelive.com/businessapps.aspx.