How to Add Facebook Like Button to an EPiServer site.

Got a question about how do you add a Facebook Like Button to an EPiServer Site. Well it is really easy! :)

First I give you a short introduction to the Like Button from Facebook.

Why should you have a like button on your site?

Well Facebok is a really large site, 2nd most visitied site according to Alexa. Almoste everyone from age 11 to 77 are on facebook and everyone got their news feed where they see update from their friends. In other words, I have 224 friends on facebook, I click on the “like” button on a site that i really like. This will be shown to all of my 224 friends in their news feed.

This is powerful because it is an way to get free advertising and when I like something, it is likely that someone of my friends also will like the same page/site and expose that page to their friends as well. So by having a like button on your site you could get free advertising to thousands of users without doing any old fashion advertising. :)

In my case I pressed the “like”-button on facebook yesterday and today 3 of my friends pressed the same button..in other words they have visited the same page that I did :)

So how do we add the Facebook Like Button?

Well go to Facebook and create your own button, should look something like this

   1: <iframe src="http://www.facebook.com/plugins/like.php?href=mysite.com&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>

What we need to do now is to change the “src”-attribut of the iframe a little bit. We need to get our url instad of a static url,

For that I create a property that looks like this:

   1: public string MyUrl 

   2:        {

   3:            get

   4:            {

   5:                var siteurl = EPiServer.Configuration.Settings.Instance.SiteUrl;

   6:                var url = new UrlBuilder(CurrentPage.LinkURL);

   7:                Global.UrlRewriteProvider.ConvertToExternal(url, null, System.Text.UTF8Encoding.UTF8);

   8:                return Server.UrlEncode(UriSupport.Combine(siteurl.ToString(), url.ToString()));

   9:            }

  10:        

  11:        }

I do this because I need the friendly Url from EPiServer, more about this in Ruwens blog. I also UrlEncode the string because Facebook had some problem with my url without UrlEncode!?

Then change the “src”- attribute in the iframe so that it uses the new property instead.

   1: http://www.facebook.com/plugins/like.php?href=<%= MyUrl%>

Thats about it actually! :)

To customize how your site shows up when users share your page with the Like button, you can add meta data to your web pages:

   1: <meta property="og:title" content="<%=CurrentPage.PageName %>" />

   2: <meta property="og:site_name" content="<%=EPiServer.Configuration.Settings.Instance.SiteUrl %>" />

   3: <meta property="og:image" content="yourbestpictureforthispage.jpg"/>

og:title - The title of your page; if not specified, the title element will be used.
og:site_name - The name of your web site, e.g., "CNN" or "IMDb".
og:image - The URL of the best picture for this page. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1.

The tricky part is to test this before it goes live, but most of you probably have a site that you can test it on first that Facebook can reach! :)

Hopefully you will enjoy this example.