Before you proceed with this tutorial, make sure you have add Facebook like, comment and login option inside your webShaper store. You can click here to learn how.


Facebook like box allows your customer to like your page directly from your store. It is an easy way to help you build your customer base.


Note: It is a good practice to back up coding before edit


1. Go to Facebook Developer (Page Plugin)

2. Configure your like box as you like




3. Click on Get Code




4. Copy code on the top (do not close this window)




5. Open a new tab and go to your webShaper Control Panel

6. Go to Design

7. Click on Template Files




8. Click edit on template.html




9. Find <body> tag (press Ctrl + F and type “body” into the box)

10. Under body tag, type “<ws_text><![CDATA[

11. Paste the code

12. After the code, type “]]></ws_text>

13. Click on Save




14. Go back to Facebook Developer page again

15. Copy the second code




16. Go back to webShaper Control Panel

17. Go to Design

18. Go to Template Files

19. Click edit on leftbar.html




20. Put code to one of these places

  • Put code after <div id=”Col2Left”>, to have it on the top of leftbar
  • Put code before <!– List of available components, to have it at the bottom of leftbar

21. Click on Save




This is how it looks




Alternative looks


1. Display like box without timeline




How to achieve this:


  • On step 2, leave Tabs text box empty (Facebook configurations)


2. Put on Footer (like box without timeline)




How to achieve this:


    • On step 2, leave Tabs text box empty (Facebook configurations)
    • On step 19, click edit on footer.html
    • Then look for <h6>Subscribe</h6>
    • Put the code after </form> (few lines after <h6>Subscribe</h6>)
    • click on Savefacebooklikebox13



3. Place on Static Pages




How to achieve this:


    • On step 4, click on IFramefacebooklikebox15


  • Copy the code
  • Place on any Static Page you like