User Tools

Site Tools


Sidebar

magento_2:instagram_feed

See the way the Instagram Feed for Magento 2 extension works.

Guide for Instagram Feed for Magento 2

Make your store trendy and increase your traffic with Instagram Feed extension for Magento 2. Display catchy Instagram content to visualize your store even more.

  • Automatically display engaging Instagram content with a widget
  • Add widgets to any webstore pages
  • Set flexible pictures sorting options
  • Choose the most apposite layout
  • Display the number of likes and comments right in the widget
For the proper functioning of the Instagram Feed extension, make sure you have HTTPS connection configured and your Magento is an “Open Magento”, with no htaccess permission limitations. This means that the functionality might not work to the fullest if you installed the module on a local environment or with restricted htaccess permissions. It is required by the Instagram API.

Configuration

To configure the extension, go to Stores → Configuration → Amasty Extensions → Instagram Feed.

Due to certain limitations in sessions for our Demo routers, the General Settings and Generate Access Token tabs are closed for public access in our demo. At the moment, we are working on the workaround to provide you with full access to our module functionality. All other features that are listed on the product page are absolutely available for you to explore. After installation to your Magento 2 store, the functionality of the Instagram Feed extension will work as described in the User Guide.

Expand the General tab.

General

Enabled - set to Yes to activate the extension.

Instagram Settings

In this tab, you need to link your Instagram account to your Magento 2 store.

Press the Generate Access Token button to create your Access Token, that is required for proper extension functioning.

If you've just updated to the versions >2.0.0 from 1.X.X, it is required for you to reconnect the app to the Instagram via pressing the Generate Access Token button. It is necessary to make the extension function as described on both the product page and the user guide.

To generate an Access Token, your account needs to be either a Business Account or Creator Account. We recommend choosing Business Account type if possible. Also, make sure you have your Instagram account connected to Facebook in the Instagram mobile app via Settings → Account → Linked Accounts.

After clicking on the Generate Access Token button, a pop-up window from Facebook will appear.

Choose the account that represents your store's business account. Then, proceed to set up what Facebook Page you want to be connected.

At the last step, please make sure that the setting named Access profile and posts from the Instagram account connected to your page is set to Yes. As for the rest of the settings, it is recommended to set them to Yes for proper performance.

After a successful connection, you'll see a filled-in Access Token field.

You can connect different accounts to different store views. For example, you can add Instagrams @brand_example_de to German store view, and add @brand_example_us for Worldwide and US store views.
If you see the following pop-up with a warning when configuring the extension:

It occurs if your website is configured to use the HTTP connection. To resolve the issue, you need to configure the HTTPS connection for your site. Instagram API doesn't allow the HTTP connection, so you can't generate an Access Token if you use the HTTP protocol.

Widget Creation

The extension allows to create flexible Instagram widgets and add them to any store page. To create a widget, navigate to Content → Widgets.

You can view and edit all existing widgets in a handy grid. To create a new one, hit the Add Widget button.

In the Type field choose Amasty Instagram Feed.

Set the necessary Design Theme and click Continue.

Storefront Properties

In this tab, you can adjust widget display on the frontend.

Widget Title - set the title for the widget that will be displayed in the backend and in the widget grid.

Assign to Store Views - specify the store views to which Instagram widget will be added.

Sort Order - set widget position among the other widgets within the same container.

Layout Updates - assign the widget to the category, product or generic pages.

If you select category or product pages, you may specify the particular ones to which the widget will be added.

In the Container dropdown select the position where the Instagram widget will be displayed.

Widget Options

Go to this tab to configure the widget layout.

Title - set a catchy title for the block that will be displayed on the frontend. Leave empty if no title needed.

Widget Type - choose one of the available widget types:

  • Grid
  • Slider
  • Single Post
  • Collage

Grid

If the Grid Widget Type is selected, it will have the following layout:

You may customize it according to your webstore design.

Posts Limit - set the maximum number of images to add.

