Digital Experience
Social Bookmarks control for Sitefinity pages

Social Bookmarks control for Sitefinity pages

by The Progress Team
Posted on March 12, 2010 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

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

Code samples Controls Social Bookmarks Social Networking Tip of the Week
progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments

Comments are disabled in preview mode.
Follow us viaRSS Feed
 
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
More From Progress
 
 
 
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation