Views: 0
Number of votes: 2
Average rating:

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

eric.pettersson
(By eric.pettersson, 9/21/2010 12:33:27 PM)

Nice! :)

Guest
(By Guest, 9/21/2010 12:33:27 PM)

Awesome! :)
/ Tobias Nilsson

Please login to comment.