Sort Posts By - choose the algorithm according to which posts will be sorted:

  • Newest
  • Most Liked
  • Most Commented
  • Random

Enable “Load More” - set to Yes if you want to show the “Load More” button.

Number of Posts per Page - specify the limit of the posts that will be displayed on one page.

Max Width - choose the resolution suitable for your store.

Mouse Click Action on Posts - select the action that will be performed if a customer clicks a post: Open Post in Pop-up or Open Post in Instagram.

Mouse On Hover Action on Posts - specify the action that will be performed if a customer hovers a post: Scale Photo or Show Photo Description.

Description is shown in the following way:

Posts Padding, px - adjust the padding if you want to add some space between pictures. Leave empty if you don't want to use padding between posts.

Cache Lifetime (Seconds) - specify the time in seconds between the widget updates. If not set, equals to 3600 seconds (1 hour).

To update widget instantly, go to Cache Management and clear Blocks HTML Output cache.
The Instagram pictures in your widgets are indexed and updated via Cron job. We choose this implementation, as the Instagram API has strict limitations on the number of requests per hour. That's why now we can't instantly update information in real-time.

Slider

If the Slider Widget Type is set, it will be displayed in the following way:

You can adjust the number of Columns and Rows in the slider.

Enable Autoplay - set to Yes if you want the slider to flip automatically.

Autoplay Delay (milliseconds) - adjust the speed of the autoplay. Leave blank to use the default value.

The other settings are configured similar to the Grid Widget Type.

Single Post

In the Single Post Widget Type, only one particular post is displayed.

It is possible to configure the following options:

Post URL - fill in the URL of the post that you want to show on your store page.

Max Width - adjust widget width according to your webstore style.

Hide Caption - you may hide photo caption or display it.

Collage

In the Collage Widget Type you can display a great number of photos in one place.

It is possible to set the required Collage Size: 3×3; 4×4; 5×5.

Also, set the necessary resolution, click and hover actions, padding and cache lifetime.

Adding Widget to a Page

Instagram feed lets you show posts on any page of your store. You may also add widgets using WYSIWYG editor.

To do this, go to Content → Pages. Choose the page to which you want to add a widget. In the Action column click Edit.

Expand the Content tab and click Insert Widget in the WYSIWYG editor.

Choose Amasty Instagram Feed type and configure the widget according to your needs.

Click Insert.

Post&Product Linking

By adding a link to an Instagram post, you can navigate users to a Product Page to make a purchase. To add the Post&Product Link, please go to Content → Post&Product Linking.

On a grid, you'll see a list of all imported Instagram posts you have in your store. Choose the post you'd like to connect with a product and press Select → Edit.

Press the Choose Product button. Then, in a dropdown tab, select the product you'd like to add. Hit the Save button.

This is an example of how the Product Page link looks on the frontend (Upper row, first two pictures from the left. The rest of the posts have no linked product).

Frontend Examples

Add widgets to promote your Instagram account right on product pages.

Make your category pages look stylish.

Show catchy pictures on CMS pages.

Apply one-click login and speed us shopping process with Magento 2 Social Login.

Boost your Instagram effectiveness

Maximize the benefits of a growing user base on your Instagram account. Oftentimes, users will click on posts that are featured in the Instagram Feed widgets and visit the original page. To not lose potential sales, store admins can set up Instagram Shopping. Instagram Shopping is an original Instagram feature that perfectly complements the Amasty extension.

To implement this feature, you need to be compliant with commerce policies and:

  • Be located in a supported market — check the list on an official Instagram page;
  • Sell physical goods, example — clothing, jewelry, etc.;
  • Have a business Instagram account and connect it to a Facebook page.

After you complete the necessary requirements, you can start tagging goods on organic posts. These tags will also be visible on the post featured in the Instagram Feed for Magento 2 widgets and are a great tool to boost sales.


Find out how to install the Instagram Feed extension for Magento 2 via Composer.

Rate the user guide
 stars  from 2 votes (Details)
magento_2/instagram_feed.txt · Last modified: 2020/08/07 21:55 by hfedulova