Knowledge is power. We love to share it.

News related to Mono products, services and latest developments in our community.


Facebook widgets - like button in MonoX

03/30/2012Categories: MonoX

Facebook Like button brings more interactivity into your pages. MonoX already has its own Like button implemented as a part of the content sharing engine, but that will not be in the topic of this article. Instead, we will focus on how to implement a rudimentary Facebook Like buton.

There are two approaches for creating a Like button: XFBML and Iframe. We will focus on implementng the Iframe version. First thing you need to do is to navigate to Facebook, set your Facebook Like button properties, click on "Get code" button, select "Iframe" tab and you Like button is ready for customization.

In this example we will create our own user control, expose some properties, and use it as a wrapper for our Like button. First you need to create a user control, copy the Facebook Like button code to your control markup, add some properties to the code behind and relate those properties with your markup code. Below is an example how your HTML markup and code behind should look like:


<%@ Control Language="C#"
 <iframe scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:<%= Width %>px; height:<%= Height %>px;" allowTransparency="true"
             src="//<%= UrlToLike %>&
             layout=<%= LayoutStyle.ToString() %>&
             width=<%= Width %>&
             show_faces=<%= ShowFaces.ToString() %>&
             action=<%= VerbToDisplay.ToString() %>&
             colorscheme=<%= ColorScheme.ToString() %>&
             height=<%= Height %>">

Code behind propeties:

#region Properties
        public FBLikeLayoutStyle LayoutStyle { get; set; }
        public FBLikeColorScheme ColorScheme { get; set; }
        public FBLikeVerbToDisplay VerbToDisplay { get; set; }
        private bool _showFaces = true;
        public bool ShowFaces
            get { return _showFaces; }
            set { _showFaces = value; }
        private int _width = 450;
        public int Width
            get { return _width; }
            set { _width = value; }
        private int _height = 80;
        public int Height
            get { return _height; }
            set { _height = value; }
        private string _urlToLike = String.Empty;
        public string UrlToLike
            get { return Server.UrlEncode(_urlToLike); }
            set { _urlToLike = value; }

After implementation, you can add FBLikeButton control to your page, set it's UrlToLike property and check the result on your page. Please bear in mind that this sample control is implemented in a way that requires you to specify a UrlToLike property, otherwise you will get an exception. You can find a complete code for this control in the attachment.

Rated 5.00, 1 vote(s). 
Thank you but..
Where is the "Like button " in Monox?
Hi, as mentioned above, MonoX has social features implemented as a part of the content sharing engine. So can you please post your question, or any furher questions, to our support forum so that other team members could also help you.