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.
Live DEMO- see how the Concerto 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 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.
Note: Facebook, Twitter and 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: 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.
This is where you can enable the plugin and the Social Feeds page.
- Enable - enable/disable the plugin.
- 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.
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 Concerto -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
Note: The token has a 60 days lifespan. Once it expires, you can generate a new one the same way.
- Go back to your website and add the Access Token in the input field, then save the changes
The source of the posts will be the test user account.
After you save the changes, you will see image settings on the same page:
- 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.
- Resolution - The resolutions can be:
- Thumbnail(default) - 150x150
- Low resolution -306x306
- Standard resolution - 612x612
- 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 Concerto -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 Concerto -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:
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.
- Published - This setting determines if the feeds from the social networks mapped to this feed will be available in the public area.
- Store - Select for which store the feed will be available.
- Social Network - Social network source from where the feeds will be taken.
- Name - This is just a friendly system name used only in the administration.
- 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. @Concerto templates
- 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.
- Custom class - Will be applied to the social feed wrapper. Can be used for styling purposes.
- Number of posts - Number of posts/feeds/tweets/etc you want to be pulled from your social network sources mapped to this feed.
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.
FACEBOOK SHOP DOCUMENTATION
With the Concerto Facebook Shop plugin, you can get your store up on Facebook, where everybody can see it. This plugin comes with styling for all our themes.
IMPORTANT: Recently Facebook changed their policy for page tabs and now you can use them only if you have at least 2000 likes on your Facebook page. So you won't be able to integrate the plugin unless you have at least 2000 likes on your facebook page.
Live DEMO- see how the Concerto Facebook Shop plugin would look like.
To enable Concerto Facebook Shop just install it. You can access it via this path: http(s)://www.yourStore.com/facebook/store/. The plugin supports Concerto Commerce 3.5 or higher versions.
- Home Page Products - Select the products, which will be shown on the home page.
- Number Of Item Boxes Per Row - Set how many products to be shown on each row in the product grid.
- Catalog Page Size - Set how many products to be shown on catalog pages.
- Main Banner Image - Select an image that will show up at the top of your Facebook store.
- Show Main Banner On All Pages - Check this setting to show the main banner on all pages. Otherwise, it will be shown only on the home page.
MAIN MENU SETTINGS
- Main Menu Categories - Select the categories, which will be shown in the menu.
- Number Of Top Level Menu Category Items - Set the number of categories to be shown as top-level items on the menu. The rest will be shown in "More" menu item.
- Include Manufacturers Item In The Main Menu - Check this setting to show a manufacturer's item in the main menu.
PRODUCT PAGE SETTINGS
- Show Short Description - Show short description on the product details page.
- Show Full Description - Show full description on the product details page.
- Number Of Related Products - Set how many related products to be shown on the product page.
The server you are using has to be secure - it should have a valid SSL Security Certificate for the domain under which it's hosted. This is required by Facebook.
Facebook Developer Application
- The first step is creating an application on Facebook. You can do this by going to https://developers.facebook.com/. Click on My Apps on the top right -> Create App.
- Choose a Name for your app and provide a contact email, then click Create App ID
- Once you confirm, you will be redirected to your app page. Now go to Settings -> Basic from the left navigation
- Scroll to the bottom of the page and click the Add Platform
- Select Page Tab platform.
- In the newly created section enter the URL of your website in the format "https://www.yourstore.com/facebook/store/". NOTE that the URL should be with HTTPS and the suffix /facebook/store.
- Now at the top of the screen, click the gray button OFF (next to the Status: Development). After you confirm, your App should be accessible by the public.
By default, the "Page Admin Control" and the "Wide Page Tab" are enabled. Leave them this way and save the changes.
From the left navigation > App Details, you can add images and icons for your app.
Including your app on your Fan Page
Navigate to the following URL in your browser: https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&redirect_uri=YOUR_URL
Replace "YOUR_APP_ID" with your App ID and "YOUR_URL" with your app's URL, both of which values are available in your app settings.
You'll see an "Add page tab" page. After selecting your Facebook page from the dropdown menu and clicking "Add Page Tab" your iFrame app should appear on your Fan Page.
For more information, you can check the Facebook documentation.
NOTE: You need to change your Web.config file in Concerto Commerce 4.30 in order to allow showing your store in an iframe from Facebook.
Change this line:
<add name="X-Frame-Options" value="SAMEORIGIN" />
To be like this:
<add name="X-Frame-Options" value="allow-from https://www.facebook.com/" />