Click here to Skip to main content
Click here to Skip to main content

Add Facebook Like to your Silverlight Application

, 29 Mar 2011
Rate this:
Please Sign up or sign in to vote.
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.
FacebookLikePicture.png

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">
  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">
  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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Mircea Deliu
Software Developer (Senior) Senior Systems Europe
Romania Romania
Mircea Deliu was born on August 17, 1982. He has been involved with computers in one way or another since high school, but started professionally in 2004. He has focused mostly on Microsoft .Net technologies and it's now working as a Senior Software Developer at Senior Systems Europe using Silverlight and WPF on a daily basis.
 
He likes to think about himself as an open-minded person with a good sense of humor. His hobbies involve traveling, driving his Honda Civic and listening to music (all at once when possible). When he is not working or writing on his blog you can find him in the company of his wife Simona and surrounded by their friends and family.

Comments and Discussions

 
QuestionThats really useful but i have one problem. Pinmemberkulkarni.ajay3-Aug-11 23:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 29 Mar 2011
Article Copyright 2011 by Mircea Deliu
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid