Criando um controle de Mídia Social para Umbraco v6+

[ATUALIZADO] Motivação:  

Em WordPress e outras plataformas, há módulos/widgets/plugins que permitem que o usuário insira seus dados de mídia social e o site renderiza automaticamente.

Em Umbraco, não existia tal módulo. Então, criei um pequeno controle que guarda os dados de mídias sociais e renderiza numa página qualquer, como macro (Razor). Criando um controle de Mídia Social para Umbraco v6+ demonstra como faze-lo:

Quando o usuário clica no icone (como na figura acima) uma nova janela se abre no site do usuário.

No controle, já inclui alguns sets de icones encontrados na internet (ver documentação). Em versões futuras, há interesse em programar de forma que quaisquer novos pacotes de icones sejam reconhecidos automaticamente.

Mas, no momento, o código ficou assim:

SocialMedia.ascx

<%@  Control  Language="C#"  AutoEventWireup="true"  CodeFile="Social  Media.ascx.cs"
        Inherits="UserControls_Social_Media"  ClientIDMode="Static"  %>
<strong>Style:
        <asp:DropDownList  ID="dpStyles"  runat="server"  AutoPostBack="true">
        </asp:DropDownList>
</strong><strong>
        <asp:CheckBox  ID="chkShowLabel"  runat="server"  Text="Show  Channel  Label"  OnCheckedChanged="chkShowLabel_CheckedChanged"  /></strong>

<table  style="width:100%;text-align:center;">
        <tr>
                <td>
                        <asp:Table  ID="tableLinks"  runat="server">
                        </asp:Table>
                </td>
                <td  style="vertical-align:top;  width:200px;text-align:left;">
                        <table>
                                <tr>
                                        <th>Theme  Name</th>
                                        <td><%=Name  %></td>
                                </tr>
                                <tr>
                                        <th>Description</th>
                                        <td><%=Description  %></td>
                                </tr>
                                <tr>
                                        <th>Creator</th>
                                        <td><%=Creator  %></td>
                                </tr>
                                <tr>
                                        <th>Created  Date</th>
                                        <td><%=Created  %></td>
                                </tr>
                                <tr>
                                        <th>Url</th>
                                        <td><a  href="<%=Url  %>"  target="_blank"><%=Url  %></a></td>
                                </tr>
                        </table>
                </td>
        </tr>
</table>

No code-behind (SocialMedia.ascx.cs)

using  Social_Media_Channels.Engine;
using  Social_Media_Channels.Engine.Utilities;
using  Social_Media_Channels.Entities;
using  System;
using  System.Configuration;
using  System.Web.UI;
using  System.Web.UI.WebControls;

public  partial  class  UserControls_Social_Media  :  System.Web.UI.UserControl,  umbraco.editorControls.userControlGrapper.IUsercontrolDataEditor
{
        private  Manager  _manager  =  null;
        static  Manager  _tmp  =  null;

        public  string  Name  {  get;  set;  }
        public  string  Description  {  get;  set;  }
        public  string  Creator  {  get;  set;  }
        public  string  Created  {  get;  set;}
        public  string  Url  {  get;  set;  }

        protected  override  void  OnInit(EventArgs  e)
        {
                string  ThemesFolder  =  ConfigurationManager.AppSettings["SocialMediaThemeFolder"]  ==  null  ?  null  :  ConfigurationManager.AppSettings["SocialMediaThemeFolder"].ToString();

                _manager  =  new  Manager(ThemesFolder,  false,  true);
                _tmp  =  new  Manager(ThemesFolder,  false,  true);

                if  (!Page.IsPostBack)
                {
                        _manager.ThemesDropdownList(ref  dpStyles,  _manager.Themes);
                }

                base.OnInit(e);
        }

        protected  void  Page_Load(object  sender,  EventArgs  e)
        {
                _manager.LoadSelectedTheme(dpStyles.SelectedValue);
                _manager.ShowLabels  =  chkShowLabel.Checked;
                _manager.RenderSocialItems(tableLinks,  _manager.CurrentTheme);

                //Theme  details
                Name  =  _manager.CurrentTheme.ID;
                Description  =  _manager.CurrentTheme.Description;
                Creator  =  _manager.CurrentTheme.Creator;
                Created  =  _manager.CurrentTheme.CreatedDate;
                Url  =  _manager.CurrentTheme.Url;
        }
        public  object  value
        {
                get
                {
                        foreach  (Channel  channel  in  _manager.CurrentTheme.Channels)
                        {
                                string  ctrl  =  "txt"  +  channel.ID;
                                channel.Url  =  ((TextBox)tableLinks.FindControl(ctrl)).Text;
                        }

                        string  json  =  JsonHelper.JsonSerializer<Manager>(_manager);
                        return  json;
                }
                set
                {
                        if  (value.ToString()  !=  string.Empty)
                        {
                                _tmp  =  (Manager)JsonHelper.JsonDeserialize<Manager>(value.ToString());
                                _manager.ShowLabels  =  _tmp.ShowLabels;
                                _manager.CurrentThemeID  =  _tmp.CurrentThemeID;

                                dpStyles.SelectedValue  =  _manager.CurrentThemeID;
                                chkShowLabel.Checked  =  _manager.ShowLabels;
                                LoadTheme();
                        }
                }
        }

