More in this section
Blogs RSS feed

Implementing Sitefinity widgets and designers: How to implement Facebook Like button

by User Not Found

Table of contents


Widgets (controls) are one of the key points of the extensibility in Sitefinity. Widgets are a small piece of functionality that users of Sitefinity can drag on the page in order to create page content. Sitefinity comes with numerous widgets out of the box (such as Blog Posts, Image Gallery and so on), but the ability to create new widgets and extend Sitefinity is really where Sitefinity shines. In this blog post, I will demonstrate how to create a widget for the Facebook Like button with a designer that is able to configure this widget.

Video of the final result

Before we dive deeper into the implementation of this widget, take a look at the short video that demonstrates the final result.

NOTE 1: You do not yet have Like button widget in your toolbox, as it is shown in the video. Scroll down to Installation instructions and code download to see how to add Like button to your toolbox.

NOTE 2: The error you will see towards the end of the video, results from the fact that the page that was liked is on the localhost and Facebook cannot reach it to verify it. This is ok; on the live site this will work fine.

You can take a look at the video here.

Code walkthrough

When implementing a widget, generally only one class is enough – the control that represents the widget. In Sitefinity, it is a very good idea to inherit from a base class called SimpleView, when implementing widgets.

If the widget is to be configured by the users, we may also decide to implement a widget designer, in order to provide a user friendly way of configuring the widget. Note that even if you don’t implement the widget designer, users will still be able to configure the widget through the automatically generated property grid. Now, take a look at the following screenshots to get a better feeling of the terminology.

Figure 1: Widget
Figure 1: Widget – this is the content or functionality visible to your users

Figure 2: Widget designer 

Figure 2: Widget designer – this is the user friendly way to configure your widget. Note that widget designers need to be implemented; they are not automatically generated. You have absolute freedom in designing the user interface of a widget designer.

Figure 3: Property grid 
Figure 3: Property grid – property grid is an automatically generated by examining all the properties of your widget that are a) public and b) browsable. Every single widget when used by Sitefinity will automatically generate this editor and you do not need to do anything.


