OK, so far I haven’t written an OpenCart blog on integrating social networks like Facebook with the eCommerce software because I had some qualms about how much people actually share online when buying anything. However, it is becoming a popular question from people visiting my blog and admittedly social media is now becoming more and more tied in with OpenCart so I decided to write this blog to show you how to implement Facebook comments into the product page on OpenCart.
For the purpose of this example I will be adding a “Ask A Question” tab next to the standard “Reviews” tab on the OpenCart product page and this tab will contain the Facebook comment box allowing people to post onto the store through their Facebook account. This can be beneficial as users can opt to “Also post to Facebook” which will appear in their friends news feeds and on their timeline which can lead to potential clicks and conversions. Be warned that you might put off users who are not signed up to the Social Network and will be unable to comment on your site but you can always add a message like “Don’t have a Facebook account? Why not email us instead?” above the comment box when we put it in.
Getting The Facebook comments code for OpenCart
Right so to add the Facebook comments box we will need to add in two pieces of script which Facebook has kindly made available for anyone at this link:
https://developers.facebook.com/docs/reference/plugins/comments/
The form on the page asks for a few details and I will guide you through the process here.
URL to comment on
Leave this field as it is without adding your OpenCart URL, this is for a good reason which I will explain in a moment. It should be left as http://www.example.com or some equivalent.
Number of posts
You can set the limit of Facebook comments to show on your OpenCart product page and it won’t make much difference. Just choose whatever limit you like, I chose 5 for this example.
Width
Right, so we want this Facebook comment box to look good right? We will need to know the width of the tab boxes on your OpenCart store in order to ensure the box fills the entire section. This can vary from theme to theme but you can find it out by hovering over your product description box, right-clicking and choosing “Inspect Element“.
If you can’t find it out, don’t worry. Just leave it as the default on the Facebook comment box generator and we can adjust it later.
Colour Scheme
Again this is all about preference so have a look at both versions of the colours and see which one fits your theme better. At the time of writing there are only two simple themes (Light and Dark) so chances are one, or both of them, will fit in fine.
Then just click the “Get Code” button to see a popup box with what you need.
Integrating the Facebook SDK with OpenCart
Next you will need to include the JavaScript SDK code into OpenCart. This is the top section with the block of code which looks like:
I would recommend using the code which Facebook generated for you but you should be able to use this one if you’re feeling lazy.
Now open up this file:
- catalog/view/theme/[YOUR THEME]/template/common/header.tpl
You will need to insert the above code as a block just after the
tag. Run a search for “” in your text editor if you can’t see it and then just add it in, taking care not to delete or overwrite anything else!NOTE: I have braced myself for tons of emails regarding performance issues but honestly it all gets loaded minified and everything is explained on the Facebook Developers website at developers.facebook.com. This will not cause your page to load slowly and I’m aware it will get loaded onto every page but it really is a minimal performance hit for the convenience of abiding by Facebook implementation advice.
The next piece of code down is what will actually call the comment box so make sure to copy it and keep it safe for the moment. It usually looks something like:
Before we use this though, lets create a space for your tabs.
Adding an extra tab for OpenCart Product Pages
OK, so OpenCart conveniently uses JavaScript to automatically work with tabs so there is very little to do here but actually physically enter the tabs themselves. No JavaScript needed!
To create a new tab, open up this file:
- catalog/view/theme/[YOUR THEME]/template/product/product.tpl
and do a search for “#tab-description” which will take you to the following line:
All you have to do is add in a new tab which will add another tab to the line which users can click on to get to the Facebook Comments. Like so:
Ask A Question
Then we need to add in the actual box which holds the Facebook comments inside which we do by finding the following script:
And add an extra line for the comments section like so:
Now if you go to your OpenCart product page you should see a tab labelled “Ask A Question” and if you click on it, it’ll bring up the Facebook Comments box! Now, you’ll notice that there are a load of comments already on it which is because the URL of the comments box is example.com. Remember I said we would come back to the URL? Well here is the problem with using this on OpenCart!
Making The Facebook Comments box dynamic for OpenCart
OpenCart is a dynamic, database-driven website meaning that by putting something directly in the template file is, most of the time, going to make it show up every time that file is called. This obviously doesn’t work for product pages as whatever URL you put in the Facebook generator is going to show for all of them, some previous comment extensions have got around this by just showing the root URL of the store but with a little bit of PHP you can make OpenCart generate the code dynamically for whatever page it is on!
Edit the original Facebook Comments code which looked like:
And edit the “data-href” link by changing it to:
This will ensure that each product page has it’s own comment box by changing the URL for each different product. You can also adjust the width using the “data-width” parameter in the code to make it fit in with your theme design properly.
And there we go! You now have a Facebook Comment feature listed as part of your OpenCart product page under the “Ask A Question” tab!
As promised, here is the vqMod file which accompanies this OpenCart blog on adding Facebook Comments to OpenCart product pages if you’re new to OpenCart or unsure about editing the core files, all payments are securely processed via PayPal!