In this week's Tip of the Week blog post we will sample a custom control which adds social bookmarks to any page within Sitefinity. In order to achieve this we will create a custom control and reuse some of the already available social bookmarks mark-up.
First let's start by creating the control template for our custom control. For the markup we will use the one which comes built-in with Sitefinity's content view controls. Just take any of the details mode external templates for content view controls and copy the bellow markup in our custom control's template file:
<asp:Repeater ID="BookmarksRepeater" runat="server"> <ItemTemplate> <asp:HyperLink ID="BookmarkLink" runat="server"> <asp:Image ID="BookmarkImage" runat="server" /> </asp:HyperLink> </ItemTemplate> </asp:Repeater>We will also reuse the XML file which contains the list of social bookmarks we want to show and icons. You can find sample of this XML file and icons in ~/Sitefinity/ControlTemplates/News/ for example. Bellow is a snipped of the XML file:
<bookmarks> <itemTemplate> <bookmark title="Facebook" name="Facebook"> <url><![CDATA[http://www.facebook.com/sharer.php?u={0}&t={1}]]></url> </bookmark> <bookmark title="Twitter" name="twitter"> <url><![CDATA[http://twitter.com/home?status=Read "{1}" from {0}]]></url> </bookmark> ... </itemTemplate> <extendedProperty> <image> <imageSize>48</imageSize> <imagePath><![CDATA[~/CustomControls/ControlTemplates/BookMarkImages/{0}_{1}.png]]></imagePath> </image> </extendedProperty></bookmarks>Now lets move to the implementation of our control. We are going to use an XmlDataSource control and point it to our XML file. This control will create a data source of bookmarks which are found under the <itemTemplate> node in our XML file. Under the <extendedProperty> node we will set which size icons we want to use and the path to the folder containing the icons for our social bookmarks. Bellow is the code for our sample control:
using System;using System.ComponentModel;using System.Web;using System.Web.UI.WebControls;using System.Xml;using System.Xml.XPath;using Telerik.Cms;using Telerik.Cms.Web;using Telerik.Cms.Web.UI;namespace Sitefinity.Samples.WebControls{ /// <summary> /// Summary description for PageSocialBookmarks /// </summary> public class PageSocialBookmarks : SimpleControl { #region Fields private string socialBookmarksPath = "~/CustomControls/ControlTemplates/SocialBookMarks.xml"; private string layoutTemplatePath = "~/CustomControls/ControlTemplates/SocialBookmarks.ascx"; private string bookmarkImagesPath; private string bookmarkImagesSize; private string pageTitle; private string pagePath; #endregion #region Properties [WebEditor("Telerik.FileManager.UrlWebEditor, Telerik.FileManager"), Category("Appearance")] public override string LayoutTemplatePath { get { object obj2 = this.ViewState["LayoutTemplatePath"]; if (obj2 != null) { return (string)obj2; } return layoutTemplatePath; } set { this.ViewState["LayoutTemplatePath"] = value; } } //set path to xml file containing social bookmarks [WebEditor("Telerik.FileManager.UrlWebEditor, Telerik.FileManager"), Category("Data")] public string SocialBookmarksPath { get { object obj2 = this.ViewState["SocialBookmarksPath"]; if (obj2 != null) { return (string)obj2; } return socialBookmarksPath; } set { this.ViewState["SocialBookmarksPath"] = value; } } #endregion #region Methods protected override void CreateChildControls() { if (Page == null || DesignMode) { Label noDesignModeLabel = new Label(); noDesignModeLabel.Text = "The Social Bookmarks control cannot be rendered in Design Mode"; this.Controls.Add(noDesignModeLabel); } else { ICmsPage cmsPage = ((CmsSiteMapNode)SiteMap.CurrentNode).GetCmsPage(); base.CreateChildControls(); this.pagePath = HttpContext.Current.Request.Url.ToString(); this.pageTitle = cmsPage.Title; GetBookmarkProperties(); XmlDataSource bookmarksDataSource = new XmlDataSource(); bookmarksDataSource.DataFile = this.socialBookmarksPath; bookmarksDataSource.XPath = "bookmarks/itemTemplate/bookmark"; bookmarksDataSource.ID = "bookmarksDataSource"; this.Container.Controls.Add(bookmarksDataSource); BookmarksRepeater.DataSource = bookmarksDataSource; BookmarksRepeater.ItemDataBound += new RepeaterItemEventHandler(BookmarksRepeater_ItemDataBound); BookmarksRepeater.DataBind(); } } //get settings for bookmarks image path and image size from xml void GetBookmarkProperties() { XmlReaderSettings settings = new XmlReaderSettings(); settings.IgnoreComments = true; settings.IgnoreProcessingInstructions = true; settings.IgnoreWhitespace = true; XmlReader reader = XmlReader.Create((HttpContext.Current.Request.Url.GetLeftPart(UriPartial.Authority) + ResolveUrl(this.socialBookmarksPath)), settings); XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(reader); var imageSize = xmlDoc.GetElementsByTagName("imageSize"); var imagePath = xmlDoc.GetElementsByTagName("imagePath"); if (imageSize.Count > 0) { this.bookmarkImagesSize = imageSize[0].InnerText; } if (imagePath.Count > 0) { this.bookmarkImagesPath = imagePath[0].InnerText; } } void BookmarksRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item) { XPathNavigator navigator = ((IXPathNavigable)e.Item.DataItem).CreateNavigator(); XmlElement xmlElement = (XmlElement)navigator.UnderlyingObject; HyperLink BookmarkLink = (HyperLink)e.Item.FindControl("BookmarkLink"); Image BookmarkImage = (Image)e.Item.FindControl("BookmarkImage"); BookmarkLink.NavigateUrl=string.Format(xmlElement.InnerText,this.pagePath,this.pageTitle); BookmarkLink.ToolTip = xmlElement.GetAttribute("title"); BookmarkImage.ImageUrl = string.Format(this.bookmarkImagesPath, xmlElement.GetAttribute("name"), this.bookmarkImagesSize); } } //reference to the bookmarks repeater [Browsable(false)] public Repeater BookmarksRepeater { get { return base.Container.GetControl<Repeater>("BookmarksRepeater", false, Telerik.Framework.Web.TraverseMethod.DepthFirst); } set { this.BookmarksRepeater = value; } } #endregion }}Now all you need to do is to add the control to your Sitefinity toolbox.
Sample code, XML and markup for the control can be downloaded from this link: PageSocialBookmarks