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 facilitate 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=###&

We need to do this because the XSLT transforms in Office Live is not handling the encoding of & 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>

<!--<span class="code-comment"> AddThis Button END -->
</xsl:template>
</xsl:stylesheet></span>

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 & 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.