Documentation
Back to website >

Social Feed Documentation

With the Social Feed plugin, you can display feeds from the most popular social networks - Instagram. The feeds could be integrated on different parts of your site through widget zones.
With this plugin, you can also have a separate Social Feeds page on which all the feeds are displayed, sorted by date of creation.

Live DEMO - see how the Nop Social Feed Plugin would look like in your public store.
Admin DEMO - see the plugin administration.

Before creating a Social Feed you need to set up your Social Networks. A Social Network contains the setup required to retrieve data from Instagram. You can think of the Social Network as your saved credentials and configuration for obtaining data from Instagram.

Once you have configured a social network you can create a social feed using the data from that network.

Note: Instagram may change their sites without any notice. Please submit a ticket telling us the problems you have encountered if the documentation doesn't represent the process of creating apps for these sites correctly.
Note: Every Instagram App used for the Social Feed may need to undergo review according to Instagram’s platform policies.
Important: Meta has retired Instagram Basic Display. The Social Feed plugin now uses Instagram API with Instagram login. You need a Business or Creator Instagram account and HTTPS (SSL) on your store.

Let's look at each section of the plugin administration separately.

Settings

This is where you can enable the plugin and the Social Feeds page.

  1. Enable - enable/disable the plugin.
  2. Enable social page - From this setting, you can enable/disable the Social Feeds Page.Social page is the place where you can see all your social feeds in one place.
    • Header Menu Integration - Choose where to show the link to the Social Feeds page in the main menu. This will provide a link to the Social Feeds page where all of the available social networks will be shown. Choose "None" if you do not want to show the Social Feeds page link in the menu.

Configure Social Networks

From this section, you can configure the connection to each social network. The Name setting is just a system name used only in the administration. You can use it to distinguish your social networks in the administration.

Let's look at the supported social network.

Instagram

To display your Instagram feed, create a Meta app with Instagram API with Instagram login, then connect it in the plugin admin.

Part 1 — Create and configure your Meta app

  1. Log in to the Meta for Developers portal: https://developers.facebook.com/.
  2. Click Create App and choose Business (recommended).
  3. Enter your App name and App contact email, then click Create app.

Create Meta app

  1. On the app dashboard, go to Add products (or Use cases) and add Instagram API with Instagram login.
  2. Open API setup with Instagram login (or Instagram business login settings).
  3. Copy your Instagram app ID and Instagram app secret — you will paste these into the plugin.

Instagram app ID and app secret in Meta dashboard

Part 2 — Connect the plugin in nopCommerce admin

  1. In your store admin, go to Nop-Templates → Plugins → Social Feed → Configure Social Networks and click Add new.

Configure Social Network

  1. Enter a Name (for admin use only) and select Instagram from the Social Network dropdown.
  2. Paste your Instagram app ID and Instagram app secret from Meta.
  3. Leave Use Test User unchecked unless you are a developer testing with a manual token.
  4. Click Save (required before authorization).

Instagram API connection settings in plugin admin

Part 3 — Add callback URLs in Meta

On the same plugin page you will see three URLs:

  • Redirect Url — e.g. https://yourdomain.com/Instagram/Authenticate
  • Deauthorize Url — e.g. https://yourdomain.com/Instagram/Deauthorize
  • Delete Url — e.g. https://yourdomain.com/Instagram/Delete
Note: Use your real store domain with https. Do not add a language prefix (e.g. use /Instagram/Authenticate, not /en/Instagram/Authenticate).
  1. In Meta, open Instagram API with Instagram login → OAuth redirect URIs (or Instagram business login settings).
  2. Add the Redirect Url from the plugin exactly as shown.
  3. Add the Deauthorize Url and Delete Url if your Meta app provides fields for them.
  4. Save the Meta app settings.

OAuth redirect URIs in Meta app

Part 4 — Authorize your Instagram account

  1. Back in the plugin admin, click Authorize.
  2. Log in with the Instagram Business or Creator account you want to display on your store.
  3. Grant the requested permissions. When successful, the button shows Authorized and the status shows Connected.

Authorize Instagram in plugin admin

Note: The access token is long-lived (about 60 days). Click Authorize again anytime to refresh the connection.
Developer option: Use Test User is only for advanced testing with a manually pasted long-lived token. Normal store setup should use the Authorize button instead.

Part 5 — Create a Social Feed

  1. Go to Nop-Templates → Plugins → Social Feed → Manage Social Feeds and click Add new.

Manage Social Feeds

  1. Select Instagram from the Social Network dropdown.
  2. Enter Name, Title, Subtitle Label, and Subtitle link text, then save.
  3. Set Published to enabled and choose Widget Zones where the feed should appear.

Create social feed

If you enable the plugin under Nop-Templates → Plugins → Social Feed → Settings, enable Enable social page, and select a header menu widget zone, your store menu will include a link to the Social Feeds page. The Instagram tab will show posts from your authorized account.

Troubleshooting

  • Invalid platform app — Use credentials from Instagram API with Instagram login, not an old Basic Display app.
  • Invalid redirect_uri — Redirect URL in Meta must match the plugin URL exactly (https, no language prefix).
  • Empty feed on storefront — Confirm the Social Feed is Published, linked to your Instagram social network, and site cache is cleared.

Manage Social Feeds

From this section, you can control from which social network, for which store, and how many feeds will be displayed in the public area.

There are two tabs in this section, let's look at them separately:

Settings

From here you can map certain social networks to the current feed, control some of the display settings and choose for which store this feed will be available.

  1. Published - This setting determines if the feeds from the social networks mapped to this feed will be available in the public area.
  2. Store - Select for which store the feed will be available.
  3. Social Network - Social network source from where the feeds will be taken.
  4. Name - This is just a friendly system name used only in the administration.
  5. The next three settings determine the title above the posts of the selected social network visible in the public area.

    Picture of the title of the Social Feed in public store.
    • Title - This is the primary part of the title
    • Subtitle Label - Social network subtitle label - i.e. Follow us, Like us, etc.
    • Subtitle link text - Social network profile/source name - i.e. @noptemplates
    • Subtitle Url - This is not a setting that you can control. It is just a representation of the link + text that will be displayed in the public area. It is generated automatically, depending on the social network you choose.
  6. Custom class - Will be applied to the social feed wrapper. Can be used for styling purposes.
  7. Number of posts - Number of posts you want to be pulled from your Instagram social network for this feed.

Widget Zones

From this tab you can select where in the public area you want your feeds to appear. You may select several widget zones, this way you can make one feed appear on multiple places on a certain page or only on pages that have the selected widget zone/s.

Related Articles

Copyright © 2011-2026 Seven Spikes Inc