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

Eric
Eric Sep 21, 2010 10:33 AM

Nice! :)

Sep 21, 2010 10:33 AM

Awesome! :)
/ Tobias Nilsson

Please login to comment.
Latest blogs
Recraft's image generation with AI-Assistant for Optimizely

Recraft V3 model is outperforming all other models in the image generation space and we are happy to share: Recraft's new model is now available fo...

Luc Gosso (MVP) | Nov 8, 2024 | Syndicated blog

ExcludeDeleted(): Prevent Trashed Content from Appearing in Search Results

Introduction In Optimizely CMS, content that is moved to the trash can still appear in search results if it’s not explicitly excluded using the...

Ashish Rasal | Nov 7, 2024

CMS + CMP + Graph integration

We have just released a new package https://nuget.optimizely.com/package/?id=EPiServer.Cms.WelcomeIntegration.Graph which changes the way CMS fetch...

Bartosz Sekula | Nov 5, 2024

Block type selection doesn't work

Imagine you're trying to create a new block in a specific content area. You click the "Create" link, expecting to see a CMS modal with a list of...

Damian Smutek | Nov 4, 2024 | Syndicated blog