Add the Facebook Like button to your product pages
In this lesson, the Facebook Like button
is added to tablet store product pages by updating CachedProductDisplay.jsp.
Procedure
- Navigate to Stores/WebContent/storedir/tablet/Snippets/Catalog/CatalogEntryDisplay
- 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 therefValue
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. IfcategoryId
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