Custom Property: ShareIt

Posted on September 7, 2009 by Frederik Vig in EPiServer

You’ve probably seen the addthis/sharethis toolbars on various sites that let you easily share a page on social media sites. I’ve made a custom property that allows editors to create their own, from a predefined list of sites (this list can easily be updated with new ones).

Result

Here are some pictures of the end result, both in view and edit mode.

View mode

Picture of ShareIt in EPiServer view mode

Picture of ShareIt expanded in EPiServer view mode

Edit mode

Picture of ShareIt in EPiServer edit mode

To add other sites you simply drag and drop them from Social media sites into Active social media sites.

Picture of ShareIt in EPiServer edit mode

Picture of ShareIt in EPiServer edit mode

The number of icons to show textfield is the number of icons to display on the page (the show more link will show the rest). No value here means that all icons will be displayed.

Picture of ShareIt expanded in EPiServer view mode

Installation

To add ShareIt to your site download the code (bottom of the page), unzip it, go to the install directory and copy FV.ShareIt.dll file into your sites bin folder, copy the language file into the lang folder and then copy the whole FV.ShareIt folder to your sites root folder.

Example

You can now add the ShareIt property to your Page Type. To display it on your page you just need to add an EPiServer Property control and a link to the css file (located under /FV.ShareIt/Styles/styles.css).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <link href="/FV.ShareIt/Styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
        <EPiServer:Property runat="server" PropertyName="MyShareItPropertyName" />
    </form>
</body>
</html>

Extending

To add more predefined sites you just edit SocialMediaSites.xml (located in the xml folder).

<site>
        <name>del.icio.us</name>
        <url><![CDATA[http://delicious.com/post?url={0}&title={1}&notes={2}]]></url>
        <cssclass>delicious</cssclass>
</site>

Where {0} is the url of the page, {1} the title and {2} the introduction (MainIntro).

Download FV.ShareIt from EPiCode, or SVN Checkout the source code.

Related Posts: