I recently build a social media share function for Facebook, Twitter, LinkedIn and Google+ in a Sitecore CMS solution. There is also an add to favorites in Internet Explorer and Bookmark for Mozilla Firefox. The icons slides out when clicking the share-icon using jQuery toggle. The icons are all stored in one image using CSS sprite technique.

The ShareSprite.png file
The .psd-file if you need to add more icons to the sprite: ShareSprite.zip

This is the code (version 1.0):

Share.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Share.ascx.cs" Inherits="Website.Usercontrols.Share" %>

<span onclick="ToggleShare();"><sc:Text runat="server" ID="ShareThisPageText" DataSource="/sitecore/Content/Settings/Labels/ShareThisPage" Field="Phrase" /></span>

<asp:Image ID="ShareImage" runat="server" ImageUrl="~/Images/Trans.png" CssClass="share" />

<script type="text/javascript">
    var pageUrl = document.location;
    var pageTitle = document.title;
   
    function ToggleShare() {
        $('#ShareContainer').toggle('fast');
    };
</script>

<div id="ShareContainer" style="display: none">
<script type="text/javascript">
//<![CDATA[
    document.write('<a href="http://www.facebook.com/share.php?u=' + encodeURIComponent(pageUrl) + '&t=' + encodeURIComponent(pageTitle) + '" target="_blank">')
//]]>
</script>
<asp:Image ID="FacebookImage" runat="server" ImageUrl="~/Images/Trans.png" AlternateText="Facebook" CssClass="facebook" />
<script type="text/javascript">
//<![CDATA[
    document.write('</a>');
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
    document.write('<a href="https://twitter.com/share?url=' + encodeURIComponent(pageUrl) + '&text=' + encodeURIComponent(pageTitle) + '" target="_blank">')
//]]>
</script>
<asp:Image ID="TwitterImage" runat="server" ImageUrl="~/Images/Trans.png" AlternateText="Twitter" CssClass="twitter" />
<script type="text/javascript">
//<![CDATA[
    document.write('</a>');
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
    document.write('<a href="http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle) + '" target="_blank">')
//]]>
</script>
<asp:Image ID="LinkedInImage" runat="server" ImageUrl="~/Images/Trans.png" AlternateText="LinkedIn" CssClass="linkedin" />
<script type="text/javascript">
//<![CDATA[
    document.write('</a>');
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
    document.write('<a href="https://plus.google.com/share?url=' + encodeURIComponent(pageUrl) + '" target="_blank">')
//]]>
</script>
<asp:Image ID="GooglePlusImage" runat="server" ImageUrl="~/Images/Trans.png" AlternateText="Google+" CssClass="googleplus" />
<script type="text/javascript">
//<![CDATA[
    document.write('</a>');
//]]>
</script>

<a href="#" onclick="javascript:AddBookmark(pageTitle,pageUrl);">
    <asp:Image ID="FavoriteImage" runat="server" ImageUrl="~/Images/Trans.png" AlternateText="Add to favorite" CssClass="favorite" />
</a>

</div>

Share.cs

using System;
using Sitecore.Data.Items;
using Website.Helpers;

namespace Website.Usercontrols
{
    public partial class Share : ExternalWebClassLibrary.RenderingBase
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            var shareItem = ExternalWebClassLibrary.CommonText.get("/sitecore/Content/Settings/Labels/", "ShareThisPage");
            ShareImage.AlternateText = shareItem.Fields["Phrase"].ToString();
            ShareImage.Attributes.Add("onclick", "ToggleShare();");
        }
    }
}

style.css

.share { background:url('../Images/ShareSprite.png') no-repeat 0 0;width: 16px; cursor: pointer; }
#ShareContainer
{
    position: absolute;
    right: 0;
    background: #EEE;
    border: 1px solid #DDD;
    padding: 0 4px;
    margin: 2px 0;
}

#ShareContainer img { width: 16px; }
.facebook { background:url('../Images/ShareSprite.png') no-repeat -16px 0; }
.twitter { background:url('../Images/ShareSprite.png') no-repeat -32px 0; }
.linkedin { background:url('../Images/ShareSprite.png') no-repeat -48px 0; }
.googleplus { background:url('../Images/ShareSprite.png') no-repeat -64px 0; }
.favorite { background:url('../Images/ShareSprite.png') no-repeat -80px 0; }

the aspx-page

Just insert the user control wherever you need it.

<%@ Register src="~/Usercontrols/Share.ascx" tagname="Share" tagprefix="uc" %>

<uc:Share ID="ShareUserControl" runat="server" />

ASP.NET C#, C#, Sitecore

By Daniel  -      

---