Theo Zen

Are you a Facebook user? Do you want to bring the social features of Facebook to your Office Live website? One quick way you can take advantage of Facebook’s vast membership network is by allowing Facebook users to leave comments on your website via the Facebook Connect Comments Box widget. Users can choose to have their comments appear on their Facebook profile, enabling their friends to know about your website. You can also use the widget as a way to create a pseudo-membership system (a highly requested feature that is missing from Office Live Small Business), so that only registered Facebook users will be allowed to leave comments:

Let’s get started! Here’s how you can integrate Facebook Connect with your own Office Live website (I am assuming you already have a Facebook account, if not, go to http://facebook.com and sign up for one):

1. You will need a Facebook Platform API Key for your website. Login to Facebook and click the following link - Create a new application. On the Create Application page, enter the name of your website in the Application Name field. Read the Facebook Terms and click on Agree. Click on Save Changes:
   
    
2. On the Application Settings page, copy the API Key:
   
3. Click on the Connect tab and set the Connect URL to your Office Live website domain (i.e. http://theozen.com). Click on Change your logo and upload the logo you wish to use to identify your website. Note that the logo has to be 99px wide by 22px tall. Once you are done, click on Save Changes the bottom of the page.
    
4. Download xd_receiver.htm (right-click on the link and select Save Target As…) and upload it to the Documents Gallery for your Office Live website.
5. Open up the web page where you want to add the Comments Box widget in Page Editor. Add a Custom Footer module and paste the following code in the XSLT box (Remember to replace YOUR_FACEBOOK_PLATFORM_API_KEY with the Facebook Platform API Key you copied in Step 2):
   
   

   <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns:fb="http://www.facebook.com/2008/fbml">

     <xsl:output method="html" />

     <xsl:template match="/Footer">

     <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

     <fb:comments></fb:comments>

     <script type="text/javascript">
       FB.init("YOUR_FACEBOOK_PLATFORM_API_KEY", "/Documents/xd_receiver.htm");
     </script>

     </xsl:template>

   </xsl:stylesheet>

6. Save the Custom Footer. You should only see an empty dotted-box – that is normal and correct:
   
7. View your website. The Comments Box widget will load up and if everything is setup properly, you should see the following:
   
8. Log in using your Facebook account by clicking on Connect with Facebook. You will be presented with a login window:
   
9. Notice that your Website/Application name and logo appears on the login window. Enter your account information and click on Connect. Since you are the administrator, you will see an Administer Comments Link:
   
10. Click on the Administer Comments link. There are various options available for you to set (such as a whitelist and a blacklist), but of particular interests are two options that you will want to turn off if you do not want anonymous comments (Set Allow Anonymous Comments to No for both). If you want anonymous commenting for your website, skip this step.
    
11. Click on Save Changes. You can leave a comment on your website as a test:
     

Often, there is a need to display a PDF file on your website. For example, a restaurant owner may already have a menu nicely crafted in PDF format and would like to display that on her website. Or, a consultant may already have a presentation in PDF format that he wishes to showcase on his website. In both cases, there is a need to display the actual PDF file inline, i.e. embedded, so that the PDF content is visible on the webpage directly, and not merely as a link to download the PDF file. Embedding a PDF file used to be frowned upon when most of the world was still on dial-up internet connection. Luckily, we are well into the broadband age, and speed (at least for PDF files) is no longer an issue.

To embed a PDF file is actually quite easy to do in Office Live Small Business. The only requirement is that your visitors will need to have the Adobe Acrobat Reader plug-in installed in their browser.

1. Go to Documents Gallery under Website and upload your PDF file to it.
2. Open up your web page in Page Editor. Add a HTML module to the page, positioning it where you would like the embedded PDF content to show.
3. Add the following code to the HTML module textbox.
   
   If the page layout for your PDF file is landscape, use:
   <embed src="/Documents/myPDFfile.pdf#toolbar=0&navpanes=0&scrollbar=0" width="500" height="375" />
   
   If the page layout for your PDF file is portrait, use:
   <embed src="/Documents/myPDFfile.pdf#toolbar=0&navpanes=0&scrollbar=0" width="375" height="500" />
   
   Replace myPDFfile.pdf with the filename of the PDF file you uploaded in Step 1. You can adjust the size of the embedded PDF on your webpage by setting the width and height (in pixels) attributes accordingly (best to keep the aspect ratio of the PDF).
4. Save the HTML module and view your webpage:
   
    
    

When creating your PDF file using Acrobat, set the document to open in full screen mode. This will make the PDF file ‘play’ in the browser. In other words, this will allow animations and page transitions (if you included them in your PDF file) to display properly, making your PDF into a slideshow.

If you have an Office Live Small Business website, you probably have a need to add a calendar to your website. Many webmasters have tried the built-in Events Calendar module, but aesthetically, it looked like something from the early 90s and it is not customizable:

As a result, webmasters turn to Google Calendar instead. Luckily, there is now a better way to add a calendar to your website with the Windows Live Calendar badge!

1. Go to Windows Live Calendar. Click on Add a new calendar.  Fill in the information for your new calendar and click Save:
2. On the Calendar, hover over the date/time where you wish to add an event. Click on +Add. Fill in the information for the event, making sure that you select the calendar created above in Step 1 for the Calendar field. Click Save:
3. Repeat the above step for additional events you wish to add to the calendar. Once done, Click on Share near the top of the calendar and click on the calendar you wish to share (in this case, we called it Website Calendar):

4. Click on Share this calendar and check the Make your calendar public checkbox. Click on the Get your calendar links link:

5. Accept the Sharing confirmation pop-up. A new set of clickable links will appear on the Share this calendar page. Click on Preview in a web browser:

6. From the HTML links pop-up box, copy down two items from the URL provided – the cid (i.e. cid-5fcda5d02e159e1f) and the calendar name (i.e. Website+Calendar): If your URL does not begin with cid (i.e. it does not look like http://cid-….), you should still copy down the calendar name, but you will need to find out the cid by clicking on Profile from the Windows Live quick access bar at the top: Once the Profile page opens up, go to your browser’s address bar and copy down your cid from it:

7. Now, we are ready to add the Windows Live Calendar badge to our Office Live Small Business website. Open up the web page you wish to place the calendar badge in Page Editor. You should choose a layout that works well for the badge (i.e. three, span bottom). Add an HTML module in the Zone where you wish to add the badge. Enter the following code (replace the red parts with your own cid and calendar name):
   
   <iframe frameborder="0" scrolling="no" width="141" height="500" src="http://calendar.live.com/calendar/badgeif.aspx?user=cid-36a1f009fc15c2c5&cal=Website+Calendar"></iframe>

8. Save the HTML module and view your webpage:

9. We can customize how the calendar looks by adding some additional parameters to the badge URL in the above code:

   (credit: Windows Live Mail Blog)

   
   <iframe frameborder="0" scrolling="no" width="141" height="500" src=http://calendar.live.com/calendar/badgeif.aspx?user=cid-36a1f009fc15c2c5&cal=Website+Calendar&h=height&w=width&l=type&c=background|border|text|alternate|link|selection>
   </iframe>
   
   The parameters are defined as:
   &h=height:
   &h=s (shows 1 event in event list)
   &h=m (shows 3 event in event list)
   &h=mt (shows 5 event in event list)
   &h=t (shows 7 event in event list)
   Note that you may need to change the height of the iframe as well (the “500” value noted in blue above) depending on the length of the event list.
   
   &w=width:
   &w=n (narrow: 141 pixels)
   &w=w (wide: 194 pixels)
   Note that you may need to change the width of the iframe as well (the “141” value noted in purple above) depending on the width set.
   
   &l=type:
   &l=m (just the calendar grid)
   &l=a (just the events list)
   &l=ma (both calendar and events list)
   
   &c=background|border|text|alternateText|link|selection:
   Where each element is referring to is shown in the image above. Each element is separated by the pipe symbol (|). The color codes are HEX values (a good utility to use is Color Schemer Online for generating these values). For example, if I wish to have a background that is black, with grey borders, white text and pink alternate text, yellow for links, and orange for selection, this is the parameter for it:
   &c=000000|858585|FFFFFF|FF3399|FFFF33|FF9933
   
   Putting all of the above together, if I wanted to change the badge into a wide one displaying a medium list with 3 events, and with the color described in above, I would use the following code:
   
   <iframe frameborder="0" scrolling="no" width="194" height="500" src="http://calendar.live.com/calendar/badgeif.aspx?user=cid-36a1f009fc15c2c5&cal=Website+Calendar&h=m&w=w&l=ma&c=000000|858585|FFFFFF|FF3399|FFFF33|FF9933">
   </iframe>
   
   
   
10. As you can see, Microsoft placed a nice viral message on the badge to get more people sign up for Windows Live Calendar. On a business website, however, you may not wish to co-brand with Windows Live on your own website. Fortunately, you can hide that very easily by pulling on the bottom resize handle for the HTML module in Page Editor, making the bottom part of the badge with the message disappear.

In the previous post, I showed a quick way to get access to your Excel workbooks stored in Office Live Workspace from the desktop. In this post, I will show you how to create desktop shortcuts to other types of Office documents (including Excel workbooks) stored in Office Live Workspace:

1. Start your Office application (e.g. Word) and open up the Office Live Workspace document you wish to create a shortcut for.
2. Once the document is opened in the Office application, click on the Windows Start button and navigate to Recent Items. From there, hover on top of the document you just opened and right-click on it. The right-click context menu will show up for the document. Navigate to Send To and then select Desktop (create shortcut). This will create a shortcut on your desktop that will open up the document in the Office application.
3. To access the document again, simply double-click on its shortcut icon on your desktop. If you did not save the username and password for accessing your Office Live Workspace, a dialog box will pop up requesting for this information. Otherwise, the Office Live Workspace document will open up in the Office application like a locally stored document.

It’s quite useful to have shortcuts on your desktop to frequently used Office documents for quick access. However, how would you create desktop shortcuts for Office documents stored in Office Live Workspace? I’ll talk about that in the next post (Part 2) as it is slightly more involved. In this post, I’ll show you a super fast way to get access to your Excel workbooks stored in Office Live Workspace.

1. Open up your workbook stored in Office Live Workspace in Excel using the Open… button on the Office Live Toolbar.
2. Go to the File menu, and select Save Workspace… Give it a name and save the Workspace file (.xlw) to your desktop:
3. Whenever you want to open up the spreadsheet, just go to your desktop and double-click on the Workspace file (.xlw) you created above.

You can also open up multiple workbooks stored in Office Live Workspace (i.e. an inventory workbook, an orders workbook, etc.) at the same time with this method (just open up the workbooks you want to include and then save to a Workspace file)!

UPDATE: To Save Workspace in Excel 2007, follow this help page.