Eric
Jul 7, 2010
  8060
(3 votes)

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.

Jul 07, 2010

Comments

pontus.liden@ottoboni.se
pontus.liden@ottoboni.se Sep 21, 2010 10:33 AM

Cool!

Petter Klang
Petter Klang Sep 21, 2010 10:33 AM

Quick and easy, I like!

Please login to comment.
Latest blogs
Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog

The Report Center is finally back in Optimizely CMS 12

With Episerver.CMS.UI 12.12.0 the Report Center is finally re-introduced in the core product.

Tomas Hensrud Gulla | Sep 26, 2022 | Syndicated blog

Dynamic Route in ASP.NET Core When MapDynamicControllerRoute Does Not Work

Background Creating one of the add-on for Optimizely I had to deal with challenge to register dynamically route for the API controller. Dynamic rou...

valdis | Sep 25, 2022 | Syndicated blog

404 Error on Static Assets Within an Optimizely plugin

Background With the move to CMS 12 and .NET 5/6, developers are now able to build Plugins and Extensions using Razor Class Libraries (RCL).  These...

Mark Stott | Sep 23, 2022

How to bypass the content creation view in Optimizely

Something that has come up a couple of times in the last few year is feedback from content editors about the editing view that comes up when creati...

Ynze | Sep 23, 2022 | Syndicated blog

Welcome to Optimizely World's New Tech Video Portal

Optimizely, leader in the digital experience realm, has become a wealth of world class SaaS products including Web Experimentation, Full Stack, B2B...

The Developer Marketing Team of Optimizely | Sep 22, 2022