Documentation
Back to website >

Social Feed Documentation

With the Social Feed plugin, you can display feeds from the most popular social networks - Facebook, Google+, Instagram, Twitter and Pinterest. 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 setup your Social Networks. A Social Network contains the setup required to get the data from a certain social network like Facebook, Google+, Instagram, Twitter or Pinterest. 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.

Note: Facebook, Twitter, Instagram, and Pinterest 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: Since 31.04.2018 every Facebook App for the Social Feed should undergo a review. You can read this article for more information on how to submit your Facebook App for review. 

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.

Facebook

Note: In order to use the plugin to show your Facebook feed, you will need to get your Facebook application approved. The app needs the user_posts permissions to operate, so you will need to specify that in the submission of your app for review. Since the Social Feed plugin uses the Facebook Login functionality to authorize you, you will need to note to the reviewer staff of Facebook that there is, in fact, a Facebook login button on your page but it is in the administration of the plugin and thus it is accessible only by people with permissions (Administrators for example) - that's the Authorize button. You can find more information on how to submit your app for a review in this article

If you choose Facebook from the Social Network dropdown you will see the following settings: Redirect Url

To obtain your AppId and AppSecret do the following:
  1. Login to Facebook (if you haven't already) and go to https://developers.facebook.com/apps.
  2. Click on Add a New App in top right corner.
  3. You will see a popup named "Create a New App ID". Enter your app name under "Display Name" and your email under "Contact Email". After that. you should choose the "Category" of your app. Choose whichever category describes your app the best. Click Create App ID to create your app.
  4. Next thing you may see will be Quick Start screen. You can skip it by clicking the Skip Quick Start at the top right corner.
    Note: If a Quick Start screen does not show just continue following the instructions after that.
  5. If you had skipped the Quick Start screen youwillberedirectedtotheapp Dashboard.
    • In there, at left, you will see navigation. On Products section click on +AddProduct.
    • Click on the Get Started button next to the Facebook Login section.
    • After that choose Web platform and enter your Site Url. After that Click "Continue" until the steps are over.
    • In the left side menu a new section "Facebook login" will show under the Products Section. You will need to click on "Get Started" button next to the Facebook Login title.
    • Facebook will ask for the type of platform you use. You should choose Web.
    • A set of new steps will appear on your screen. You should skip the "Set Up the Facebook SDK for Javascript" step by clicking "next". After that you should enter your site URL in the "Tell Us About Your Website" step and save. Click continue and the third step "Log App Events" will appear. You should skip that and all the rest steprs by clicking "next" as well.
    • In the side menu a new item called "Facebook Login" will appear. Below it there should be a link called "Settings". Click it.
    • In there make sure that the Client OAuth Login is enabled.
    • Now, before you use your App Id and App secret enter the Redirect Url in the Valid OAuth redirect URIs, then click the Save changes button at the bottom.
    Note: You can get the Redirect Url from the Configuration page of the Facebook Feed in the Social Feed Administration.
  6. Now, if you click Settings from the navigation and go to the Basic tab or on the Dashboard you will see your App ID and App Secret.

Now, when you have your AppId and AppSecret, enter them in the corresponding text fields, Save and you will see an Authorize button.

Authorize button for the Facebook Social Network in Nop Social Feed Plugin.

By clicking on the button a popup will be opened containing the Facebook's authorize screen (this is the case when you haven't already authorize the app. If you have already authorized the app the popup will just close). There you will be asked if you are willing to provide certain rights to your Facebook profile.

Popup for authorizing the Facebook Social Network.

Note: You may see a warning about your app not being approved by Facebook. You could submit it for approval to the Facebook support team, but skipping this step will not have any effect on your social feed integration.

If you choose to authorize the app (by clicking the Authorize button) the popup will close and the Edit page will refresh. If the Authorize button is highlighted your authorization was successful if it is unhighlighted you haven't authorized the app.

Comparison between the the authorize button and the authorized button.

 When you are authorized you will see a Post Source setting dropdown with two options:

  1. Me - Means that the posts will be pulled from the profile of the user who authorized the app.
  2. Page - Gives you the ability to pull posts from a certain page, by giving the page name. The Page name is part of the page link i.e. https://www.facebook.com/NopTemplates In this link NopTemplates is the page name.
    • Page Name - Here you should specify a page name from which to get posts. If you don't specify page name the "me" endpoint will be used, which will get the posts of the user that have authorized the facebook app.

Twitter

If you choose Twitter from the Social Network dropdown you will see the following settings: Redirect UrlConsumer Key

