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&layout=standard&show_faces=true&width=450&action=recommend&colorscheme=light&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 %>&layout=standard&show_faces=true&width=450&action=recommend&colorscheme=light&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 :)
Comments