%kb_name - %short_descr - Knowledge Portal

Facebook Like Button for Product

To set this up for Four51 Storefront Application your site must use an Anonymous user applied to the Guest User drop down menu for the 2.0 URL. The Facebook Like button may be added to a product page.

There are three steps to implement the Facebook Like button on a product page:
1. Add code to the product description for any product you want the Like button to appear. Modify the following code snippet to include the appropriate ProductInteropID, Category Interop ID, and the CID found on the Logon Page Configuration page in the left navigation of your admin interface, and add it to the source of your product description.

---cut and paste the code below this line and add to the product description---

<div class="fb-like" data-send="true" data-width="450" data-show-faces="true" data-href="http://www.four51.com/UI/Customer.aspx?ProductInteropID=<productinteropid>&CatInteropID=<categoryinteropid>&CEI=<cidOnLogonPageConfigurationPage>"></div>

---cut and paste the code above this line---

As an example, the code to add the Like button to the CoffeeCo Columbian Coffee product would look like:

<div class="fb-like" data-send="true" data-width="450" data-show-faces="true" data-href="http://www.four51.com/UI/Customer.aspx?ProductInteropID=cbcol&CatInteropID=coffeecat&CEI=38a3ec59-8a3a-48d3-8094-2ad69330940d"></div>

2. Because multiple images will appear on the Product List page, javascript needs to be added to that page to hide the Facebook Like button. Add the following code snippet to the Product List Page found under Site Customization in the admin interface.

---cut and paste the code below this line and add to the Product List Page---

<script type="text/javascript">
$(document).ready(function() {
$('.fb-like').hide();
});
</script>

---cut and paste above this line---

3. Add the following code snippet to a Product Detail Template or the custom theme:

---cut and paste the code below this line into a Product Detail Template or Custom Theme---

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

---cut and paste the code above this line---

After the Like Button is clicked by a user, it will be added to their Facebook page. If another user clicks on the product from the user's Facebook page, they will be directed to the product on Four51 as a bookmark user. When testing, be aware that only one like can happen per user session.

Reference Material: None