To obtain your Consumer Key and Consumer Secret do the following:
  • Login to Twitter (if you haven't already) and go to https://apps.twitter.com.
  • Click on Create New App in top right corner.
  • Fill the form and click on Create your Twitter application button.
  • After your app is created you will see your app settings page. There on the Keys and Access Tokens tab you will find your Consumer Key ( API key ) and Consumer Secret ( API secret ) along with other data.

Now, when you have your Consumer Key and Consumer Secret, enter them in the corresponding text fields, Save and you will see an Authorize button.

Authorize button for Twitter social network for the Nop Social Feed Plugin.

By clicking on the button a popup will be opened containing the Twitter's authorize screen (this is the case when you haven't already authorize the app. If you have already authorized the app the popup will just close). There you will be asked if you are willing to provide certain rights to your Twitter profile.

Popup for authorizing the Twitter social network.

If you choose to authorize the app (by clicking the Authorize button) the popup will close and the Edit page will refresh. If the Authorize button is highlighted your authorization was successful if it is unhighlighted you haven't authorized the app.

Comparison between the the authorize button and the authorized button.

The source of the posts will be the account you have used to authorize the app.

In Twitter, you can set Permissions for your app, which specify what type of access does your application need. This is done from:

https://apps.twitter.com -> Your app -> Permissions tab

The permission tab for Twitter Social Network.

When you change the permissions of your app you will need to regenerate your Consumer key and Consumer secret. This can be done from the Keys and Access Tokens tab, by clicking the Regenerate Consumer Key and Secret button.

Tab where you can regenerate your credentials.

After you get your new Consumer Key and Consumer Secret you will need to set them in the Social Feed administration and Authorize the app again.

Instagram

If you choose Instagram from the Social Network dropdown you will see the following settings: Redirect UrlClient Id

To obtain your ClientId and ClientSecret do the following:
  • Login to Instagram (if you haven't already) and go to http://instagram.com/developer.
  • Click on Manage Clients in top right corner.
  • Click on Register a New Client and fill out the form.
  • After your client is created (after you click the Register button) you will see your ClientId and ClientSecret along with other fields.

Now, when you have your Client Id and Client Secret, enter them in the corresponding text fields, Save and you will see an Authorize button.

Authorize button for the Instagram Social Network for Nop Social Feed plugin.

By clicking on the button a popup will be opened containing the Instagram authorize screen (this is the case when you haven't already authorize the app. If you have already authorized the app the popup will just close). There you will be asked if you are willing to provide certain rights to your Instagram profile.

Authorize popup for the Instagram Social Network.

If you choose to authorize the app (by clicking the Authorize button) the popup will close and the Edit page will refresh. If the Authorize button is highlighted your authorization was successful if it is unhighlighted you haven't authorized the app.

Comparison between the the authorize button and the authorized button.

The source of the posts will be the account you have used to authorize the app.

After you have authorized the app you will see image settings:

  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.

Google+

If you choose Google+ from the Social Network dropdown you will see the following settings: ApiKey 

To obtain your Api Key do the following:
  • Go to https://console.developers.google.com.
  • Create a new project by clicking on Select a project (at right part of the option bar at top) -> Create project and entering your chosen project name in the popup.
  • Next, you will be redirected to your project Dashboard. Choose the Api Manager from the menu (you can open it by clicking the menu icon at top left).
  • From the Api Manager page choose Credentials from left menu.
  • You will see something like a popup at the center of your screen. Click on the Create credentials dropdown and select API key.
  • Choose Server key, specify your key name and if you want to restrict access to your key you can specify your site IP address (this is optional).
  • When you click the Create button you will see a popup and your API key will be there.
You will need to turn your Google+ API on:

After you have your Api key enter it in the corresponding field and Save.

The Source is your user id in Google+ or page id (depends on from where you want to get feeds). You can get your User id or Page id by going to the user or page at Google+ and the id will be in the URL. For example, if you go to Nop-Templates Page, the URL will be https://plus.google.com/100054470244946055009 the id is 100054470244946055009. There is another type of ids in Google+, for example, https://plus.google.com/+ThisiswhyicodeBlogspot, the id here is +ThisiswhyicodeBlogspot.

Pinterest

If you choose Pinterest from the Social Network dropdown you will see the following settings: Access Token 

  1. To get your access token go to https://developers.pinterest.com/tools/access_token/, select the scopes for your access token. For this plugin, the read_public is enough.

    Click on Generate token button and you will be able to get your access token from the text box next to the Generate token button.
  2. To get your Pinterest board name go to your Pinterest profile page, click on the board and the URL will become something like https://www.pinterest.com/username/boardnameCopy the username/boardname part into the box above

 

Note: The apps you use for the Social Feed plugin must be live. Facebook, Instagram and Twitter have restrictions for apps that are not live.

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 network 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/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 certain page or only on pages that have the selected widget zone/s.