Try our conversational search powered by Generative AI!

Eric
Jul 7, 2010
  8724
(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
Build a headless blog with Astro and Optimizely SaaS CMS

I’m a big fan of using the right tool for the right job. I’m also a big fan of Astro , for the right use case. Let's explore Astro to see what it's...

Jacob Pretorius | May 28, 2024

Microsoft announces Natural language to SQL

Finally, Microsoft launches "Natural language to SQL," after it has been available for several months in Optimizely CMS!

Tomas Hensrud Gulla | May 23, 2024 | Syndicated blog

Five easy ways to start personalizing your content right now

If you clicked on this article, you already know that getting the right message to the right person at the right time helps drive conversions and...

Kara Andersen | May 23, 2024

ExtendedCms.TinyMceEnhancements – serwer side webp support

Today I will introduce another small feature of TinyMceEnhancements plugin. The functionality is used to automatically detect whether a browser...

Grzegorz Wiecheć | May 22, 2024 | Syndicated blog