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

WCF Secure Channel cannot be opened - Load Balancing with wsHttp Binding

When a WCF service generates the following error:

Exception:

Secure channel cannot be opened because security negotiation with the remote endpoint has failed. This may be due to absent or incorrectly specified EndpointIdentity in the EndpointAddress used to create the channel. Please verify the EndpointIdentity specified or implied by the EndpointAddress correctly identifies the remote endpoint.

Inner Exception:

The request for security token has invalid or malformed elements.

This probably means that the service is running under a load balanced environment, and the WCF settings are not configured correctly. This error is intermittent because the load balancer may be landing on the same server, but when the request is sent to a different server the security token becomes invalid. When using the wsHttpBinding on a Load balanced environment , it is necessary to turn off the security context establishment. The establishSecurityContext attribute should be set to false. By default, this value is true. This needs to be added to both the host and client configurations.The host configuration should look something like this:

<system.serviceModel>

<bindings>

<wsHttpBinding>

<binding name="wsHttpBindingLB">

     <security mode="Message">

         <message clientCredentialType="Windows" establishSecurityContext="false"/>

      </security>

</binding>

</wsHttpBinding>

</bindings>

<behaviors>

<serviceBehaviors>

    <behavior name="ozkary.SerBehavior">

    <serviceMetadata httpGetEnabled="true" />

    <serviceDebug includeExceptionDetailInFaults="true" />

</behavior>

</serviceBehaviors>

</behaviors>

<services>

<service behaviorConfiguration="ozkary.SerBehavior" name="ozkary.Service">

     <endpoint binding="wsHttpBinding" bindingConfiguration="wsHttpBindingLB"             contract="ozkary.IService">                   

                </endpoint>

<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />

</service>

</services>   

</system.serviceModel>

The client configuration should look as follows:

<system.serviceModel>

<bindings>

<wsHttpBinding>

   <binding name="wsHttpBindingLB">               

    <security mode="Message">                    

         <message clientCredentialType="Windows"  establishSecurityContext="false"/>

    </security>

    </binding>

</wsHttpBinding>

</bindings>

<client>

<endpoint  address="myService.svc" binding="wsHttpBinding"

        bindingConfiguration="wsHttpBindingLB" contract="ozkary.IService">               

</endpoint>

</client>  

</system.serviceModel>

Another approach to address this error is to add another endpoint and use BasicHttpBinding instead. This by default provides persistent connections, but if you do not want the persistent connection, it can be disabled by setting the KeepAliveEnabled attribute to false. To learn more about configuring WCF services in a load balanced environment, you can read the following from MSDN:

http://msdn.microsoft.com/en-us/library/ms730128.aspx

I hope this helps.

CodeProject

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

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

Access Master Page Properties from Content Pages using MasterType

In some cases, it may be necessary to allow a content page to set a master page UI element value. This can be achieved by using the page directive @ MasterType.  This creates a strongly typed reference to the ASP.NET master page.

Scenario:

The master page has  a label control (lblMessage). This label is used by each content page to show a different welcome message. In the master page code behind, add public property as follows:

public string Message 
{ 
  get   
  {
     return lblMessage.Text; 
  } 
  set 
  {
    lblMessage.Text = value;
  }
} 

On the content page, add the following directives:

<%@ Master Language="C#" Inherits="~/SiteMaster.master" %>
<%@ MasterType VirtualPath="~/SiteMaster.master" %>

Once the MasterType declaration has been added, you can now access the properties of the master page using the Master class. On the code behind of the content page, add the following code segment:

 //i.e. on the onload event
Master.Message = "Welcome to my content";

Thanks for reading


CodeProject
og-bit.com

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