Dung Le
Jul 9, 2010
(2 votes)

How to Add Facebook Like button to product page of EPiServer Commerce

· Read the blog about How to add Facebook Like button to an EPiServer site from Eric Pettersson and I think about “Recommend” button on EPiServer Commerce site.

If some product from EPiServer Commerce site is good and recommended by user, maybe his/her friends like the same product and expose that product to their friends as well. So by having a recommend button on product page of your site, you could get free advertising to a lot of users world-wide, and off course  without doing any old advertising style.

How do we add the Facebook Recommend button?

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

   1: <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=recommend&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

We need to change the “src” attribute of the iframe a little bit. We need to get our url instead of a static url.

For that, create a property looks like this:

   1: /// <summary>
   2: /// Gets the like URL for facebook.
   3: /// </summary>
   4: /// <value>The like URL.</value>
   5: protected string LikeUrl
   6: {
   7:     get
   8:     {
   9:         var siteurl = Configuration.Settings.Instance.SiteUrl;
  10:         var page = Page as PageBase;
  11:         if (page != null)
  12:         {
  13:             var code = page.CurrentPage.Property["ec"].ToString();
  14:             Entry entry = CatalogContext.Current.GetCatalogEntry(code);
  15:             var ecfPagePath = GetProductUrl(entry, Request.QueryString["epslanguage"] ?? ContentLanguage.PreferredCulture.Name);
  16:             var link = new UrlBuilder(ecfPagePath);
  17:             var url = Server.UrlEncode(UriSupport.Combine(siteurl.ToString(), link.ToString()));
  18:             return url;
  19:         }
  20:         return Request.Url.ToString();
  21:     }
  22: }
  25: private static string GetProductUrl(Entry entry, string language)
  26: {
  27:     string str = string.Empty;
  28:     var languageSeo = entry.SeoInfo.Where(seo => seo.LanguageCode.Equals(language,
  29:                                     StringComparison.OrdinalIgnoreCase)).FirstOrDefault();
  30:     if (languageSeo != null)
  31:     {
  32:         str = languageSeo.Uri;
  33:     }
  34:     return str;
  35: }

Then change the “src” attribute in the iframe to use our new property instead:

   1: <iframe src="http://www.facebook.com/plugins/like.php?href=<%= LikeUrl %>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=recommend&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Enjoy EPiServer Commerce and Facebook with this example :)

Jul 09, 2010


Eric Sep 21, 2010 10:33 AM

Nice! :)

Sep 21, 2010 10:33 AM

Awesome! :)
/ Tobias Nilsson

Please login to comment.
Latest blogs
IDX21323 - RequireNonce is true, Nonce was null

We have multiple clients configured with Azure Active Directory (Microsoft Entra) for requiring authentication when accessing their website. The...

David Drouin-Prince | Oct 1, 2023 | Syndicated blog

Minimum Detectable Effect in Optimizely Web Experimentation

Understanding Minimum Detectable Effect Minimum Detectable Effect (MDE) is a core statistical calculation in Optimizely Web Experimentation. In...

Matthew Dunn | Oct 1, 2023 | Syndicated blog

Configured Commerce - Introduction to Long-Term Support (LTS) Releases

First off, for those who have not had a chance to meet me yet, my name is John McCarroll, and I am the Technical Product Manager for the Optimizely...

John McCarroll | Sep 29, 2023

Auto-translate with OpenAI in Optimizely CMS

You can now auto-translate content using your favorite online AI service, inside the old trustworthy Episerver.Labs.LanguageManager!

Tomas Hensrud Gulla | Sep 29, 2023 | Syndicated blog