Hello everyone!
While developing a website we often have a plethora of decisions to make: where do I store the data required in my website, how do I store images that will dynamically be shown on the webpage, etc. These questions can unnecessarily bog down the small website developer who just needs to showcase some images that have been uploaded to a Facebook page, extrapolate with some data and show in a website for a one stop site to show which items are available for sale (my case!)
The answer to these unnecessarily complicated questions can be found by looking into what is already existing and is at our disposal for free! Who would not want the availability and maintainability of Google and Facebook? Couple that with an app/tool like IFTTT and we have a great website ready!
Based on the above thought process I have developed the site: SharmileeJewellery for my mother to showcase her handcrafted jewelry that are available for sale. The user story goes like this: my mother will upload the image of her jewelry piece in her facebook page, this triggers a recipe in IFTTT that creates a row with the image details (like image caption, image URL for Facebook's image store) in a Google Sheet file stored in Google Drive. She then goes and updates details like price, whether the item is sold, etc. in this sheet. The client side code reads this Google sheet data as JSON (the sheet is made available as public read-only) on load of the site, parses the data and formats it to show the beautiful website.
I will give a walk through of the various steps involved in this process.
Step 1: Create the required recipe in IFTTT
The process to configure a recipe in IFTTT is straightforward. We will add a new row to a spreadsheet in Google Drive once a photo is posted on the Facebook page with the default values of the image as sent by Facebook. The recipe will look like this:
Step 2: Update required details to spreadsheet as and when required. These details need not come from the original image post.
Step 3: Make the Google sheet data available as JSON feeds. The procedure to make the Google Sheet data available for consumption as JSON is highlighted here
Step 4: Viola! Your Sheet data is available as JSON. It contains the Image location (from facebook's CDN store) and other details (stored in the Google Sheet itself). You need to parse it and show it on the UI.
The JSON looks like this (I have highlighted the content of one of the rows from the sheet):
As a note, the first column in the sheet becomes the title field and the content attribute in the JSON contains the content from the remaining columns in that row. Although it is a string, if a value is present in the column, it is keyed by the column name (the first row's value for the column). Just play with a sample sheet to make sense of the preceding statements.
Step 5: Parse the JSON and show the world how you dynamically update your website whenever a new image is posted in your Facebook page!
Please post your comments/views in the comments section below.
If you need any help to develop this idea for your own website feel free to drop a note in my email: anuragchatterjee92@gmail.com
While developing a website we often have a plethora of decisions to make: where do I store the data required in my website, how do I store images that will dynamically be shown on the webpage, etc. These questions can unnecessarily bog down the small website developer who just needs to showcase some images that have been uploaded to a Facebook page, extrapolate with some data and show in a website for a one stop site to show which items are available for sale (my case!)
The answer to these unnecessarily complicated questions can be found by looking into what is already existing and is at our disposal for free! Who would not want the availability and maintainability of Google and Facebook? Couple that with an app/tool like IFTTT and we have a great website ready!
Based on the above thought process I have developed the site: SharmileeJewellery for my mother to showcase her handcrafted jewelry that are available for sale. The user story goes like this: my mother will upload the image of her jewelry piece in her facebook page, this triggers a recipe in IFTTT that creates a row with the image details (like image caption, image URL for Facebook's image store) in a Google Sheet file stored in Google Drive. She then goes and updates details like price, whether the item is sold, etc. in this sheet. The client side code reads this Google sheet data as JSON (the sheet is made available as public read-only) on load of the site, parses the data and formats it to show the beautiful website.
I will give a walk through of the various steps involved in this process.
Step 1: Create the required recipe in IFTTT
The process to configure a recipe in IFTTT is straightforward. We will add a new row to a spreadsheet in Google Drive once a photo is posted on the Facebook page with the default values of the image as sent by Facebook. The recipe will look like this:
Step 2: Update required details to spreadsheet as and when required. These details need not come from the original image post.
Step 3: Make the Google sheet data available as JSON feeds. The procedure to make the Google Sheet data available for consumption as JSON is highlighted here
Step 4: Viola! Your Sheet data is available as JSON. It contains the Image location (from facebook's CDN store) and other details (stored in the Google Sheet itself). You need to parse it and show it on the UI.
The JSON looks like this (I have highlighted the content of one of the rows from the sheet):
As a note, the first column in the sheet becomes the title field and the content attribute in the JSON contains the content from the remaining columns in that row. Although it is a string, if a value is present in the column, it is keyed by the column name (the first row's value for the column). Just play with a sample sheet to make sense of the preceding statements.
Step 5: Parse the JSON and show the world how you dynamically update your website whenever a new image is posted in your Facebook page!
Please post your comments/views in the comments section below.
If you need any help to develop this idea for your own website feel free to drop a note in my email: anuragchatterjee92@gmail.com
