One of the important things you need to do when starting an e-commerce store is to integrate with Facebook. The first and easiest thing to do is to add the Facebook Like Button. In this example, we will be adding the Like Button to a Softslate store called eCustom, but the concepts are the same for any web store.
- Get a Facebook Page
If you do not have a company Facebook page, you can create one here:
http://www.facebook.com/pages/create/
Create an Account on Facebook
Describe new Facebook Page
Add Image and New Page Created
Add a Cover Image to Spice it Up
- Decide where to put your Like Button
Now that you have a shiny new Facebook page, you need to have people Like your page. For this example, we have decided to put the Like Button on the top of every page in the header and on each product page.
Decide where to put the like button
- Get The Main Facebook Like Button
Facebook has a nice tool for creating the code needed for the Like Button. The first button we will create will be a Like Button that actually Likes the Facebook page and not the page itself. This button will “subscribe” the user to your Facebook page so they get updates about your page. When you link the button to a page on your site, it will only push out more of a one-time recommendation to their friends. We will use this second type of link for the individual product pages later.The following tool can be found at:
https://developers.facebook.com/docs/reference/plugins/like/
Create Facebook Button Tool
This tool has many options. The options are explained below the tool on Facebook. You should tailor it to your needs. The important thing here is that we are using the URL link to the Facebook page as described above. Now, click the “Get Code” button to get the actual code we will use in SoftSlate.
Get the Code for the Facebook Like Button
- Add the Facebook JavaScript SDK code to header.jsp
Facebook recommends adding the SDK code (the top box in the picture above) into the HTML directly after the <BODY> tag. The body tag is usually in the layout templates in SoftSlate. Probably the best place to add the code would be the header.jsp, which is included after the body tag in all SoftSlate layouts. If you do not have header.jsp in your custom layout directory, you will need to copy it from default-xhtml into the custom directory to override before adding the code as shown in the picture below.
Add Facebook SDK Code to Custom Header JSP
- Add the HTML5 Facebook Like Tag to your Header
You can put this button that will like your Facebook page in your header or footer or sidebar. In fact, you can place it wherever you like. In this example, we will be putting it in the header.jsp as well.
Like Facebook Page in Header JSP
- Check out the Result and Start Asking People to Like your Page!
How Does the Like Button Look?
- Add a Similar Button to your Product Pages
We will add the same tag to our custom product.jsp file with a few small tweaks. This button will have a dynamic URL to the product page in the tag. This means people will not be Liking you to follow your Facebook page, but rather they will be recommending the product to their Friends. We will also turn the Send button on. The code looks like this in the JSP:
Product Page Like Button Code
You can use this same concept on content pages or category pages if you like. You should give your visitors the opportunity to recommend as many pages on your site as possible. Below is how the button looks on one of the eCustom product pages:
Like Button on Product Page
- What to do Next?
Interact and engage your customers using your new Facebook page and Likes. A SoftSlate coupon code for people Liking your web site is always a great way to jump start your Likes!