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:
- 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.
- 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:
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.
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 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.
- Check out the Result and Start Asking People to Like your Page!
- 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:
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:
- 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!