Instagram Connect extension for Magento 2
In the previous post, i talked about why Instagram become a very popular and powerful tool for advertising and selling product. I also mention about some products which help your store website connect with Instagram and using Instagram contents for all action of selling product with a diferent way as Instagram. In this post, i will introduce a product named Instagram Connect which can help everything you need to build the bridge from Instagram into your store website. This product is an extension for Magento 2 user but still developing for more markets in the future.
Instagram Connect Extension provide the functions to fetch all posts from user’s Instagram profile or hash tagged posts for each product and allow presenting them on user’s store. The easy configuration allows user to setup Instagram profile, choose if images can display on product detail page or create a widget to display image anywhere user want. With product’s tag, user just choose the tag and do the hash tag on Instagram images, the image will be shown in store website. The user can choose to display their follower of Instagram account where customers can link to them to have more information about the Store. With a strong display configuration, the extension brings to user a lot of choice to show their Instagram images in the best view. Moreover, the images display as a responsive carousel and can see bigger after click on the image.
First of all features is Instagram Connect configuration. It allow administrators to input the client id, client secret and access token to connect and get information from Instagram api. In the Dashboard, select Content in navigator, choose Configuration in Instagram Connect Management.
You need to input all of field to make the connection:
- Input Client id which is received when register the Instagram Developer Client
- Input Client secret which is received when register the Instagram Developer Client
- Input Access token which is received when register the Instagram Developer Client
I will write another post for guiding who don’t know how to register Instagram Developer Client information. This information can be used for any where need to connect with Instagram. Instagram also guide how to do it in this link. If you can not find how to do, read mine for easier because I write not for developer and step by step with images. If you read from Instagram link, please set permission to basic, public_content and follower_list. The extension only working if you set enough permission.
The second feature is Instagram images display configuration. It allow administrators to configure if the Instagram images can be displayed on product detail page or not and choose if they want to display likes and comments count of each image when see bigger or not. The images on the product detail page will display based on product’s tag which will be the hashtag on Instagram. The administrator just needs to hash tag on Instagram to make the image display in the store.
In the same page with Instagram Connect configuration, select Instagram Detail Product Display Configuration tab. You need to input and select your choice to display image in Product detail page:
- Choose if Instagram images can be displayed on the Product detail page.
- Choose the maximum image number which can be displayed. The number should be less than 20 for hight quality display.
- Choose if you want to display likes and comments of this image or not.
The next feature is Create tag for product. To make easy to display images on Instagram, Instagram Connect provide the product tag attribute. We just has to input product tag one time. The product tag will display on the product detail page and use in an Instagram hash tag for link that image with the product. In navigation choose Products, choose Catalog to view all product. Select Product you want to create tag and edit the Instagram Connect tab.
After create tag for product, we can copy the tag with # character which will be displayed on product detail page and paste into the comment of Instagram images which related to that product to make hash tag. The images will be displayed on the product detail page and make a good advertisement for that product. We need to refresh cache after do all hash tag on Instagram to make image display on your website.
The result after doing hash tag and refreshing cache will be shown on the product detail page.
The display of images also be responsive on mobile and tablet but not hover effect to make the images easy to look.
Example for Tablet:
Example for Mobile:
The next feature will bring you more convenient when displaying Instagram images on your website. It’s Instagram image widget. The Instagram Connect allow you to creat a widget to display Instagram images on everywhere you add the widget. The displayed image will be the newest images or following the hash tag you want. On the navigator select Content, Widgets, choose Add Widget.
Choose Type : Instagram Image Slider for widget and choose the theme you want to add widget. Click Continue button to configure detail.
In Storefront properties, you fill information for widget. The important thing is Layout Updates which will decide where the widget display on your website.
In Widget Options tab, you have to fill all require field to make it working.
- Title when show on list.
- Instagram hash tag for slider images: If you want to choose image for display but not automatically, choose the hash tag here and hash tag on Instagram. It will display only image with same hash tag with the configuration.
- Max number of image in slider: Choose maximum number of images can be displayed on widget.
- Number of columns and rows: Based on these fields, the slider on widget will be flexible to display on every where. With the small width place like left or right side of page, you can choose the columns is small and the rows is big. But with the place like main content, you should choose in the opposite way to have better view.
- Display likes and comments: Choose to display the likes count and comments count on Instagram of the images or not. If the image have a lot of likes and comments, customer will have more attractive to discover the product.
This is the result for the widget with after all configuration, in all device pc, tablet and mobile.
The last feature i mention in this post is Instagram follower widget. When a customer first time look to the Store, they don’t know how good this website and they want to ask some another one. The follower list feature will help to display all followers of store owner account on Instagram as slider of their thumbnail images. Once click to image, it will redirect to the follower’s Instagram page. They can talk with the follower to have some comments about Store or have more discussion so far. It will bring a lot of reliable advertisement for the store. Do step by step to add widget like the Instagram images widget but in the Type of widget select Instagram Follower Slider.
Fill all require field to the widget working on your website. It’s the same with Instagram images widget but don’t have the hash tag and likes comments count. The widget result will display as below:
You can see full demo which I installed following this link. The sample product is Nike KD7 Floral shoes.
In conclusion, with all of these features, this extension is the good choice for connect your store website with Instagram.Furthermore, for next few months, we will update new features for the extension. Therefore, customers will have more choices to use Instagram content for advertising and selling product. If you have any questions, new ideas or event troubles which related to this extension please get in touch by comment. I will be more than happy to help.
If the extension in the post is useful for you. You want to buy it or search for more useful extensions for Magento 2, please visit our official website.
[otw_shortcode_button href=”http://x-mage2.com/instagram-connect.html” size=”medium” icon_type=”general foundicon-star” icon_position=”left” shape=”radius” color_class=”otw-orange” target=”_blank”]Instagram Connect Extension[/otw_shortcode_button]
[otw_shortcode_button href=”http://x-mage2.com/” size=”medium” icon_type=”general foundicon-star” icon_position=”left” shape=”radius” color_class=”otw-orange” target=”_blank”]View X-Mage2’s Products[/otw_shortcode_button]