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
Plug-in manager is back in CMS 12

Plug-in manager is back in the UI, what is it and how can i use it?

Luc Gosso (MVP) | Oct 6, 2022 | Syndicated blog

Display Child Pages in Content Delivery API Response

The below example will implement an instance of IContentConverterProvider to customise the serialisation of PageData and output child pages in the...

Minesh Shah (Netcel) | Oct 4, 2022

Bring the Report Center back in Optimizely CMS 12

The Report Center has been a part of Optimizely CMS since its first debut in version 5R2 in 2008, but in CMS 12, it's removed! Don't despair! Make...

Tomas Hensrud Gulla | Oct 4, 2022 | Syndicated blog

Customizing Property Lists in Optimizely CMS

Generic property lists is a cool editorial feature that has gained a lot of popularity - in spite of still being unsupported (officially). But if y...

Allan Thraen | Oct 2, 2022 | Syndicated blog