Office Live with Multiple Domains

If you are hosting a Website with Office Live and you need to create additional sites for your company, you should know that you need to first create a different live account and apply for an additional Office Live account. If you buy additional domains with the same Office Live account, all those domains will point to the primary domain on your account. This is only good if you want to create promotional domain names and use one Website.

If you need a new website, you will need to create a different live email account and request a new Office Live account. This email account will become the owner of the site. If you want to manage all the Websites with one email or live account, you can add that account to your Website and grant the administration role to the account. This way you can use one log in, and you will be able to design the Websites for different domains. This is quite convinience when your customer is already the owner of the site, and you only need admin access to design the Website.

I hope this helps someone out there.

CodeProject
og-bit.com

If you are hosting a Website with Office Live and you need to create additional sites for your company, you should know that you need to fir...

Read Article →

How to add a social network share link on an Office Live website

With the popularity of social networks on the internet, it is recommended that a website provides users with the flexibility to share your website link to social networks. This is basically free marketing for your website. There are several free services that easily integrate with a website, and there is zero cost. In this blog, I discuss the use of the AddThis.com tool bar and how to integrate this in an Office Live website.

The integration of the share link toolbar is relatively easy. It involves the following:

1) Get the HTML for the toolbar from Addthis.com

2) Identify a page element in your site where this html can be added

The first thing you can do is to get the html for the toolbar.

1) Visit Addthis.com

2) Select the style for your toolbar

3) Select analytics if you need to. This adds tracking statistics. The office live websites already provides tracking, so choose no for this selection.

4) Press Get Your Button

5) Press Copy Code. This copies the code to memory. You can now paste it on notepad

Now that we have the code, we need to find out how to add it to the website. The Office Live websites have a designer that facilitates the creation of web pages, but the fact is that if you have any experience in creating web sites, you will find that the designer tools are very limited. Another limitation with Office Live designer is that there is no access to the master page, so a way to integrate this widget into a page is by adding a custom footer module. This module is a XSLT template which can be modified to  display Html content. In this case, we will use it to add the toolbar content.

Login to the page designer and select your home page.  Click on module and select custom footer. Do not worry about the location of the module. We will add a style class to place this toolbar anywhere on the page.  Once the module is added to the page, right click on it and select properties.  At this point, a dialog displays the XSLT template.  You want to modify the template to look like this:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html" />

<xsl:template match="/Footer">

</xsl:template>

</xsl:stylesheet>

Now, we need to add the HTML content for the toolbar. Before adding the toolbar content, remove the following text:

v=###&amp;

We need to do this because the XSLT transforms in Office Live is not handling the encoding of &amp; and an error is generated. This however does not affect the rendering of the toolbar. You should end up with something like this:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html" />

<xsl:template match="/Footer">

<!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_default_style">

<a href="http://www.addthis.com/bookmark.php?username=mycode" class="addthis_button_compact">Share</a>

<span class="addthis_separator">|</span>

<a class="addthis_button_preferred_1"></a>

<a class="addthis_button_preferred_2"></a>

<a class="addthis_button_preferred_3"></a>

<a class="addthis_button_preferred_4"></a>

</div>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=mycode"></script>

<!-- AddThis Button END -->

</xsl:template>

</xsl:stylesheet>

Make sure to save this template because we will need to add it to each page where you want this to show. Also you should notice that the HTML snippet you get from AddThis.com may change depending on the version and features you select.  The only thing to watch out for is for the  &amp; code embedded somewhere in the content. You can now click OK and save your page.  Reload the page on the browser, and you will see the toolbar at the location where you placed the module. This may not be the location you want for the toolbar. Not worries, we will move the toolbar to the top right of the page.  This will be done by adding a style class to the content.

Open the page designer, and click on the Site Designer tab. Press the Style Sheet button on the toolbar. A dialog opens which allows us to enter additional styles. Make sure to check Apply Custom CSS code. This enables this feature for the entire site which affects all the pages. This is what we want because we will be adding the module to other pages. Now add the following style:

. addthis_toolbox addthis_default_style {position:absolute;top:10px;margin-left:780px;padding:0px;width:240px;height:30px;overflow:hidden;clear:none;}

. We just added another style to the share link content. Press OK and save the page. Reload the page on the browser and take a look. The share link toolbar should now be in the top right of the website.  Now, you can go ahead and add the modules to the other pages of your website.

The embedding of HTML content can also be done by using JavaScript, but this is a subject for another blog entry.

Thanks for reading.

CodeProject
og-bit.com

With the popularity of social networks on the internet, it is recommended that a website provides users with the flexibility to share your w...

Read Article →

How to create a page template on an Office Live website

The Office Live websites are created on the SharePoint platform and provide a bundle of designer tools that allows for the creation of websites. A new page can be added with ease by selecting from the standard templates. There is a range of templates that allows for the creation of a contact us, services, calendar among others type of pages. The layout from the templates may not be what you need, and there is always the need to do additional work to add your layout with images, side bar panels and other page elements.

There is a feature in Office Live that allows you save all of your hard work and create your own page template. The benefit of this is that you can do the work once and apply the same layout to additional pages. Most websites often have five or more pages, so ideally if we can do the hard work once, things become a lot easier.

To create a page template, we first need to design the layout and settle in how your site should look. This is where you creativity comes in, so you can take your time and design your page. Once you have created the page, we need to save it as a template. This is done as follows:

1) Login to Office Live administration website

2) On the top menu, click Web Site

3) Look for Page Manager (bottom of the page)

4) From the list of pages, select the one that has the design by clicking on the Save as template link

