Since my last entry, I have had a number of users say they still are not able to get code to work in Office Live.  There have been two main reasons, 1.  The Custom Footer Module is broken.  The simple solution is simply use one of the other custom modules (Custom Header or Custom Navigation).  The second reason is codes that have a <form> tag in the code, this can include contact us forms, or even Google’s Search box has a <form> tag in it.

To make a code with a <form> tag work in Office Live, use the following base codes, these codes work in all the Custom modules.  There are two base codes, one for strict XHTML and one for codes that may not conform to XHTML standards.  If possible use the strict XHTML base code.  If the code does not work then use the second base code.

Base code for XHTML compliant codes:

Your code would go on line #5

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

Example:

Base code for non-compliant codes:

Your code would go on line #6

1: <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform&quot; version="1.0">
2: <xsl:output method="text" omit-xml-declaration="yes"/>
3: <xsl:template match="/">
4: <![CDATA[
5: </form>
6:
7: <form>
8: ]]>
9: </xsl:template>
10: </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="/">
<![CDATA[
</form>
<div align="left" >
<form action=http://solutionsforofficelive.com/search.aspx id="cse-search-box" style="background-color:#1b1b1b; background-repeat:repeat;width:275px; height:40px;">
<input type="hidden" name="cx" value="partner-pub-0488902814979569:dku8ma-8ngn" />
<input type="hidden" name="cof" value="FORID:11;NB:1" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="19" style="height:25px; vertical-align:middle; background-color:#ffffff; background-repeat:repeat; border : 1px solid #ff9900; font-size:12pt;"/>
<input type="image" src="/documents/mag_glass.gif" style="vertical-align:middle;" alt="Search" name="sa"/></form></div>
<form>
]]>
</xsl:template>
</xsl:stylesheet>

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&quot; 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&quot; 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&quot; 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&quot; 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&quot; ></script>
<!-- AddThis Bookmark Button END –>
]]>
</xsl:template>
</xsl:stylesheet>
]]> http://officelivesolutions.wordpress.com/2009/12/28/how-to-get-code-to-work-in-office-live/feed/ 4 studioallen http://officelivesolutions.wordpress.com/2009/08/27/experiencing-technical-difficulties/ http://officelivesolutions.wordpress.com/2009/08/27/experiencing-technical-difficulties/#comments Thu, 27 Aug 2009 21:35:45 +0000 Studio Allen http://officelivesolutions.wordpress.com/2009/08/27/experiencing-technical-difficulties Continue reading →]]>

Many of are probably noticing that your sites are either down or are not displaying correctly.  Office Live is aware of the issue (after all they probably caused it?) and working to fix it.

Current Known Problems, you may or may not have all of them (currently they are all fixed as of 8/27/2009).

• You cannot edit your site you get an Access Denied message
• Custom Modules are down, this includes the Custom Footer, Navigation and Header modules.
• CSS styles are not being applied hence your site is not rendering properly.
• Images are displayed with a red X’s.
• And of course your site may not be displaying at all!

The recent updates to Office Live have really outdone themselves.  The list of Damages:

• Business Application Alerts.  Apparently the Business Application alerts are not sending an email when new data is entered into an application.
• Appears to be working OK now.  NEW: (what you thought that was it!):  The Custom Footer Module stopped working.  Just displays:

Microsoft Office Live Small Business has encountered an error retrieving the data that you requested.
Please try again later.

• This has now been fixed, though there are some reports of problem still.  Paypal modules where not working, the Paypal buttons simply redirected back to your site.
• This appears to be working.  Code in the header is no longer working, so the solutions for Webmaster tools, redirects, and favicons are no longer working.
  No word on this one yet, and I would not get your hopes up on this functionality returning either.
• This should be fixed.  Reports are down again on some sites (totally not surprising).
  No word on this either.
• These seem to have disappeared for the most part.  And of course a smattering of smaller problems.  Pages not saving, html modules not working, trouble with codes, cannot create new pages on two of my sites (seems to be functioning now though).

Of course this begs the question, do the Office Live developers know what they are doing?

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.

While neither may be perfect, the Office Live Site Designer does offer some advantages that you might want to consider before deciding to use a third party designer such as Expressions or Dreamweaver. 

First off if you enable third party tools, you will no longer be able to use the Business Application as a backend for you website.  You can still use the Business Applications, you just will not be able to collect or publish data to your website.  The same also goes for the Contact Manager.

As far as coding and design goes, you can achieve just about anything you want with the Site Designer with a little coding knowledge and by enabling Advanced Design Features.  True you can create more XHTML compliant code if you know how and use a third party designer, but so far I have not seen an instance where some Office Lives’ coding flaws have caused major problems, or caused a serious limitation.

Finally, as far as search engine optimization (SEO) goes, the Site Designer does just as well if not better than third party designed sites.  Even though you cannot add h1-h6 and alt tags. You will of course want to make sure you properly optimize each every page on your site, with keywords, descriptions, and titles.  It would also be a wise idea to limit the use of the HTML module or combine all your code for a page into one HTML module.

This gets asked a lot, so I though I would address a few basics.  First off have you submitted your site to the search engines?  Have you optimized all your pages (not just the home page!) for the search engine by adding keywords, descriptions, and titles?  Here a couple links to check out::

• Search Engine Optimization
• Search Engine Submission Links
• Office Live Resources.
• http://www.sitepronews.com/archives/2008/jul/16prt.html
• http://www.sitepronews.com/archives/2009/apr/15prt.html