        protected  void  chkShowLabel_CheckedChanged(object  sender,  EventArgs  e)
        {
                _manager.ShowLabels  =  (chkShowLabel.Checked);
        }

        private  void  LoadTheme()
        {
                _manager.LoadSelectedTheme(_tmp.CurrentThemeID);
                _manager.LoadSavedUrls(_manager.CurrentTheme,  _tmp.CurrentTheme);
        }
}

Já no front-end, foi criado um Macro usando Razor, de forma a renderizar os icones

@inherits  umbraco.MacroEngines.DynamicNodeContext
@using  umbraco.NodeFactory;
@using  umbraco.MacroEngines;
@using  System.Configuration;
@{
        var  nodeId  =  Parameter.NodeID;
        DynamicNode  node  =  Library.NodeById(nodeId);
        string  ThemesFolder  =  ConfigurationManager.AppSettings["SocialMediaThemeFolder"]  ==  null  ?  null  :  ConfigurationManager.AppSettings["SocialMediaThemeFolder"].ToString();
        Social_Media_Channels.Engine.Manager  manager  =  new  Social_Media_Channels.Engine.Manager(ThemesFolder,  false,  true);
        Social_Media_Channels.Engine.Manager  tmp;

        try
        {
                tmp  =  Social_Media_Channels.Engine.Utilities.JsonHelper.JsonDeserialize<Social_Media_Channels.Engine.Manager>(node.PropertiesAsList[node.PropertiesAsList.Count  -  1].ToString());
                manager.ShowLabels  =  tmp.ShowLabels;
                manager.LoadSelectedTheme(tmp.CurrentThemeID);
                manager.LoadSavedUrls(manager.CurrentTheme,  tmp.CurrentTheme);

        }
        catch  {              tmp  =  new  Social_Media_Channels.Engine.Manager(ThemesFolder,  false,  true);        }
}
<ul  class="social-channels"  id="social-channels">
        @if  (tmp.CurrentTheme  !=  null)
        {
                foreach  (Social_Media_Channels.Entities.Channel  channel  in  manager.CurrentTheme.Channels)
                {
                        if  (channel.Url  !=  "")
                        {
                                <li  class="social-channel">
                                        @Html.Raw(Social_Media_Channels.Engine.Manager.RenderRawA(manager.CurrentTheme,  channel))
                                        @if  (manager.ShowLabels)
                                        {
                                                <span  class="label"><a  href="@channel.Url"  target="_blank">@channel.Name</a></span>
                                        }
                                </li>
                        }
                }
        }
        else
        {
                <li  class="social-channel">No  Channels  were  found,  please  check  your  settings</li>
        }
</ul>

Assim, numa página, usase o macro

<%@  Master  Language="C#"  MasterPageFile="~/umbraco/masterpages/default.master"  AutoEventWireup="true"  %>

<asp:Content  ContentPlaceHolderID="ContentPlaceHolderDefault"  runat="server">
<!DOCTYPE  HTML>

<html>

<head>
	<meta  http-equiv="Content-Type"  content="text/html;  charset=UTF-8"  />
	<title>Social  Media  Channels  Example</title>
	<style>
		body{font-family:Candara;width:600px;margin:0  auto;}
		ul{list-style:none;}
	</style>
</head>

<body>

	<header>
		<nav>
			<ul>
				<li></li>
			</ul>
		</nav>
	</header>

	<section>

		<article>
			<header>
				<h2>Social  Media  Channels  Demo</h2>
				<umbraco:Macro  NodeId="1047"  Alias="SocialMediaChannels"  runat="server"></umbraco:Macro>
			</header>

		</article>

	</section>

	<aside>
	</aside>

	<footer>
		<p>Copyright  &copy;  2013  zuEuz  Tecnologia  &amp;  Negocios</p>
	</footer>

</body>

</html>

</asp:Content>

E fica renderizado desta forma

Dentro do Umbraco, o gerenciador de Midias Sociais renderiza desta forma

Visite a página do projeto no site Umbraco