Add Facebook Like to your Silverlight application

In this post you will find out what you need to do if you want to add a Facebook Like button to your Silverlight application.

The strait forward approach is to add a button to your application and make it look the same as the one on Facebook. Then you need to Facebook authenticate the person that clicked the like button and add your Facebook page to the list of pages that he likes. This is very difficult to implement and requires knowledge of the Facebook API. You can also try to use the Codeplex Facebook SDK but that requires you to have a Facebook application, if you have a Facebook personal page or a website the SDK will not help.

The simple way to do this is to integrate the Html Facebook like button into your Silverlight application. In order to do this you need an HtmlHost control that will display the Html like button. Since the standard Microsoft WebBrowser control only works when running in out-of-browser mode I have used the divelements free HtmlHost control. In order to use this control you need to set windowless parameter of your Silverlight plugin to true.

Here is a step by step example:

1) Create a new project named FacebookLikeApplication in Visual Studio 2010 using the SilverlightApplication template; when creating the project check the “Host the Silverlight application in a new Web site” option

2) Download the divelements Silverlight Tools from here; extract, unblock and add a reference of Divelements.SilverlightTools.dll to your FacebookLikeApplication project

3) Open the FacebookLikeApplicationTestPage.aspx and FacebookLikeApplicationTestPage.html, identify the <object .. /> element and add windowless parameter

<form id="form1" runat="server" style="height:100%"> <div id="silverlightControlHost"> <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="ClientBin/FacebookLikeApplication.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="4.0.50826.0" /> <param name="autoUpgrade" value="true" /> <param name="windowless" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/> </a> </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div> </form>

4) Open the MainPage.xaml and add the HtmlHost control

<UserControl x:Class="FacebookLikeApplication.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:divtools="clr-namespace:Divelements.SilverlightTools;assembly=Divelements.SilverlightTools" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <Grid x:Name="LayoutRoot" Background="White"> <divtools:HtmlHost x:Name="htmlHost" /> </Grid> </UserControl>

5) Open the Facebook Like button website from here, fill in the fields and retrieve the Facebook like IFrame

6) Open the MainPage.xaml.cs and set the Facebook like IFrame to htmlHost.SourceHtml property; after you set the value replace the double quotes from the IFrame text with a single quote

namespace FacebookLikeApplication { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); htmlHost.SourceHtml = "<iframe src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMirceaDeliuRO%2F156040061112418&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:450px; height:80px;' allowTransparency='true'></iframe>"; } } }

That’s it! Now you can build and run the application.

Don’t forget to drop me a comment to let me know what you think.

You can download the sample application from here.