Updating store JSP files to add Facebook buttons

In this lesson, the JSTLEnvironmentSetupExtForFacebook.jspf is created to add the Connect to Facebook link on product pages of the tablet store.

Procedure

Open WebSphere Commerce Developer. In the Enterprise Explorer view, navigate to Stores/WebContent/storedir/tablet/include

Prepare the environment so that the Facebook ID is accessible from any product page.

Right-click include. Select New > File. name the file JSTLEnvironmentSetupExtForFacebook.jspf. This JSPF file will be included on every page in your store front, so that the Facebook application ID is accessible on all product pages.

Open the created file for editing. Add the following code to the file.

<%@ taglib uri="flow.tld" prefix="flow" %>
<%@ taglib uri="http://commerce.ibm.com/foundation" prefix="wcf" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="com.ibm.commerce.context.preview.PreviewContext" %>
<%@ page import="com.ibm.commerce.foundation.server.services.businesscontext.ContextService" %>
<%@ page import="com.ibm.commerce.foundation.server.services.businesscontext.ContextServiceFactory" %>

<flow:ifEnabled feature="FacebookIntegration">
	<c:if test = "${empty facebookAppId}">
		<wcf:getData type="com.ibm.commerce.infrastructure.facade.datatypes.OnlineStoreType" var="onlineStore" expressionBuilder="findByUniqueID">
			<wcf:param name="storeId" value="${storeId}" />
			<wcf:param name="accessProfile" value="IBM_Details" />
		</wcf:getData>	
		 
		<%
	    // Determine if we are in preview mode
		ContextService cs = ContextServiceFactory.getContextService();	    
		PreviewContext previewCtx = (PreviewContext) cs.findContext(PreviewContext.CONTEXT_NAME);
		if (previewCtx!= null) {
				request.setAttribute("inPreview", "true");			
		}
		%>	    		
		<c:choose>			
			<c:when test="${inPreview == 'true'}">	
				<c:set var="facebookAppId" value="${onlineStore.userData.userDataField['wc.facebook.preview_application_id']}" scope="request"/>		    				
			</c:when>			
			<c:otherwise>		
				<c:set var="facebookAppId" value="${onlineStore.userData.userDataField['wc.facebook.application_id']}" scope="request"/>  
			</c:otherwise>
		</c:choose>
	</c:if>
</flow:ifEnabled>

The above code first tests if the facebookAppId is already defined. If not, it will query the facebook_application_id or preview_application_id which were configured in the prerequisites for this tutorial, from the database.

The code includes the flex flow control tag for FacebookIntegration which applies only to Madisons based stores. If you do not have or want the Facebook integration store function option in Management Center, it is not necessary to add the <flow:ifEnabled feature="FacebookIntegration"> tag in your customized JSPs.

Add the following line at the bottom of JSTLEnvironmentSetup.jspf to include JSTLEnvironmentSetupExtForFacebook.jspf:
```
 <%@ include file="JSTLEnvironmentSetupExtForFacebook.jspf" %>
```
This makes the Facebook application ID accessible from any product page.
Add the Connect to Facebook button to the footer of your store. This allows shoppers to login to Facebook as well as authorize the Facebook application for your store, enabling the marketing engine to track 'Like' events on the tablet store. For the tablet store, modify tablet/include/styles/style1/CachedHeaderDisplay.jsp and tablet/include/styles/style1/CachedFooterDisplay.jsp. Once the Shopper logs in and authorizes the Facebook application, the shopper will stay logged in until Disconnect from Facebook is clicked.
1. Navigate to Stores/WebContent/Madisons storeName/tablet/include/styles/style1. Open CachedHeaderDisplay.jsp for editing
2. Add the following code to the end of CachedHeaderDisplay.jsp:
```
<flow:ifEnabled feature="FacebookIntegration">
	<script type="text/javascript" src="<c:out value="${jsAssetsDir}tablet/javascript/FBintegration.js"/>?locale=<c:out value="${locale}"/>&appId=<c:out value="${facebookAppId}"/>"></script>	
</flow:ifEnabled>
```
3. In the style1 folder, open CachedFooterDisplay.jsp for editing.
4. Add the following code to the end of CachedFooterDisplay.jsp:
```
<flow:ifEnabled feature="FacebookIntegration">
		  <a href="javascript:void(0);" onclick="javascript:fbIntegrationJS.onClickFacebookLogin();return false;" id="FooterFBlogin" ><fmt:message key="HEADER_CONNECT_TO_FACEBOOK" bundle="${storeText}" /></a>
		  <a href="javascript:void(0);" onclick="javascript:fbIntegrationJS.onClickFacebookLogout();return false;" id="FooterFBlogoff" style="display:none"><fmt:message key="HEADER_DISCONNECT_FROM_FACEBOOK" bundle="${storeText}" /></a>
</flow:ifEnabled>
```
Add message entries for Connect to Facebook and Disconnect from Facebook to the message resource bundle. If needed, these message entries could be translated to other languages:
1. For the tablet store, navigate to Stores.war\WEB-INF\classes\storedir\tablet\storetext.properties
2. Open storetext.properties for editing
3. Add the following lines to define the messages created in the previous step:
```
HEADER_CONNECT_TO_FACEBOOK = Connect to Facebook
HEADER_DISCONNECT_FROM_FACEBOOK = Disconnect from Facebook
```
4. Rebuild the Stores project in order to allow the test server to pick up the message bundle changes. If deployed on your WebSphere Commerce server, the server will need to be restarted to pick up this change.