So, now that we are clear on the terminology, let’s start explaining the files included in the project and their purpose.

  • LikeButton.cs
    This class is the actual widget. When rendered, this class will provide a “Facebook like button” on the page. You will notice that this class uses an embedded template (LikeButton.ascx) which simply includes the javascript provided by Facebook and have one literal control inside which Facebook button tag will be rendered. If you are unfamiliar with Facebook Like Button, you can read more about it here: Since, Facebook Like button can be configured in many ways, we are providing certain properties that will allow for this, such as “LayoutStyle”, “ShowFaces” and so on.

    In order to tell Sitefinity that LikeButton widget has an associated designer, you need to place the ControlDesigner attribute at the top of the LikeButton class, providing the type of the designer as an argument, like this:
  • LikeButtonDesigner.cs
    This class is the control that represents the designer (user friendly editor for the LikeButton). Note that most of the logic is actually located in the associated JavaScript file, and that this class is mostly concerned by providing the user interface (in case you are wondering why is this so, please read the A bit of background part). Now, similarly to the LikeButton class, we are also using an embedded template in this class, called LikeButtonDesigner.ascx. In that template we have defined the user interface that has a purpose to provide the values to the properties of the LikeButton class (remember that designer’s purpose is to edit the properties of the control it is “designing”).

    LikeButtonDesigner class is inheriting from the ControlDesignerBase control, which implements IScriptControl, so we are able to associate a JavaScript file with this control and pass the references to the child controls in the GetScriptDescriptors method.

    If you are unfamiliar with the IScriptControl interface and general development of the ASP.NET Ajax controls, you may find further information here, even though it is not absolutely necessary for this article.
  • LikeButtonDesigner.js
    This is the javascript file that provides the logic of setting the properties. Sitefinity provides a very powerful framework that let’s you focus simply on your actual implementation, forgetting all about the complexities of web services, serialization / deserialization and cooperation between server side code and client side code.

    Every javascript object needs to implement Telerik.Sitefinity.Web.UI.ControlDesign.IControlDesigner client side interface, which in reality mandates that you implement following members (Sitefinity will provide these members with proper values on its own):

    - get_propertyEditor()
    You can use this property to get the instance of the parent object, called “PropertyEditor”. This object holds references to both designer and property grid. Generally you don’t need to use this property.
    - set_propertyEditor()
    Used by Sitefinity; do not use.
    - get_controlData()
    Gets you the serialized version of the widget. This is how you modify the properties. For example, if you wish to set the “ShowFaces” property of our LikeButton widget to true, you would do it like this:
    this.get_controlData().ShowFaces =  true;
    - refreshUI()
    This method is called, when you need to refresh or update the user interface of your designer with the new data. Sitefinity automatically calls this method every time it needs to (for example, user switches to advanced mode and changes some properties in the property grid, then switches back to the simple mode or designer – this method will be called so that you can update the user interface of your designer with the changes that have been made in the advanced mode. Generally you can think of this method as “from data to user interface”.
    - applyChanges()
    This method is called, when Sitefinity needs to get the properties from your designer. For example, let’s say that user clicks the “Done” button in the designer. In that case Sitefinity needs to get all the properties from your designer and persist them so that it can render the widget properly. Generally, you can think of this method as “from user interface to data”.

A bit of background

Many people have complained that this new approach is too complicated, mainly saying that in 3.7 it has been simpler. I would have to disagree with this. Namely, most of the concerns come from the fact that we require you to build a designer with client side code and server side code is not an option.


First, let me explain why is it necessary that the designers are implemented on the client side. Namely, Sitefinity 4.0 is not using postbacks at all – and this would introduce quite an inconsistency if we’d use postbacks here. In order to make both, designers and property grid, be synchronized and be so without the postbacks we have decided to go this way. There is no doubt that your users like this approach better.

Now, editing the server side controls through a client side code is not exactly trivial matter. However, by providing a framework that takes care of persistence of properties, proper event calling, serialization and deserialization of the controls, we have simplified this to a trivial task. If you think about it, all that you are required to do is to modify a javascript object that looks exactly the same as your server side control – Sitefinity takes care of everything else.

The sample provided in this blog post can be used as a starting point for any widget / designer implementation and by minimally changing it (only the things that are really different) you can have your designers up and running in no time. For example, it took me less than 2 hours to write this sample.

I hope this clarifies some of the misunderstandings with the new approach to widgets and designers.

Installation instructions and code download

  1. Create a new Sitefinity or use existing website. Open this website in Visual Studio.
  2. Download the project from here.
  3. Extract the zipped file in the parent folder of your website
  4. Right-click on the solution and select “Add” then “Existing project”
  5. Navigate to the folder that you have extracted and double click on the Telerik.Sitefinity.Samples.SocialTools.csproj file
  6. Expand the “References” folder of the project that you have just added and make sure that all references are working. If not, replace the references that are broken with the ones from the bin folder of your website.
  7. Build the project.
  8. Run the project
  9. Navigate to Sitefinity administration area
  10. Navigate to “Administration” > “Settings”
  11. Switch to “Advanced” settings
  12. In the tree, navigate to “Toolboxes” > “Toolboxes” > “Page controls” > “Sections” > “Content toolbox section” > “Tools”
  13. Click on “Create new” to add the widget to the page editor toolbox in the section “Content” (the first one)
  14. In the ControlType textbox type:
    Telerik.Sitefinity.Samples.SocialTools.LikeButton, Telerik.Sitefinity.Samples.SocialTools
  15. In the Name textbox type:
  16. In the Title textbox type:
    Like button
  17. In the Description textbox type:
    Facebook Like button
  18. Click “Save changes”
  19. Navigate to Pages
  20. Create a new page or open existing one
  21. Locate the widget “Like button” in the first section of the toolbox “Content” and drag it on the page. Edit it if you decide to.
  22. Publish the page
  23. View the page and click on the like button (you may need to be logged in to Facebook to do so).


Leave a comment
  1. Preetham Reddy Jan 19, 2011

    Thank you so much....

    Sitefinity is fantastic...
  2. Preetham Reddy Jan 24, 2011
    Hello Ivan,

    There is a bug in the LikeButton.cs file.

    There is no closing tag for <fb:like> tag in the InitializeControls function.

    The line sb.Append("</fb:like>"); should be replaced with

  3. Dan Jan 27, 2011
    I'm getting the javascript error: "Could not load file or assembly 'Telerik.Sitefinity.Samples.SocialTools' or one of its dependencies. The system cannot find the file specified."

    Is this an error that is corrected with your step 6 above?
  4. Dan Jan 27, 2011
    Yup, looks like it was a missing reference.
  5. Tony Mar 31, 2011
    Did you get it to work Dan?
  6. Liz Apr 15, 2011
    @Dan, what reference was it missing?  I'm looking at my references and all appear to be working, but I'm getting the same Could not load file or assembly error
  7. Vesko May 25, 2011
    Several things needs to be done to make it work:
    1. As Preetham said, you need to close the opening <fb ...> tag in LikeButton.cs:
    Line 125 should look like this:

    2. Add a reference to your SitefinityWebApp project to the Telerik.Sitefinity.Samples.SocialTools project so the Telerik.Sitefinity.Samples.SocialTools.dll file is copied to the Bin folder of Sitefinity.

    3. Give a title of the widget.

    Hope this helps
  8. seth Jun 21, 2011
    Definitely not a fan of this approach. Sitefinity is losing sight of the fact that people like the software because of its quick installation. This new architecture requires a lot more work for developers.

    Its elegant, but not simple.
  9. Dale Jones Aug 17, 2011
    I don't have Visual Studio on the web server. What do I do to get around the 'Could not load file or assembly' error?
  10. Freight Forwarding Apr 05, 2018
    Thank you for another great article. Where else could anyone get that kind of information in such a perfect way of writing? I have a presentation next week, and I am on the look for such information.Freight Forwarding
  11. robo Apr 11, 2018
    An fascinating discussion is value comment. I think that it is best to write extra on this matter, it won’t be a taboo topic however generally people are not enough to talk on such topics. To the next. CheersDETECTIVES PRIVADOS MADRID
  12. robo Apr 18, 2018
    This article gives the light in which we can observe the reality. This is very nice one and gives indepth information. Thanks for this nice article.DETECTIVE PRIVADO
  13. robo Apr 24, 2018
    Thanks for this great post, i find it very interesting and very well thought out and put together. I look forward to reading your work in the future.DETECTIVES MADRID
  14. robo Apr 30, 2018
    Thanks for another wonderful post. Where else could anybody get that type of info in such an ideal way of writing?DETECTIVES MADRID
  15. sami May 07, 2018
    Very good written article. It will be supportive to anyone who utilizes it, including me. Keep doing what you are doing – can’r wait to read more posts.TSM Agency
  16. robo May 15, 2018
    Your article has piqued a lot of positive interest. I can see why since you have done such a good job of making it interesting.bomberman
  17. sami May 16, 2018
    I was reading your article and wondered if you had considered creating an ebook on this subject. Your writing would sell it fast. You have a lot of writing talent.DETECTIVES PRIVADOS MADRID
  18. sami May 22, 2018
    hi was just seeing if you minded a comment. i like your website and the thme you picked is super. I will be back.como ganhar seguidores no instagram
  19. robo May 23, 2018
    Como ganhar curtidas no instagram de um modo rápido, seguro é com o site Curtidas Grátis. O melhor site para ganhar curtidas e likes no Instagram.
  20. robo May 24, 2018
    I read that Post and got it fine and informative.2018 P Penny Box - 2018 D Penny
  21. sami May 28, 2018
    I found this is an informative and interesting post so i think so it is very useful and knowledgeable. I would like to thank you for the efforts you have made in writing this article.Office Mail Malaysia
  22. sami May 30, 2018
    Thanks for sharing this information. I really like your blog post very much. You have really shared a informative and interesting blog post with people..Detectives Madrid
  23. robo Jun 06, 2018
    For over 10 years, Hair Restoration Laboratories has developed and offered to men and women the most effective dht blocking shampoos and conditioners to help reverse hair loss and regrow stronger, thicker and healthier hair.Dht shampoo
  24. robo Jun 07, 2018
    Hi, I find reading this article a joy. It is extremely helpful and interesting and very much looking forward to reading more of your work..Detective en Madrid
  25. sami Jun 09, 2018
    No doubt this is an excellent post I got a lot of knowledge after reading good luck. Theme of blog is excellent there is almost everything to read, Brilliant post.round neck printing singapore
  26. sami Jun 22, 2018
    I’ve been searching for some decent stuff on the subject and haven't had any luck up until this point, You just got a new biggest fan!..Investigadores privados Madrid
  27. jone Jun 25, 2018
    I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. Scottsdale
  28. robert Jun 26, 2018
    I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.this
  29. jone Jun 28, 2018
    I'm glad I found this web site, I couldn't find any knowledge on this matter prior to.Also operate a site and if you are ever interested in doing some visitor writing for me if possible feel free to let me know, im always look for people to check out my web site.Flowers
  30. jone Jun 30, 2018
    After nearly a decade of research, Hair Restoration Laboratories is proud to offer what it has developed to be the most effective minoxidil available to reverse hair loss and regrow thicker, stronger and healthier hair.Top minoxidil 2018
  31. jone Jul 03, 2018
    thanks for this usefull article, waiting for this article like this again.DETECTIVE MADRID
  32. detective Jul 14, 2018
    I am hoping the same best effort from you in the future as well. In fact your creative writing skills has inspired me.detectives Madrid

    Leave a comment