Description

Flo Instagram plugin can display Instagram images from a single Instagram user’s
photo collection.

The Instagram images are available via Widget & Shortcode options

Installation

Through server:

1. Unzip and Upload all files to a sub directory in “/wp-content/plugins/”.
2. Activate the plugin through the ‘Plugins’ menu in WordPress.

Through admin:

1. Upload the zip and activate plugin.
2. Activate the plugin through the ‘Plugins’ menu in WordPress.

Usage

First of all after activating the plugin, a new option in the WP dashboard will appear – FLO Instagram

By going to ‘FLO Instagram’ menu, you’ll access the plugin settings panel. Here you will need to add the Instagram User ID and Access Token. Click on Get Access Token to get your User ID and Access Token.

Note! you need to be logged into your Instagram account in order to generate the codes.

To generate the access token, the plugin provides a link to our server which will redirect you to http://instagram.com to authenticate and authorize our application. Once you authorize the app, it will generate the access token and will be shown on the screen. We do not store any user data on our end.

After adding the details, FloInstagram plugin will be ready to use.

Every time we want to retrieve images from Instagram we have to submit a request to a remote server, that increases the loading time of the web page. Because of this, we recommend that you use our Cache feature.

To create one or more Instagram photo feeds, you can use the Flo Instagram widget. This will allow you to add instagram feeds to any widget area on your site.

To add an Instagram widget, go to Appearance > Widgets, then from the left hand side, drag and drop the Flo Instagram Widget block into any widget area available on the right.

NOTE! If you are updating from version 1.0, then you may need to review the widget options and save the settings again.

The following settings are available:

Title – Title of Widget Area

Below Title Label – Sub Title for Widget

Number of Images – Number of images to be displayed

Number of Columns – how many columns you’d like to be displayed

Picture Size – The size that is served for the images. If using smaller number of images increase the size for better image quality.

Link to Full Image – When enabled clicking any image directs the user to your Instagram feed.

Username – add your Instagram Username, which is also clickable to go to your feed.

Image Padding Options – Add padding to your images.

Note. instagram API updates

On June 1st 2016 Instagram has changed their API rules, therefore the plugin has received some updates. Now if you want to display several feeds belonging to different users, it is necessary to provide the User ID and the Access Token for each user. For that it is necessary to use at least version 1.2. If you are using an older version, you don’t have these options.

In version 1.2 there are new fields for the widget and shortcode to add the User Id and the  Access Token. This allows each widget or shortcode to show feeds belonging to different users if necessary.

Below you can see the screen shots of the new fields:

You can also use shortcodes to add an Instagram feed to any page or posts. When the plugin is installed, you will have a small instagram icon appear in the visual editor in any page or posts. Click this and use the following shortcodes to generate an Instagram feed in the content area of a Post or Page.

When editing any page or blog post in visual mode, there will be a shortcode builder available that will help you easily to make the shortcode without having to memorise the parameters.

By default the shortcode will display 10 images image.

**Examples:**

[flo_instagram padding=”20″ use_pattern=”” nr_columns=”4″ limit=”10″ user_id=”7020107” hashtag=”” ]

Below I’ll explain each parameter:

* padding – The distance in pixels between images
* use_pattern – If this option is set to ‘on’ then a pattern of images having different size will be created and the next option ‘nr_columns’ will be ignored.
If this option is not activated, then all the images will have the same size and user can select how many columns to have.
* nr_columns – Allows to control how many columns to have if ‘use_pattern’ is not active.
* limit – How many images to show. Maximum 20 images will be displayed if a bigger value is set.

Also there is another Shortcode that will generate a button that will link to the provided Instagram account.

[flo_instagram_follow label=”Follow me” instagram_url=”http://instagram.com/zaetwwesmd” ]

* label – The button’s label
* instagram_url – The URL to the Instagram account where you want the button to link.

Note. instagram API updates

On June 1st 2016 Instagram has changed their API rules, therefore the plugin has received some updates. Now if you want to display several feeds belonging to different users, it is necessary to provide the User ID and the Access Token for each user. For that it is necessary to use at least version 1.2. If you are using an older version, you don’t have these options.

In version 1.2 there are new fields for the widget and shortcode to add the User Id and the  Access Token. This allows each widget or shortcode to show feeds belonging to different users if necessary.

Below you can see the screen shots of the new fields:

New Access Token

There will be occasions when the API has been changed by Instagram, and the Access token that was previously created no longer works.

In this case the feed may disappear. To get your images working again it is necessary to regenerate the access token. Simply go to Flo Instagram > Then click “Get Access Toke” and create a new USER ID and ACCESS TOKEN, then “save changes”. You feed should now be showing.

Broken Image Links

Another issue may be that the images are showing a broken image icon. If thats the case there are 3 things that may resolve this issue.

1. Update your plugin to the most recent version, go to plugins and check if there is an update available.
2. Clear your browser cache, and any caching on your site (via plugins etc).
3. For widgets and feeds, Change the image size for your images, this will regenerate the thumbnails for the images.