I had been wondering how the custom facebook tabs on facebook pages work and how shopify has automated the process of it. For those who don't know, on shopify you can connect your eshop with your facebook page and sell products directly (or display them on facebook and by clicking on a product and, it will direct you to your eshop).
The manual way
For creating a facebook tab just for one eshop and display its products there isn't too much of a problem. What it does is to load inside this facebook page an iframe from fyta.gr which is the eshop (and more specifically the url which loads is https://www.fyta.gr/facebook/store).
For doing something so simple, you just create a facebook app from the https://developers.facebook.com/ . I won't go into a lot of details as the UI may change, but on the current UI, you have to click on the settings and then add a platform. Then, select facebook tabs and on "Secure Page Tab URL" define the iframe's url and on "Page Tab Name" define the caption of the tab. For adding it to your facebook page, there are many ways (through graph API, following a link etc.). It isn't straightforward, but the easiest way is to follow the instructions from here (where the app_id is the facebook's app id which facebook provides and the url is the Secure Page Tab URL). It will show you a dropdown with the facebook pages you are admin and among them you can select the page you want the facebook tab to be added to.
Automating the process
Ok all of the above is nice, but if you have many eshops like shopify, how do you achieve the automation of the whole process? As it seems from the manual way, you would need one facebook app for each eshop. But the facebook graph API doesn't allow the creation of a new facebook application through it. So there is no way to replicate the same process and automate it (except if you create a web parser, try to bypass its captcha and finally automate the process of the creation with some brute force... not very subtle though).
But there is another more elegant way: Having one app and by providing a certain parameter, display the correct content for this specific eshop in the iframe (facebook tab). As it turns out, when you visit a facebook page, you send a parameter to the iframe, which is called signed_request. This parameter is an encrypted hash and when you decrypt it, you will have many useful information. An example of a signed_request is:
and when you decrypt it:
As you can see so far, you can grab the page_id and based on it, you can display the correct content. This one seems pretty useful, the only thing is, as the signed_request is provided as a parameter, you need to decrypt it server-side. As it turns out, in rails this is pretty easy as there is a gem which can do it for you. The gem is called fbgraph and the method to use is called parse_signed_request. So for example, to decrypt the above signed_request, the following code is enough:
So the whole workflow for a shopify replication would go like this:
- User accepts the facebook app credentials so your app grabs the user's facebook pages
- User selects the facebook page he wants the tab to be linked. The app grabs the page_id and store it in the db. Then it links the eshop of the user with the facebook page
- User selects the tab name, the position and an image that he may want
- Now everytime someone visits the facebook tab, your app (the iframe) grabs the specific signed_request which means the specific page_id and it shows him the products of this specific eshop only