Read More
Read More
Menu Close

    Instagram Shop Feed For Woocommerce

    Introduction

    Instagram Shop Feed For Woocommerce is a perfect form of advertising the product via social media platform as Instagram.

    The plugin gives the power to display Instagram Feeds on the product page, collection page and on a special page dedicated to the Instagram feeds.

    Instagram feeds here refer to the post shared by the product user which gives a clear image of the product in real life.

    Thus, this will help in increasing the user’s trust over the product and encourage them to purchase the product.

    Note:

    Searching for an experienced
    Woocommerce Company ?
    Read More
    • It is mandatory to have an Instagram business account connected with a Facebook page.
    • The user needs to register for the Facebook developer account and must possess a basic configured Facebook App.

    Features – Instagram Shop Feed For Woocommerce

    • Admin can easily create the hashtag and assign it to the products.
    • The admin can edit the existing tags and fetch images that are using the same tags.
    • The attraction of maximum customers as now they can view the products in reality by the images uploaded on Instagram.
    • The customer can view related images of the product without the requirement of actually browsing it on Instagram.
    • Admin can select the pages(Product page, Shop page, and Dedicated page(Instagram Feed page)) where the tag will be visible.

    Installation

    The user will get a zip file which he has to upload in the “Add New” menu option in the WordPress admin panel.

    For this login to WordPress Admin Panel and Under the Dashboard hover your mouse over the “Plugins” menu option which brings out a Sub-Menu and then select the “Add New” option.

    WordPress WooCommerce Marketplace

    After this, you will see an option on the top of your page that is “Upload Plugin”, click the option to upload the zip file.

    WordPress WooCommerce Marketplace

    By clicking on the “Upload Plugin” option, below that you will see a button “Choose File” click on the button to browse for the zip file as per the snapshot below.

    WordPress WooCommerce Marketplace

    After browsing the file, click the “Install Now” button to install the plugin as per the snapshot.

    WordPress WooCommerce Marketplace

    Now post complete installation of the plugin, you will see the success message and an option to activate the plugin. Click on “Activate Plugin” to activate the installed plugin.

    woocommerce marketplace

    After activating it, the marketplace tab will appear in the admin panel like in the snapshot below.

    installation

    Update Permalink under “Settings > Permalinks” as “Post name” as in the below snapshot.woocommerce marketplace

    Facebook Developer Registration

    Once, you have logged into your Facebook account firstly, go to the Facebook for Developer webpage.

    Facebook-for-Developers-1

    Click Get Started and confirm your email address select developer in the section for About you and complete registration.

    Register-as-a-developer-Facebook-for-Developers

    Create App – Settings

    Right after, completing the registration the user is redirected to the below page. Here, click Create App.

    All-Apps-Facebook-for-Developers

    Further, select the Manage Business Integration option and press Continue.

    All-Apps-Facebook-for-Developers-7

    After, entering your App Display Name App Contact Email click the Create App.

    All-Apps-Facebook-for-Developers-8

    To proceed, the user needs to add the Facebook Login in the section Add products to your App. As a result, the Facebook login will be added to your Products.

    Click on the Facebook Login > Settings.

    mark-williamson-Add-Product-Facebook-for-Developers-1-1

    Further, enter your redirect URL in the Valid OAuth Redirect URLs band and Save Changes.

    Note: The user can add more than one redirect URLs.

    mark-williamson-Facebook-Login-Facebook-for-Developers

    Add Product – Instagram Graph API

    Click the Add product icon and then press the Set Up button under the Instagram graph API.

    mark-williamson-Dashboard-Facebook-for-Developers

    The user will be redirected to the below page.

    mark-williamson-Instagram-Graph-API-Facebook-for-Developers

    In order to be able to use this API in Live mode, the user needs to undergo the process of App Review and permissions for the below.

    mark-williamson-App-Review-Facebook-for-Developers

    Retrieve APP ID & Secret Key

    In order to fetch the APP ID & Secret Key just go to the Settings > Basic in the side bar menu of the Facebook for developer Dashboard itself and copy your APP ID & Secret Key.

    mark-williamson-Settings-Facebook-for-Developers

    Connect to Facebook

    In order to to be able to fetch the images so your facebook account must be connected. For this the admin can now go to the Instagram Shop Feeds > Settings. Here, save your Facebook APP ID and FB Secret Key and then click Connect to Facebook.

    Settings-‹-Instagram-Shop-Feed-For-WooCommerce-—-WordPress

    Note : For the Facebook Access Token this will be Fetched automatically, once you have saved app ID, secret key and then connect to facebook. Moreover, the lifetime of access token is nearly 60 Days.

    After that in the pop-up window that will appear simply click on continue to complete the log in.

    Log-in-With-Facebook

    Configuration

    The admin can now go to the Instagram Shop Feeds tab from where new tags could be created and a list of created tags could be displayed.

    Instagram-Shop-Feeds-‹-Instagram-Shop-Feed-For-WooCommerce-—-WordPress

    To edit the view of the Instagram feed in the front end The admin can go to the Instagram Shop Feeds > Settings select the type of view under the Instagram feed view section and click Save Settings.

    Settings-‹-Instagram-Shop-Feed-For-WooCommerce-—-WordPress-j

    The admin can click on Add Instagram Tags in order to create new tags. The admin here needs to fill-

    • Instagram Hash tag– The title of the hashtag will be mentioned here.
    • Instagram linked Products– The admin can specify the list of product which is linked to the tag.
    • Hashtag Visibility– The list of pages here can be mentioned where the hashtag is required to be made visible.
    • Hashtag Priority– The admin can set at which priority level the tag is.
    • Status– The admin can enable the tag to make it visible and can disable it to hide it.

    Add_Instagram_Tags

    The admin can now click on the Instagram Shop Feeds page to view the list of tags.

    Note-In order to create new tags the admin click on Add New.add_new_tag

    However, the admin can even edit or delete a tag from here.

    Edit And Fetch Images From Tags

    After creating the tags, the admin will now fetch images from the tags. For this, the admin will navigate to the Instagram Shop Feeds tab.  Further, the admin will click on the Edit button for the particular tag.

    webkul-woocommerce-instagram-news-feed-tag-list-page-3

    After that, the admin move to the tag edit page. Here, the admin will click on the Fetch Image button present at the bottom of the page.

    webkul-woocommerce-instagram-news-feed-edit-tag-details-3

    Further, an image popup will appear including the images with the same hashtags. The admin will select desired images among them. And, then the admin will click on the import button.

    webkul-woocommerce-instagram-news-feed-tag-list-page-3

    Finally, the admin will be able to see the list of fetched images. The admin can also take bulk actions like Delete, Enable, and Disable on those images. The list will be visible as shown in the image below:

    screencapture-wpdemo-webkul-woocommerce-instagram-shop-feed-203-122-41-218-wp-admin-a

    Frontend

    The customer can view these tags on various pages- Product page, Shop page, and Dedicated page(Instagram Feed page).

    The images will also appear along with the products in the tag.

    Product Page-

    The customer can go to any product to which the tag is attached. The customer needs to scroll down and in the Featured Post of buyers from the Instagram section, they can view the attached tags.

    These tags contain the image related to the product as getting populated on Instagram handles.

    productpage

    Shop Page(Collection page)-

    The customer can view the hashtags in this section also in the form of a carousel or list as set by the admin.  Now, the customer can click on view product to see the related product to the hashtag.shop

    Dedicated Page(Instagram Feed Page)-

    The Instagram Feed Page contains all the tags on the store which are having products associated with them. So, for seeing the products, the customer can click on View Products Button on the tag.

    instagram_feedA pop up will open up with the list of assigned products and images of the product.

    Products

    Thus, with this module, the store owner can attract more customers by sharing the live images of the product being used by other customers. Through this module, the store owner can share the usability of the product also.

    Responsive

    The Woocommerce Instagram Shop Feed is compatible with all the screen size and can adjust according to Mobile screen, Tablet screen, and Desktop screen.

    responsive

    That’s all for the Instagram Shop Feed For Woocommerce, still, have any issue feel free to add a ticket and let us know your views to make the module better https://webkul.uvdesk.com

    Current Product Version - 1.0.1

    Supported Framework Version - WordPress, 5.6.x, WooCommerce, 5.0

    Blog Version - WordPress, 5.6.x, WooCommerce, 5.0
    • Version WordPress, 5.6.x, WooCommerce, 5.0
    • Version WooCommerce 3.0.x, 3.1.x, 3.2.x, 3.3.x, 3.4.x, 3.5.x, 3.6.x, 3.7.x, 3.8.x
    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Table of Content