Try our conversational search powered by Generative AI!

Eric
Jul 7, 2010
  8689
(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
Identify Azure web app instance id's for an Optimizely CMS site

When running Optimizely CMS in Azure, you will be using an instance bound cloud license. What instances are counted, and how can you check them? Le...

Tomas Hensrud Gulla | Feb 27, 2024 | Syndicated blog

Introducing Image Transformer - AI Assistant for Optimizely

We've got something super cool to share with you, and it's all about giving your images a fresh spin. Image Transformer, the latest feature from ou...

Luc Gosso (MVP) | Feb 26, 2024 | Syndicated blog

Welcome 2024 Winter OMVPs

Hello, Optimizely community! We are thrilled to announce and welcome the newest members to the Optimizely Most Valuable Professionals (OMVP) progra...

Patrick Lam | Feb 26, 2024

Optimizely Opal... what it does actually do?

At Opticon 2023, Optimizely announced its first AI product Opal. AI is definitely the new tech buzzword in 2024 and with promises that AI will be...

Jon Jones | Feb 25, 2024 | Syndicated blog

How to add more Content Area Context Menu Item in Optimizely CMS 12

Hey folks, today I will share something related to Context Menu customization in the Content Area of Optimizely CMS. As you know, the content area ...

Binh Nguyen | Feb 25, 2024

Developer meetups in Stockholm & Helsinki

It's time for developer meetups! Next month we will be in Stockholm and Helsinki. Join us for getting the latest updates from Optimizely, be inspir...

Magnus Kjellander | Feb 23, 2024