Feature Pack 4 or later

Add the Facebook Like button to your product pages

Feature Pack 4 or later In this lesson, the Facebook Like button is added to tablet store product pages by updating CachedProductDisplay.jsp.

Procedure

  1. Navigate to Stores/WebContent/storedir/tablet/Snippets/Catalog/CatalogEntryDisplay
  2. Open the CachedProductDisplay.jsp file for editing. Insert the following code to add the Facebook Like button to the product page. The code includes the flex flow control tag for FacebookIntegration. This tag is only for a store based on the Madisons store. If you do not have or want the Facebook integration store function option in WebSphere Commerce Management Center, it is not necessary to add the <flow:ifEnabled feature="FacebookIntegration"> tag in your customized JSPs. In this tutorial, the button is placed below the long description of the product:
    <flow:ifEnabled feature="FacebookIntegration">
    <%-- ** Display Facebook Plug-ins; Like/Send button on Product Details Page ** --%>
    <c:set var="refValue" value="${categoryId}+${productId}+${product.partNumber}+${product.manufacturerName}"/>
    <script type="text/javascript" src="<c:out value="${jspStoreImgDir}tablet/../javascript/FBintegrationCommon.js"/>?locale=<c:out value="${locale}"/>&appId=<c:out value="${facebookAppId}"/>"></script>
    <script type="text/javascript" src="<c:out value="${jspStoreImgDir}tablet/javascript/FBTabletAdapter.js"/>?locale=<c:out value="${locale}"/>&appId=<c:out value="${facebookAppId}"/>"></script>
    <div class="spacer_20px"></div>
         <span>
               <fb:like id="social_facebook_Details_Like_Button_Display" send="true" show_faces="false" href="<c:out value="${productDisplayUrl}"/>" layout="button_count" send="true" width="125" height="30" action="like" colorscheme="light" ref="<c:out value="${refValue}"/>"  ></fb:like>
         </span>
    </flow:ifEnabled>					
    Note: The string value of the refValue variable is used by the FBIntegrationCommon.js script to send Facebook marketing trigger requests to the server. The format of the value is: "${categoryId}+${productId}+${product.partNumber}+${product.manufacturerName}" Do not change the order of the fields in this value. If categoryId is not available for your store page, keep it empty. FBIntegrationCommon.js will handle the case. For more information, see Working with the Facebook Activity marketing trigger tags