A statistic on theverge.com reveals that Instagram enjoys more than 75 million daily active users. Yes, that’s right! A whopping 75 million users log in to Instagram.com every single day, only to share their images with the outside world.
The mass usage of Instagram has resulted in extensive inclusion of the photo sharing website in various business. Business owners realise the potential of the system when integrated with their business and are leveraging it to their benefit.
One such application of the system is the Integration of Instagram with WordPress, more specifically with WooCommerce.
The Instagram WooCommerce integration allows users to combine various photos from Instagram to create a single image, popularly known as a collage. These collages can then either be sold independently or along with other products.
The plugin helps you leverage both, the popularity of Instagram and the growing trend of product personalization.
Plugin Development: Behind the Scenes
Let’s take a look at the exact mix of ingredients that would go into developing the Instagram WooCommerce Integration Plugin.
OAuth is basically an open source standard for authorization. This protocol will allow the plugin to access the user’s data on behalf of him. You can call it a third party access.
You can look out for Instagram’s API on their developer site for authentication methods. And if you need a detailed step by step solution then here’s a great article for you.
The basic concept is as follows –
- The user wishes to upload the images using his Instagram account.
- He will need to authenticate his account first using the OAuth 2.0 protocol.
- The user will be redirected to a login page where he has to authenticate the plugin to use his Instagram data.
- After authentication, he will be returned to the site with a success message.
This authentication allows the plugin to use the user’s images from his Instagram account. Basically authentication helps to integrate Instagram with WordPress.
Using the magic of AJAX
The User Interface
The uploaded images will be displayed as thumbnails in the left panel of the site. This is all dynamic and doesn’t require the user to refresh the page.
The right panel is a 720 x 720 pixel canvas which is basically a grid of 10 x 10 pixel blocks. The user can drag the picture from a left panel and drop it in the desired block on the right. This drag and drop concept is somewhat similar to Gliffy.
Also, the images on the right-hand side can be rearranged using drag and drop technique. The best example would be Gridly and Shapeshift. The only difference is that we will be strictly using square shapes.
Square Shaped Images
The images taken from Instagram will be square shaped already but what about the images which are manually uploaded by the user? The user can upload rectangular images and we don’t want that! Therefore, we need to develop a cropping mechanism for images which are not square. Here are some links for square cropping mechanism –
Once the image is cropped, it will be made available on the left panel which again can be dragged and dropped onto the canvas on the right.
Adding the final result to Cart
There will be an Add to Cart button at the bottom of these two panels. This button is grayed out by default but If the user drags and drops at least two or more images to the canvas on the right then the button becomes available.
When the user clicks on the Add to Cart, the images present on the right canvas are combined together to form a beautiful image. This image is then converted to JPEG, PNG or any standard internet image format and made available on the server.
This image will be available to the user for download only after the user completes the payment of the respective image.