Add Facebook Like to your Silverlight Application

• Download source - 58.06 KB

Introduction

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

If you want to see a Live Example, see my XAML blog.

Using the Code

The straight 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 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.

   Open FacebookLikeApplicationTestPage.aspx and FacebookLikeApplicationTestPage.html, identify the <object .. /> element and add the 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="<a href="http://go.microsoft.com/fwlink/
   			?LinkID=149156&v=4.0.50826.0">
                       	<a href="http://go.microsoft.com/fwlink/">http://go.microsoft.com/fwlink/</a>?
   			LinkID=149156&v=4.0.50826.0</a>"
                       style="text-decoration:none"> 
                       <img src="<a href=
   		    "http://go.microsoft.com/fwlink/?LinkId=161376">
                       http://go.microsoft.com/fwlink/?LinkId=161376</a>" 
                       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>

3. Open the MainPage.xaml and add the HtmlHost control:

   <UserControl x:Class="FacebookLikeApplication.MainPage"
       xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
         http://schemas.microsoft.com/winfx/2006/xaml/presentation</a>"
       xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml">
         http://schemas.microsoft.com/winfx/2006/xaml</a>"
       xmlns:d="<a href="http://schemas.microsoft.com/expression/blend/2008">
         http://schemas.microsoft.com/expression/blend/2008</a>"
       xmlns:mc="<a href=
   	"http://schemas.openxmlformats.org/markup-compatibility/2006">
         http://schemas.openxmlformats.org/markup-compatibility/2006</a>"
       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>

4. Open the Facebook Like button website from here, fill in the fields, and retrieve the Facebook Like iframe.
5. Open MainPage.xaml.cs and set the Facebook Like iframe to the 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%2FXAMLBlogCOM%2F1759664691" + 
                  "16158&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;'></iframe>";
           }
       }
   }

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

History

• Version 1