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

 

facebooklikebox1

 

3. Click on Get Code

 

facebooklikebox2

 

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

 

facebooklikebox3

 

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

6. Go to Design

7. Click on Template Files

 

facebooklikebox4

 

8. Click edit on template.html

 

facebooklikebox5

 

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

 

facebooklikebox6

 

14. Go back to Facebook Developer page again

15. Copy the second code

 

facebooklikebox7

 

16. Go back to webShaper Control Panel

17. Go to Design

18. Go to Template Files

19. Click edit on leftbar.html

 

facebooklikebox8

 

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

 

facebooklikebox9

 

This is how it looks

 

facebooklikebox10

 

Alternative looks

 

1. Display like box without timeline

 

facebooklikebox11

 

How to achieve this:

 

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

 

2. Put on Footer (like box without timeline)

 

facebooklikebox12

 

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

 

facebooklikebox14

 

How to achieve this:

 

    • On step 4, click on IFramefacebooklikebox15

 

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