+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Social Bookmarks control for Sitefinity pages

by Radoslav Georgiev
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

2 comments

Leave a comment
  1. Besian Apr 18, 2010
    Hi Radoslav,

    How can I add this control to my website manually, and which specific folders to I copy the files shown on your zip file

    Please let me know,
  2. emlak Apr 19, 2010
    Thank You

    Leave a comment