Feature Pack 4 or later

Adding JavaScript files to respond to Facebook events

Feature Pack 4 or later In this lesson, JavaScript files are added to the tablet store to allow it to respond to the Like and Connect to Facebook events.

Procedure

  1. Copy FBintegrationCommon.js provided with this tutorial to the base store JavaScript folder. This script includes a wrapper around the Facebook JavaScript SDK, provides event handling for the Like button and callback for login status changes to refresh the UI.
    1. Navigate to the temporary location where you downloaded and extracted the Tutorial_Facebook_Integration.zip file and navigate to the Tutorial_Facebook_Integration/Madisons/javascript folder. Copy the FBintegrationCommon.js file.
    2. Navigate to the base store JavaScript folder, WCDE_installdir\workspace\Stores\WebContent\storedir\javascript, and paste the FBintegrationCommon.js file into the folder.
  2. Create tablet/javascript/FBTabletAdapter.js:
    1. In the enterprise explorer view, navigate to Stores/WebContent/storedir/tablet/javascript
    2. Right-click the javascript folder, select New > File. Name the file FBTabletAdapter.js.
    3. Open the file for editing and add the following code to the file:
      if(typeof(tabletAdapter) == "undefined" || !tabletAdapter) {
      
      	tabletAdapter = {			
      		    //Reload facebook plugin(s) to show their current status
      		    _updateFacebookPlugins : function() { 
      		        console.log("BEGIN _updateFacebookPlugins");	      
      		        //details page like button
      		        var detailsPageLikeBtn = document.getElementById('social_facebook_Details_Like_Button_Display');
      				//make sure its been liked
      		        if ( detailsPageLikeBtn ){
      			        var likeBtnIframe = detailsPageLikeBtn.getElementsByTagName("iframe")[0];			        
      			        //refresh the like button iFrame
      			        var url = likeBtnIframe.getAttribute("src");
      			        likeBtnIframe.setAttribute("src", url);
      		        }
      		        console.log("EXIT _updateFacebookPlugins");
      		    },
      
      	
      		    //Connect to Facebook, display the link "Connect To Facebook"
      		    _displayConnectFacebookLink : function() {
      		        console.log("BEGIN _displayConnectFacebookLink");	       
      		        var FBloginLink=document.getElementById("FooterFBlogin");
      				if(FBloginLink!=null && FBloginLink != undefined){
      					FBloginLink.style.display="inline";
      				} else {
      					setTimeout( function(){ tabletAdapter._displayConnectFacebookLink(); }, 1000);
      			        console.log("EXIT _displayConnectFacebookLink, dom is not fully loaded yet.");
      					return;
      				}
      		        var FBlogoffLink=document.getElementById("FooterFBlogoff");
      				if(FBlogoffLink!=null && FBlogoffLink != undefined){
      					FBlogoffLink.style.display="none";
      				}
      		        
      		        console.log("EXIT _displayConnectFacebookLink");
      		    },
      
      		    //Display "Disconnect from Facebook"
      		    _displayFacebookMenu : function(name) { //subscribe to FB events 
      		        console.log("BEGIN _displayFacebookMenu");
      		        var FBloginLink=document.getElementById("FooterFBlogin");
      				if(FBloginLink!=null && FBloginLink != undefined){
      					FBloginLink.style.display="none";
      				} else {
      					setTimeout( function(){ tabletAdapter._displayFacebookMenu(); }, 1000);
      			        console.log("EXIT _displayFacebookMenu, dom is not fully loaded yet.");
      					return;
      				}
      		        var FBlogoffLink=document.getElementById("FooterFBlogoff");
      				if(FBlogoffLink!=null && FBlogoffLink != undefined){
      					FBlogoffLink.style.display="inline";
      					FBlogoffLink.title = name + " has logged on Facebook";
      				}
      
      		        console.log("EXIT _displayFacebookMenu");
      		    },		    
      	}
          
      	//set facebook adapter. So the adapter could response the FB events.
         	fbIntegrationJS.setUiAdapter(tabletAdapter);
      tabletAdapter defines 3 callback functions that are invoked by FBintegrationCommon.js. When a shopper accesses a product page, the FBintegrationCommon.js script is invoked by the Facebook SDK to respond to Facebook events. The script also handles Connect to Facebook and Disconnect from Facebook events from the link on the footer of the page. The methods in FBTAbletAdapter are then invoked to accordingly update the store UI. In this case, the _updateFacebookPlugins function will refresh the Like button; _displayConnectFacebookLink will display the Connect to Facebook link at the footer, while the _displayFacebookMenu function displays Disconnect from Facebook.