Instagram Feed 2 Documentation

Installationtop

Uploading

  1. Download the add-on
  2. Go to Admin panel > Add-ons > Manage Add-ons
  3. Click on [+] to open upload modal window
  4. Please choose whatever is comfortable to you:
    Local: zip archive is saved on your computer
    Server: zip archive is uploaded on your server
    URL: you have a direct link to the zip archive
  5. After you selected the zip archive corresponding to your current version of CS-Cart please click Upload & install

Activation

  1. Open add-on settings page Admin panel > Add-ons > Manage Add-ons >
    [TH] Instagram Feed 2
  2. In Activation tab insert License key
  3. Save the settings and go back to Manage Add-ons page
  4. In same line with the name of the add-on, click Active
  5. Clear cache, choose Administration > Storage > Clear cache

Make sure that the add-on status is Active

That’s all, the add-on is installed


Configuring the add-ontop

After installing the add-on, you will need access to the following:

Step 1: Change your account to Instagram Business Account

Step 2: Connect Instagram account to Facebook

Step 3: Create a Facebook application

Go to https://developers.facebook.com and create a new application
Enter the name of your application and your email address.
Go to the app settings and select “Basic” in the left section. Fill in the “App Domains” and “Privacy Policy IRL” fields, check “Support my own business” under the “Business Use”.
In the app settings, add a WWW platform and enter your store web address.

In products add Instagram

Next, you need to get access to the store. In order to do that you first need to go to https://developers.facebook.com/tools/explorer.

Open the User or Page list and select Get User Access Token.

In “Permissions” select:

  • pages_manage_metadata
  • pages_read_user_content
  • pages_read_engagement
  • pages_show_list
  • business_management
  • instagram_basic
  • instagram_manage_insights

For your own Instagram feed

  • pages_manage_metadata
  • pages_read_user_content
  • pages_read_engagement
  • instagram_basic
  • pages_show_list

To display posts by hashtag

  • pages_manage_metadata
  • pages_read_user_content
  • pages_read_engagement
  • Instagram Public Content Access
  • instagram_basic

To display feeds of other users (required for Multivendor)

  • pages_manage_metadata
  • pages_read_user_content
  • pages_read_engagement
  • business_management
  • instagram_basic
  • pages_show_list
  • instagram_manage_insights

Add the “Facebook Login” app and go to its settings. Enter the following link https://example.com/admin.php?dispatch=addons.update&addon=ath_instagram_2 to “Valid OAuth Redirect URIs”.

Make sure you enter the link with HTTPS. Then, you need to replace the “example.com/admin.php” with your admin panel link.

After you need to go review your app on Facebook (not mandatory)

Step 4: Setting up the add-on settings

Important! Use the Google Chrome browser for this setting

To change add-on settings: Go to Admin panel > Add-ons > Manage Add-ons > [TH] Instagram Feed 2

App ID and  – get from Facebook application

Save the page and get Facebook App Access Token

Facebook Page ID

  1. From News Feed, click Pages in the left side menu.
  2. Click your Page name to go to your Page.
  3. Click About in the left column. If you don’t see About in the left column, click See More.
  4. Scroll down to find your Page ID below More Info.

The update frequency – specifies how long to store data received from Instagram

To create a new block:

  1. Make sure that you have the access key, how to get it described below in add-on settings setion
  2. Go to Admin panel > Design > Layouts
  3. Choose location
  4. Press [plus] and select Add block
  5. In the opened window select the tab Create New Block and then block Instagram Feed
  6. Set the block name and select settings
  7. Press Create button

It is important to understand that the add-on is designed to work with standard Responsive theme and theme based on it. For all others custom themes contact us


Block settingstop

Press [gear] under the block name to open the settings window

  1. Tab General contains field Template – specifies the template to display
    • Grid – grid of photos
      • Number of columns in the objects list – number of columns
      • Indents (px) – space between the elements
      • Hovering – sets the style for the hover effect
        • – disable hover
        • Icons – show information about comments and likes
        • Icons & Description – show information about comments and likes & description text for material
        • Description – show description text for material
        • Dim – show darken cover
        • Lighten – show light cover
    • Scroller – scroller with photos
      • Setting as products scroller
      • Hovering – sets the style for the hover effect
        • – disable hover
        • Icons – show information about comments and likes
        • Description – show description text for material
        • Icons & Description – show information about comments and likes & description text for material
        • Dim – show darken cover
        • Lighten – show light cover
  2. Content tab
    • User gallery – show feed the user logged in the add-on settings
    • Tag gallery (Recent) – show feed by the selected #hashtag, the most recently published photos and videos
    • Tag gallery (Top) – show feed by the selected #hashtag, the most popular photos and videos
    • Business user gallery – show feed by username (Instagram Business and Creator Accounts)
    • Company @username – show feed on vendor page by username (for Multi-Vendor)
  3. Block settings tab
    • Limit – number of uploaded photos, maximum 30

 

Username for vendortop

This function works for CS-Cart Multi-Vendor

  1. Go to vendor page Admin panel > All vendors > Vendor name
  2. Select the tab Add-ons
  3. In Contact information section set the Instagram username
  4. Save vendor settings


Vendor planstop

This function works for CS-Cart Multi-Vendor


Change stylestop

Style files add-on should not be changed, this can lead to incorrect work of the add-on. If there was a need to redefine or add styles, please use Theme editor for this

  1. Go to Design > Themes
  2. Press Visual Editor in front of the currently active layout
  3. In the new tab, you will see your shop with Theme editor panel
  4. In CUSTOMIZE selector choose Custom CSS
  5. In textarea you can add your styles
  6. After editing save your changes by pressing Save and press [X] to close editor

Limitations stylestop

You can query a maximum of 30 unique hashtags within a 7 day period.

The add-on works on the basis of Instagram Graph API and has all the limitations of this API

 


Add-on Updatetop

To update the add-on, follow these steps
  • make a full backup of the store
  • close the store
  • install the add-on over the old version without removing the previous one
  • clear the cache
  • if necessary, make changes that can be erased during the upgrade if you changed the add-on files directly
  • check that everything is successfully updated
  • open the store

To update language variables and add-on settings:

  • Go to developer mode
  • For this file local_conf.php add define(‘DEVELOPMENT’, true);
    If you do not have a file, create one.
  • Clear the cache
  • On the add-ons page in the drop-down list next to the add-on select “Update”
  • Return to normal store mode

Changelog

1.07 (21 Jul 2020)
Fixes in internal algorithms for better compatibility with the latest version of Graph API

1.06 (01 Apr 2020)
--!Before updating, let us know if you have Multi-Vendor Ultimate!--
Add new style for the hover effect "Icons & Description"
Graph API updated to the latest version v6.0
Updated language variables
Changed styles

1.05 (04 Dec 2019)
CSS fixes 
The link is available to view when you hover "Description"
If the video has a preview, it is loaded, not the video file

1.04 (26 Nov 2019)
Graph API updated to the latest version v5.0
Fix for carousel

1.03 (19 Nov 2019)
Added lazyload for images and videos
RTL fix						
5% Discount
No prize
Next time
Almost!
10% Discount
15% Discount
No Prize
No luck today
Almost!
50% Discount
No prize
Unlucky
Get your chance to win a price!
Enter your email address and spin the wheel. This is your chance to win amazing discounts!
Our in-house rules:
  • One game per user
  • Cheaters will be disqualified.