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.
- Navigate to Stores/WebContent/Madisons storeName/tablet/ShoppingArea/CatalogSection/CatalogEntrySubsection
- Open the ProductDisplay.jsp file
for editing. Add the following code to the html tag in the file:
For more information about the namespace and tags, see http://developers.facebook.com/docs/opengraph/.<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>
- 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: TheProductDisplayURL
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.