Adding Open Graph tagging to product pages

In this lesson Open Graph tags are added to the tablet store product pages. Open Graph tags identify your products for Facebook so that they are displayed correctly in newsfeed posts when 'Liked'.

Procedure

In the Madisons tablet store, add the Facebook name space to the <html> tag in tablet/ShoppingArea/CatalogSection/CatalogEntrySubsection/ProductDisplay.jsp. This name space and tag allows the Facebook scripts to locate the <fb:like> and (og:xxxxx) tags in the html page and render the Like button properly.
1. Navigate to Stores/WebContent/Madisons storeName/tablet/ShoppingArea/CatalogSection/CatalogEntrySubsection
2. Open the ProductDisplay.jsp file for editing. Add the following code to the html tag in the file:
```
<html xmlns="http://www.w3.org/1999/xhtml"
<flow:ifEnabled feature="FacebookIntegration">
	xmlns:fb="http://www.facebook.com/2008/fbml" 
	xmlns:og="http://opengraphprotocol.org/schema/"
</flow:ifEnabled>
```
  For more information about the namespace and tags, see http://developers.facebook.com/docs/opengraph/.

Insert the Open Graph tags required for the Facebook Like button into the <head> section:

<head>
…….
…….

<%-- ====================Facebook og tags====================== --%>
<meta name="description" content="<c:out value="${metaDescription}"/>"/>
<wcf:url var="ProductDisplayURL" patternName="ProductURL" value="Product">
        <wcf:param name="langId" value="${langId}" />
        <wcf:param name="storeId" value="${WCParam.storeId}" />
        <wcf:param name="catalogId" value="${WCParam.catalogId}" />
        <wcf:param name="productId" value="${productId}" />
</wcf:url>
<flow:ifEnabled feature="FacebookIntegration">
	<%--Use Madisons logo if product image does not exist  --%>
	<meta property="og:title" content="<c:out value="${pageTitle}"/>" /> 
	<c:choose>
	    <%--Use Madisons logo if no product image  --%>
	    <c:when test="${!empty product.description.fullImage}">
		<meta property="og:image" content="<c:out value="${schemeToUse}://${request.serverName}${portUsed}${product.objectPath}${product.description.fullImage}"/>"/>
	    </c:when>
	    <c:otherwise>
		<meta property="og:image" content="<c:out value="${schemeToUse}://${request.serverName}${portUsed}${jspStoreImgDir}images/logo.gif"/>" />
	    </c:otherwise>
	</c:choose>
	<meta property="og:url" content="<c:out value="${ProductDisplayURL}"/>"/>
	<meta property="og:type" content="product"/>
	<meta property="fb:app_id" name="fb_app_id" content="<c:out value="${facebookAppId}"/>"/>
</flow:ifEnabled>
<link rel="canonical" href="<c:out value="${ProductDisplayURL}"/>" />
<%-- ====================Facebook og tags====================== --%>
……
……
</head>

og:url: The canonical URL for the product page, note: this URL should not be changed upon devices or SEO settings.
og:image: The image link for the product.
og:type: The type of this like, here the value is hard coded to "product".
fb:app_id: The Facebook application id for the store.
og:title: A short title description of the product.

Note: The ProductDisplayURL variable is very important. It is the canonical URL for the product that doesn't change between stores. Using the canonical URL instead of the desktop SEO or tablet store URL allows 'Likes' to be registered against a product and not a specific URL regardless of which store the 'Like' was performed on.