Social Feed Documentation

With the Social Feed plugin, you can display feeds from the most popular social networks - Facebook, Instagram or Twitter. 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.

Before creating a Social Feed you need to set up your Social Networks. A Social Network contains the setup required to get the data from a certain social network like Facebook, Instagram or Twitter. You can think of the Social Network as your saved username and password for obtaining the data from a given social network i.e Facebook.

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

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 each one of the supported social networks separately.

Instagram

In order to set your Instagram social feed in our plugin, you will first have to create your Instagram App. Here is how you can do this and configure our plugin:

• Log in to the Facebook developers portal - https://developers.facebook.com/.
• Once you log in, click on Create App.
• You will see 6 options and you have to select None. 

• Fill your App Display Name and App Contact Email and click Create App.

• You will be redirected to the App dashboard page. First, you need to go to Settings -> Basic from the left sidebar. Scroll to the bottom of the page and click on the Add Platform button.

• Select the Website option and add your website's URL

• Then go to the Dashboard from your left sidebar and scroll to the Add a Product section. Find the Instagram Basic Display box and click Set Up

• On the next page, you will see some details about the Instagram Basic Display. Click on Create New App at the bottom

• Put in your Display Name and click Create App

• The page will be refreshed and now you will see your Instagram App ID and Instagram App Secret keys, which you will need to add to our plugin when you create a new Social Network. In a new tab in the browser, open the administration dashboard of your website and go to Nop-Templates -> Plugins -> Social Feed -> Configure Social Networks. Then click the Add New button

• Add Name and select the Instagram option from the Social Network dropdown. You will now see the fields where you will need to put in the Instagram App ID (Client ID field) and Instagram App Secret (Client secret field). Also, enable the Use Test User checkbox

• Before you generate the Access Token for the test user, you will need to add the 3 URLs - Redirect Url, Deauthorize Url and Delete Url, to your Instagram app in the Facebook Developers portal. The fields for them are right below the Instagram App ID and Instagram App Secret on the Instagram App settings page. (you need to have https and SSL enabled for your store) 

• Once you add the 3 URLs to the corresponding fields in the Instagram app settings page, you can save the settings. Then, right below them, you will find the User Token Generator section. Find it and click on Add or Remove Instagram Testers

• On the next page, at the bottom, you will see an empty table called Instagram Testers. Click on the Add Instagram Testers button to add your test user

• Fill in your test user's Instagram username

• You will now see your Instagram user added to the table, but right now it will be with status pending

• Now go to your Instagram profile of that user and go to Settings

• Go to Apps and Websites -> Tester Invites -> Then accept the invitation that you have from your Instagram App

• Now, you need to go back to your Instagram Basic Display settings in the Facebook Platform, go to the User Token Generator section and you will now see your user there and right next to it, there is a Generate Token button

• Click the Generate Token button and you will be prompted to Allow the Instagram profile to share information with your Instagram app. Click on the Allow button. (you might have to log in to your Instagram profile in order to see this)

• Now check the I Understand checkbox and you will see your test user's Access Token

• Go back to your website and add the Access Token in the input field, then save the changes

After you save the changes, you will see image settings on the same page:

1. Images Type - The image types can be:
   • User(default) - Images for the user who has authorized the app.
   • Tagged - Images with a specific tag. tagName is used to specify the tag.
   • Location - Images from a location. locationId is used to specify the location.
   • Popular - Images from the popular page.
2. Resolution - The resolutions can be:
   • Thumbnail(default) - 150x150
   • Low resolution -306x306
   • Standard resolution - 612x612
3. Sort By - Sort the images in a set order. Available options are:
   • None(default) - As they come from Instagram.
   • Most recent - Newest to oldest.
   • Least recent - Oldest to newest.
   • Most liked - Highest number of likes to lowest.
   • Least liked - Lowest number likes to highest.
   • Most commented - Highest number of comments to lowest.
   • Least commented - Lowest number of comments to highest.
   • Random - Random order.

• Now that you have the Instagram Social Network configured, you can go to Nop-Templates -> Plugins -> Social Feed -> Manage Social Feeds and click on Add New

• Select Instagram from the Social Network dropdown and add the Name, Title, Subtitle Label and Subtitle link text. Then save the changes

If you now enable our plugin through Nop-Templates -> Plugins -> Social Feed -> Settings and have Enable social page enabled and it's widget zone selected, you will see the Social Feed link in your website's Menu. If you go there, you should now have the Instagram tab, which displays your Instagram feed.

Manage Social Feeds

From this section, you can control where 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 them up 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.
   
   
   
   • 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/feeds/tweets/etc you want to be pulled from your social network sources mapped to 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.