5) On the dialog, enter a template title and file name that easily describes the design you just created. For example, if you are creating a services website, you may want to use the Services title for the template. You will always be able to modify your template properties from the template gallery (Left Navigation Panel). Press OK to save the template

There is now a new custom page template available on your site. To validate this, we should try to add a new page using our custom template:

1) On the Page Manager grid, click the New Page menu

2) On the pop-up dialog, look for Custom Templates (left bottom). There you will see your Services template. Select the template and press the next button

3)On the next page, enter the page title. This is the same name that is used for the menu entry and page address as default. However, you do not have to keep the default values. You can always modify this.

4)Allow the defaults for Navigation and Standard page elements.

5)Press finish

You can now reload your website. You will notice that there is a new menu entry with the new page which looks identically to the page that was used to create the template. The next step is to edit the recently added page and modify the text content or banner to something that better describes what the page is about.

CodeProject

The Office Live websites are created on the SharePoint platform and provide a bundle of designer tools that allows for the creation of websi...

Read Article →

How to load JQuery to a page of an Office Live website

Office Live provides users with a decent page designer to create a website. There is often the need to customize the web pages with more rich content, and you may be limited to what the designer can do. Office Live uses SharePoint and ASPX (.Net) for the creation of the websites, but we can only upload markup pages with no code behind. Nevertheless, this constraint can be overcome by manipulating the UI from the client end. For those cases, we can use a bit of programming ability, and with the use of a JavaScript framework, we can make any plain website look and behave a lot better.

This is where jQuery comes in to help us.  JQuery is a JavaScript framework which can be used to manipulate the DOM on the client, make AJAX calls to other pages and/or websites (keep in mind the cross domain issues). To use this framework, we first need to figure out where to get the file and how to download it to the page.

You can visit http://docs.jquery.com/Downloading_jQuery and get a link to a CDN (Content Delivery Network).  In this case, you could use the Microsoft CDN. Make sure to copy the link.  In the case that you want to save a copy of the file in your website, you can get the latest version of jQuery from jquery.com. Visit the website and look for "Grab the Latest Version" header. Select the production checkbox, click on the download button and save to your computer. This should save the minimized (no spaces, no comments, lighter in size) version of the File. Once you have the copy on your workstation, you can login to your Office Live administration website and upload the file to your document gallery.

We are now ready to add jQuery to our website, and we can do this with the help of a module. Login to the Administration site and select website design. On the page editor, follow these steps:

1) Select the page that needs to be modified

2)Select module

3) Select custom footer (NOT the HTML modules because it uses an IFrame and timer to load the html)

 On the dialog, delete everything and add the following:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

 <xsl:output method="html" />

 <xsl:template match="/Footer">

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> 

</xsl:template>

</xsl:stylesheet>

If you decided to use your document gallery to host the file, you should replace the microsoft url (bold letters) with this:

<script type="text/javascript" src="/documents/jquery-1.4.2.min.js"></script>

Press OK and save the page. You can now load the page and do a view source. You will see that the reference to jQuery is now present on the page.  Now that framework is available to your page, we now need to add the customization script. The framework does not do anything on its own. There is the need for a custom script which will be used  to manipulate the web page. This is part of a different blog which I will be providing soon.

CodeProject
og-bit.com

Office Live provides users with a decent page designer to create a website. There is often the need to customize the web pages with more ric...

Read Article →

How to customize the Office Live page header with an image

The initial website templates that come from Office Live for Small Business are ok to start a website. Once, you need to improve the look of your website you will need further customization which is not offered in the office live page designer interface. There are few ways to replace the header. I will focus on the case in which you may want to use an image as your website header without the need to make any additional changes to your page theme from the office live page designer.

These are the steps to follow:

1) Identify the width of the website:

This is necessary because we need to design an image that has a logo, brand message and perhaps contact information. Create an image with the same width as your site. Examples of this may be 640, 780, 980 in pixels. The image should have a height that matches what you need. Some recommendations may be 75, 100, 150, 200  pixels. This really depends on what you are putting on the header.

2)Upload your new image:

Upload your new image using the upload tool that provides the option to not optimize the image. Office live image optimization tries to reduce the size the image. This often causes the image to lose quality. For your header, you want a high quality image, but you should try not to upload something that is very large.   Anything over 500KB starts to get too large in my opinion. This is the url:

http://YOURSITE.COM/WebsitePageEditor/ImageUploader_NoActiveX.aspx

2) Identify the elements that need to be replaced:

Using tools like firebug (FireFox), Developer tool (IE) you can inspect the webpage for the elements you need to modify.  These elements are the following:

·         MS_MasterHeader

This is the master header space. This is where the image for the header can be paced.

·         MS_MasterHeader table

There is a table inside the master header cell. This table is where office live add the headers with the images.  This will be removed.

3) Add custom styles to your site.

On the Site Designer tab, click the Style Sheet button. This open a dialog with a text area. In the text area add the following:(Notice the dots before the words and replace the file name with your file name)

. MS_MasterHeader img{ border:0;}

. MS_MasterHeader table {display:none;}

On the Site designer tab, click on the header button and remove any text on the Site title and slogan. Select the Logo tab and select the header image you previously uploaded. Look down and on the Display Options, make sure to select Top. Click ok and press the save button on the top menu. Your site should now reflect the new change.

I need to mention that this is just one approach. There are other ways to achieve this or to do something different. For instance, you may want to add HTML, Flash or Silverlight instead of an image. There are ways to achieve this as well, but they may require a bit more technical ability. This is part of a different blog which I will be providing soon.

CodeProject
og-bit.com

The initial website templates that come from Office Live for Small Business are ok to start a website. Once, you need to improve the look of...

Read Article →