Overview:
In this tutorial I decided to show people how to create a Facebook store using free software.
This tutorial works for all types of stores even ones that are selling affiliate items since the sale doesn’t have to take place on your site.
For example, it will work if you are looking to sell your own items in your Facebook store, are selling on a marketplace (such as Amazon, Ebay, Etsy etc.) or if you are an affiliate looking to drive traffic from your Facebook store to another site.
While I am aware of some of the existing services that are out there on the web which can help you setup a Facebook store, many of them charge a monthly fee based on how many items you list; require you to have your store hosted with them; have limitations on which payment methods you can accept, design and more — a few reason why I felt this tutorial would be useful.
Of course I also figured it would be nice to show people an alternative and have a little DIY fun.
As for how difficult this is, my main goal was to keep this tutorial as simple as possible — mainly why we are not building our store from scratch and instead are using WordPress.
In addition to this, we are also using WordPress because it utilizes responsive web design (which works great with the Facebook canvas) and because it has a ton of plugins.
Preparation:
Sounds easy right? Well it is, but before you go install WordPress and add a few payment buttons or install one of these plugins, know that there are some minor modifications that we must make so that everything is compatible with Facebook.
For example, we cannot load external links in the Facebook canvas and for this reason we have to make external links load in a new browser window, but before we get into that, here’s what you will need:
- A domain name
- A web hosting account
- An SSL certificate (this isn’t actually needed right now, but it will be needed in the future when it becomes a requirement on Facebook).
If you already have all of the above, then you are ready to go. If not, you can purchase them from Bluehost, Godaddy, Hostgator, Siteground or any other hosting or domain provider of your choice. Note that the ones I’ve mentioned offer 1-click WordPress installation which is pretty convenient.
Watch my video tutorial below:
Can’t view the video? Watch it on YouTube
Note: it’s very important that you watch the entire video.
Facebook overview:
As mentioned in the video, we can setup our Facebook store as an App on Facebook, Page Tab or both. The main difference between the two is that you can add a Page Tab to a Facebook page.
For example, if you add the Page Tab to your Facebook page, your fans can view your store from there. Instructions on how to add the tab to your Facebook page can be found here.
Install and setup WordPress:
Of course before you can do this, you will need to setup your store on your site first. So once you have your domain and hosting account, install WordPress. After you’ve installed WordPress you will want to familiarize yourself with the software.
Just keep in mind that if you decide to change your default theme, you will need to replace it with another responsive theme. You can find quite few responsive themes on WordPress as well as ThemeForest.
One of the nice things about this method, is that you are not limited to only using your store on Facebook. For example, you can setup your store, direct customers to your store, make sales on there and use it as a Facebook store.
In addition to all of this, your site is also mobile friendly thanks to the responsive design.
Setup your store:
Now after you’ve familiarized yourself with WordPress and added some personal touches, you will need to decide on how to setup your store. In my video I show you 4 ways that you can do this:
- Add payment buttons manually and modify the payment buttons so that they trigger a new browser window.
- Use a plugin that generates payment buttons and modify the plugin’s files so that the button triggers a new browser window.
- Use a shopping cart plugin and make modifications to the plugin’s files or open checkout pages in a new browser window.
- Use a shopping cart plugin that works with affiliate links. In other words, people see the listings, but are redirected to another site when they click on the buy button.
Now, regardless of which method you use, it’s important to remember that you cannot open external links in the Facebook canvas (the iframe). For this reason, you will need a plugin such as this one to open external links in a new window.
Just remember that the plugin only works on links and not on form tags (couldn’t find one that works with both). Which is why we need to make modifications to the form tags manually. Especially since the majority of payment processors (such as Google Wallet and Paypal) use form tags and most of these form tags do not trigger a new browser window.
For this reason you will need to add or edit the “target” attribute in the form tag so that it triggers a new window. In my video I explain this in detail which is why it’s very important that you watch the video in it’s entirety. Below I have pasted the code that needs to be added to the form tag:
target="_blank"
If you do not enter the target=”_blank” attribute, your payment buttons will not work on Facebook and your customers won’t be able to buy your items.
For example if you use method 1
You will want to add the target=”_blank” attribute to your form tag which is the tag with the URL to the payment processor’s website. A standard Google Wallet (aka Google Checkout) form tag looks something like this:
<form action="https://checkout.google.com/checkout/api/checkout/v2/checkoutForm/Merchant/" method="post" target="_top">
<form action="https://checkout.google.com/checkout/api/checkout/v2/checkoutForm/Merchant/" imethod="post" target="_blank">
To avoid any errors, please do not copy and paste the code above. Only add the target attribute to your existing form tag.
A Paypal form tag in its standard for looks like this:
<form name="paypal-cart" action="https://www.paypal.com/cgi-bin/webscr" method="post">
and should look like this after adding the target=”_blank” attribute:
<form name="paypal-cart" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
To avoid any errors, please do not copy and paste the code above. Only add the target attribute to your existing form tag.
If using method 2:
You will want to edit the plugin files containing the form code. You will want to search for the form tags and add the target=”_blank” attribute as shown in the example above. Of course, if you can find a plugin that allows you to specify the target, you won’t need to add the attribute manually.
Just an FYI, I tried the “Nice Google Checkout Lite” plugin which does have the option of setting the target in the admin panel but the current version seems to have a bug which prevents this from working properly. So be very careful.
Note: remember that you will lose any changes you make to the plugin files if you update the plugin.
If using method 3:
If using a shopping cart plugin and you decide to edit the plugin files, remember that it can be a tedious job due to the amount of files that you will have to edit. Also, from my experience, shopping cart plugins update frequently and as explained earlier, plugin updates will overwrite any modifications that you make to your files. For this reason, you may find yourself editing files on a regular basis.
Now if you decide to open the shopping cart pages in a new window with the “open external links in a new window” plugin (as shown in my video), be careful… Make sure that the checkout page has a unique path such as /checkout/ and enter that path into the “force links to open in a new window if they match” field.
Note: just remember to make sure that the checkout pages are never opened within the Facebook canvas because Facebook will block the action.
Method 4:
Simply install a plugin that works with affiliate links and enter the item URL. Remember to make sure that a new window is being triggered for the external links.
Create your App on Facebook or Page Tab:
After you’ve setup your site, you will want to create the App on Facebook or Page Tab by going to https://developers.facebook.com/ and click the “Apps” link in the header.
Once on your Facebook developer page, simply click the “Create New App” or “Edit App” button.
Then enter in the details for each required field. I won’t explain each of these fields because you can hover your mouse over the question marks for details.
Just remember to enter in your store’s non-SSL URL into the canvas URL field and your store’s SSL URL into the secure canvas URL field.
When you are ready to launch your app, remember to set “Sandbox Mode” to disabled so that people can actually see and use your app.
Good luck with your Facebook store!