To display Facebook connectivity including the "Like" button in the starter store, We must enable an option in the Store Management tool in Management Center.
Procedure
1.Open the Store Management tool.
2.In the explorer view, click Stores.
3.Right-click the store to which we want to add Facebook integration; then click Open. The available store functions for the store are displayed within separate tabs beside the Store Properties tab.
4.Click the Customer Interactions tab.
5.Select the Facebook integration check box, if it is not already selected.
6.Click Save to save your changes and then click Close.
7.Close Management Center.
Creating a Facebook application for your store for Facebook integration
For your store to communicate with Facebook, it is necessary to create a Facebook application. The Connect to Facebook, and Activity Feed plugins rely on the Facebook application and the communication it allows.
Procedure
1.Register the store application with Facebook at http://developers.facebook.com/setup/.
a.In the Site name field, specify the name of your application, for example, CheapProducts.com.
b.In the Site URL field, specify the fully qualified hostname of the Websphere Commerce Server where the application will redirect traffic to.
2.Specify the subdomain in the Site Domain field. Facebook enables server authentication at a subdomain level when the application is installed on multiple machines. For example, example.com enables all *.example.com servers to make use of this registered application.
Once the application is registered, Facebook provides an Application ID and a Secret ID for use with this application.
Inserting a Facebook Application ID into store
When you configure a store to use Facebook integration, a Facebook Application ID must be inserted into the STORECONF table for both the preview and runtime environments.
Procedure
1.Insert the Facebook Application ID you obtained upon creating a Facebook application for the runtime environment: insert into storeconf values (store_id,'wc.facebook.application_id', 'fb_app_id_rt', 0);
Where:◦store_id is the ID of the store the Application ID will be associated with.
◦fb_app_id_rt is your Facebook Application ID for the runtime environment.
Note: If using Social Bridging make sure the Social Bridging applicationID in the adapter.config file is using the same Facebook Application ID.
2.If you have created a second Facebook Application ID for your store's preview environment, insert it as well: insert into storeconf values (store_id,'wc.facebook.preview_application_id', 'fb_app_id_preview', 0);
Where:◦store_id is the ID of the store the Application ID will be associated with.
◦fb_app_id_preview is your Facebook Application ID for the preview mode environment.
Note: Both entries should be inserted, even if they use the same value for the Application ID.
3.Repeat for all stores, including extended sites.
Testing Facebook integration in the storefront
In this lesson, you test Facebook integration as a shopper in the Madisons store by 'liking' the home page.
To ensure that Facebook integration has been implemented correctly, complete the following steps to 'like' the store's home page.
Procedure
1.To view the Madisons store, in a new web browser type http://host_name/webapp/wcs/stores/servlet/StoreView?storeId=storeId.
Where:storeIdis the store entity ID as defined in the STORE_ID column of the STORE table.host_nameis the fully qualified host name of your WebSphere Commerce Server (for example, wcserver.mydomain.ibm.com is fully qualified).
2.Navigate to the store home page.
3.Click Connect to Facebook. a.Log in to Facebook.
b.Authorize the Facebook application. The Connect to Facebook button should be replaced with your name and Facebook profile picture.
4.Click Like. a.If desired, enter a comment about the store home page.
b.Click Post to Facebook.
5.Check on Facebook to see if the post has been published to your timeline.
You have now successfully connected the store to your Facebook account and 'liked' the store home page on Facebook.
After you publish the MadisonsEnhancements.sar store archive and enable the Facebook Integration feature, the home page will include Facebook social plugins to display the Like button and Activity feed plugin. The Like button is an easy way for Facebook users to share things they like on the web with their Facebook friends and the activity feed plugin shows users what their friends have liked and shared from your site. Facebook users can log in to their account like the home page and/or view their friends' comments.
We need to include following jsp files to see the change :
JSP files
Madisons\ShoppingArea\CatalogSection\CatalogSubsection\TopCategoriesDisplay.jsp, represents the entire page and includes Facebook Open Graph tags for formatting purposes.
Includes:
•Madisons\include\styles\style1\CachedHeaderDisplay.jsp, displays the store's header.
Includes:
◦ 1 Madisons\include\styles\style1\CachedHeaderDisplayFacebook.jspf, allows a Facebook user to login, authorize the application and connect to Facebook. Once connected, the user can also disconnect the store from facebook.
Includes:
•Madisons\include\styles\style1\CachedRightSidebarDisplay.jsp, represents the right sidebar advertising space, one or more e-Marketing Spots and displays the Facebook Social plugins.
Includes:
◦ 2 Madisons\include\styles\style1\CachedRightSidebarFacebook.jspf, pulls in the Facebook plugins: Like and Activity Feed as shown in the screen capture.
Links and buttons
• 2 a. . When a shopper clicks Connect to Facebook, it allows the user to log in to their account, prompts the user for application authorization if the user is not already authorized, and finally connects the user to Facebook.
• 2 b. When a shopper clicks Disconnect from Facebook, their Facebook account is disconnected from the store and is no longer connected to the application. Disconnecting does not de-authorize the application. To de-authorize the application, it must be removed in Facebook.
Facebook integration introduces the following Facebook functionality to the Madisons store:
Like button Social Plugin on the home and product pages
Send button Social Plugin on product pages
Facebook Activity Feed on the home page
Connect to Facebook
The Customer participates in Social Commerce trigger and target have been updated to capture 'Liking' on Product or Home pages via the marketing and promotions activities
Refrence :
Facebook Integration
Procedure
1.Open the Store Management tool.
2.In the explorer view, click Stores.
3.Right-click the store to which we want to add Facebook integration; then click Open. The available store functions for the store are displayed within separate tabs beside the Store Properties tab.
4.Click the Customer Interactions tab.
5.Select the Facebook integration check box, if it is not already selected.
6.Click Save to save your changes and then click Close.
7.Close Management Center.
Creating a Facebook application for your store for Facebook integration
For your store to communicate with Facebook, it is necessary to create a Facebook application. The Connect to Facebook, and Activity Feed plugins rely on the Facebook application and the communication it allows.
Procedure
1.Register the store application with Facebook at http://developers.facebook.com/setup/.
a.In the Site name field, specify the name of your application, for example, CheapProducts.com.
b.In the Site URL field, specify the fully qualified hostname of the Websphere Commerce Server where the application will redirect traffic to.
2.Specify the subdomain in the Site Domain field. Facebook enables server authentication at a subdomain level when the application is installed on multiple machines. For example, example.com enables all *.example.com servers to make use of this registered application.
Once the application is registered, Facebook provides an Application ID and a Secret ID for use with this application.
Inserting a Facebook Application ID into store
When you configure a store to use Facebook integration, a Facebook Application ID must be inserted into the STORECONF table for both the preview and runtime environments.
Procedure
1.Insert the Facebook Application ID you obtained upon creating a Facebook application for the runtime environment: insert into storeconf values (store_id,'wc.facebook.application_id', 'fb_app_id_rt', 0);
Where:◦store_id is the ID of the store the Application ID will be associated with.
◦fb_app_id_rt is your Facebook Application ID for the runtime environment.
Note: If using Social Bridging make sure the Social Bridging applicationID in the adapter.config file is using the same Facebook Application ID.
2.If you have created a second Facebook Application ID for your store's preview environment, insert it as well: insert into storeconf values (store_id,'wc.facebook.preview_application_id', 'fb_app_id_preview', 0);
Where:◦store_id is the ID of the store the Application ID will be associated with.
◦fb_app_id_preview is your Facebook Application ID for the preview mode environment.
Note: Both entries should be inserted, even if they use the same value for the Application ID.
3.Repeat for all stores, including extended sites.
Testing Facebook integration in the storefront
In this lesson, you test Facebook integration as a shopper in the Madisons store by 'liking' the home page.
To ensure that Facebook integration has been implemented correctly, complete the following steps to 'like' the store's home page.
Procedure
1.To view the Madisons store, in a new web browser type http://host_name/webapp/wcs/stores/servlet/StoreView?storeId=storeId.
Where:storeIdis the store entity ID as defined in the STORE_ID column of the STORE table.host_nameis the fully qualified host name of your WebSphere Commerce Server (for example, wcserver.mydomain.ibm.com is fully qualified).
2.Navigate to the store home page.
3.Click Connect to Facebook. a.Log in to Facebook.
b.Authorize the Facebook application. The Connect to Facebook button should be replaced with your name and Facebook profile picture.
4.Click Like. a.If desired, enter a comment about the store home page.
b.Click Post to Facebook.
5.Check on Facebook to see if the post has been published to your timeline.
You have now successfully connected the store to your Facebook account and 'liked' the store home page on Facebook.
After you publish the MadisonsEnhancements.sar store archive and enable the Facebook Integration feature, the home page will include Facebook social plugins to display the Like button and Activity feed plugin. The Like button is an easy way for Facebook users to share things they like on the web with their Facebook friends and the activity feed plugin shows users what their friends have liked and shared from your site. Facebook users can log in to their account like the home page and/or view their friends' comments.
We need to include following jsp files to see the change :
JSP files
Madisons\ShoppingArea\CatalogSection\CatalogSubsection\TopCategoriesDisplay.jsp, represents the entire page and includes Facebook Open Graph tags for formatting purposes.
Includes:
•Madisons\include\styles\style1\CachedHeaderDisplay.jsp, displays the store's header.
Includes:
◦ 1 Madisons\include\styles\style1\CachedHeaderDisplayFacebook.jspf, allows a Facebook user to login, authorize the application and connect to Facebook. Once connected, the user can also disconnect the store from facebook.
Includes:
•Madisons\include\styles\style1\CachedRightSidebarDisplay.jsp, represents the right sidebar advertising space, one or more e-Marketing Spots and displays the Facebook Social plugins.
Includes:
◦ 2 Madisons\include\styles\style1\CachedRightSidebarFacebook.jspf, pulls in the Facebook plugins: Like and Activity Feed as shown in the screen capture.
Links and buttons
• 2 a. . When a shopper clicks Connect to Facebook, it allows the user to log in to their account, prompts the user for application authorization if the user is not already authorized, and finally connects the user to Facebook.
• 2 b. When a shopper clicks Disconnect from Facebook, their Facebook account is disconnected from the store and is no longer connected to the application. Disconnecting does not de-authorize the application. To de-authorize the application, it must be removed in Facebook.
Facebook integration introduces the following Facebook functionality to the Madisons store:
Like button Social Plugin on the home and product pages
Send button Social Plugin on product pages
Facebook Activity Feed on the home page
Connect to Facebook
The Customer participates in Social Commerce trigger and target have been updated to capture 'Liking' on Product or Home pages via the marketing and promotions activities
Refrence :
Facebook Integration
No comments:
Post a Comment