World is now on Opti ID! Learn more

Dung Le
Jul 9, 2010
  4436
(0 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: }
  24:  
  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

Comments

Please login to comment.
Latest blogs
Make Global Assets Site- and Language-Aware at Indexing Time

I had a support case the other day with a question around search on global assets on a multisite. This is the result of that investigation. This co...

dada | Jun 26, 2025

The remote server returned an error: (400) Bad Request – when configuring Azure Storage for an older Optimizely CMS site

How to fix a strange issue that occurred when I moved editor-uploaded files for some old Optimizely CMS 11 solutions to Azure Storage.

Tomas Hensrud Gulla | Jun 26, 2025 |

Enable Opal AI for your Optimizely products

Learn how to enable Opal AI, and meet your infinite workforce.

Tomas Hensrud Gulla | Jun 25, 2025 |

Deploying to Optimizely Frontend Hosting: A Practical Guide

Optimizely Frontend Hosting is a cloud-based solution for deploying headless frontend applications - currently supporting only Next.js projects. It...

Szymon Uryga | Jun 25, 2025

World on Opti ID

We're excited to announce that world.optimizely.com is now integrated with Opti ID! What does this mean for you? New Users:  You can now log in wit...

Patrick Lam | Jun 22, 2025

Avoid Scandinavian Letters in File Names in Optimizely CMS

Discover how Scandinavian letters in file names can break media in Optimizely CMS—and learn a simple code fix to automatically sanitize uploads for...

Henning Sjørbotten | Jun 19, 2025 |