Better Social Media Sharing for nopCommerce Product Page

If you have tried sharing a nopCommerce product page over to Facebook, or Twitter, you know that it doesn’t always look good. The image scrapped by Facebook is often not the main product image. Sometimes the description is blank, and sometimes it is erroneous.

The question is, can we improve nopCommerce such that the products shared over to major social networks can be displayed nicely, with nice picture and proper title and description? Yes, and it turned out that it’s quite easy to do so!

NOTE: This tutorial only works for nopCommerce 3.30 and above.

Adding the Social Media Meta Tags

First, open up your nopCommerce project in Visual Studio. Determine the Product Template you want to work on. You most probably want to work on both ProductTemplate.SimpleProduct and ProductTemplate.GroupedProduct. The process is the same, so we’ll just take ProductTemplate.SimpleProduct as example.

You should see something like:

//title, meta
Html.AddTitleParts(!String.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Name);
Html.AddMetaDescriptionParts(Model.MetaDescription);
Html.AddMetaKeywordParts(Model.MetaKeywords);

Now, all you need to do is add to following codes.

//Twitter Card
Html.AddHeadCustomParts("<meta name=\"twitter:card\" content=\"summary\">");
Html.AddHeadCustomParts("<meta name=\"twitter:site\" content=\"" + storeContext.CurrentStore.Name + "\">");
Html.AddHeadCustomParts("<meta name=\"twitter:url\" content=\"" + Url.RouteUrl("Product", new { SeName = Model.SeName }, this.Request.Url.Scheme) + "\">");
Html.AddHeadCustomParts("<meta name=\"twitter:title\" content=\"" + Model.Name + "\">");
Html.AddHeadCustomParts("<meta name=\"twitter:image\" content=\"" + Model.DefaultPictureModel.ImageUrl + "\">");
if (!String.IsNullOrEmpty(Model.ShortDescription))
{
    Html.AddHeadCustomParts("<meta name=\"twitter:description\" content=\"" + Model.ShortDescription + "\">");
}

//Open Graph Data
Html.AddHeadCustomParts("<meta property=\"og:url\" content=\"" + Url.RouteUrl("Product", new { SeName = Model.SeName }, this.Request.Url.Scheme) + "\">");
Html.AddHeadCustomParts("<meta property=\"og:site_name\" content=\"" + storeContext.CurrentStore.Name + "\">");
Html.AddHeadCustomParts("<meta property=\"og:type\" content=\"product\">");
Html.AddHeadCustomParts("<meta property=\"og:title\" content=\"" + Model.Name + "\">");
Html.AddHeadCustomParts("<meta property=\"og:image\" content=\"" + Model.DefaultPictureModel.ImageUrl + "\">");
if (!String.IsNullOrEmpty(Model.ShortDescription))
{
    Html.AddHeadCustomParts("<meta property=\"og:description\" content=\"" + Model.ShortDescription + "\">");
}

And now your nopCommerce product page will make full use of Facebook and Twitter’s Meta Tags parsing feature.

Looking for quality nopCommerce Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

wooncherk

wooncherk

Lam Woon Cherk is the founder of pro nopCommerce, a team of experts that create free and premium nopCommerce themes and plugins. He is currently an nopCommerce MVP and solution provider. He also runs a web design firm, panoRazzi, that creates Orchard CMS websites.

Leave a Reply

Your email address will not be published. Required fields are marked *


1 × = 6

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>