Mar 19, 2011 OpenCart guides
Is this useful? Like it.
Adding the Facebook “Like” button to your OpenCart store’s product pages is very simple — You only need to add one line of code to one of your theme file.
This code will work with URL alias (Search engine friendly URL) turned ON or OFF.
Compatibilty: Tested on OpenCart 188.8.131.52, 184.108.40.206, 220.127.116.11 and 18.104.22.168, but should work for all OpenCart versions.
Download this file from your site to your computer:
- YOUR_THEME is the name of the theme you are currently using.
- if you do not see that file in your theme folder, you need to download the file from the default theme’s folder
Open the product.tpl file with any text editor.
Copy this code and paste to around line 110
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode('http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']); ?> &layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:35px; margin-top:10px; margin-bottom: 0px"></iframe>
Just re-upload the file to your server and you’re done:
The line of code that you added to your file has a few parameters that can be changed.
- colorscheme=light – change to dark if your site design is in dark color
- show_faces=false - change to true if you want to show the small profile pics of the persons who have liked your product
- height:35px – if you decide to show the pofile pics, change the height to about 80px or more
- Please note that the code may not work if you run your OpenCart store on Windows hosting server.
- Facebook has recently changed the “Like” button to behave almost like the “Share” feature. If someone “liked” your product page, Facebook will add the link, summary and a thumbnail picture to his/her profile wall. But the problem is, Facebook may not always choose the right image from your product page to be posted on the Facebook wall.