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:
Markup:
<%@ Control Language="C#"
AutoEventWireup="true"
CodeBehind="FBLikeButton.ascx.cs"
Inherits="MyWebSite.Controls.FBLikeButton"
%>
<iframe scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:<%= Width %>px; height:<%= Height %>px;" allowTransparency="true"
src="//www.facebook.com/plugins/like.php?href=<%= UrlToLike %>&
send=false&
layout=<%= LayoutStyle.ToString() %>&
width=<%= Width %>&
show_faces=<%= ShowFaces.ToString() %>&
action=<%= VerbToDisplay.ToString() %>&
colorscheme=<%= ColorScheme.ToString() %>&
font&
height=<%= Height %>">
</iframe>
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; }
}
#endregion
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.