Instagram widget

The ProPhoto Instagram widget gives you a flexible tool for displaying your most recent Instagrams in any widget area on your site.

instagram_slider_screenshot

Authorization

In order to use this widget, you must allow ProPhoto access to your Instagram account.  If you have not yet authorized ProPhoto, see these instructions

Usage

To add your Instagrams, go to “Appearance” > “Widgets” and drop a “ProPhoto Instagram Widget” into any of your widget areas.  There are several customization options within the widget for displaying your Instagrams that we’ll go over one at a time.

instagram_widget_admin

1. Preview area

As you make changes to the widget settings you will see a live preview of your widget with your actual Instagram feed.  The preview area will be above or to the left of your settings depending upon your layout.  Note that within the preview, the image sizes and spacing may be downsized or approximated depending upon your image size settings.

2. Title

An optional area for title text that will appear above the widget according to the ProPhoto font settings for the widget area (bio, sidebar, etc…) that you are placing the widget in.

3. Image display

The two display options for your Instagrams are “image grid” and “image slider”.

Image grid lets you choose the number of images to display (up to 10) and then number of columns to display them in, resulting in a grid of images.

Image slider also allows you to choose the number of images to display, but shows them one at a time as a slideshow, sliding from one image to the next after a short pause.  When a visitor mouses over an image slider widget, additional navigation appears, allowing them to pause/play the slideshow, manually navigate between slides, and view the image caption (if there is one).

4. Number of images to show

The number of images that will be shown from your feed, in order from most recent to oldest. For an image grid display, this number (in combination with your columns setting) will effect the number of rows in the grid. In an image slider, when the slideshow reaches the last image, it will return to the first image and start over.

5. Number of columns (image grid display only)

The number of columns to divide your image grid into. Used in combination with your number of images setting to achieve different grid layouts.  Here are some examples:

instagram_grid_layout_examples

6. Image spacing (image grid display only)

Set the number of pixels between each image in the grid, both horizontally and vertically.

7. Image size

The options for image size are “autofit” and “custom”.

When set to autofit, ProPhoto will automatically size your images so the widget fills the entire widget area that it is placed in.

Custom size allows you to enter a specific size to display your images at.  This is useful if you are adding the widget into a widget column (like in your bio area), and only want the widget to be a specific width.  If you set a custom width that results in the widget being wider than the widget area that you have placed it in, then the entire widget (images and spacing) will be downsized proportionately to fit.

8. Custom size (custom image size only)

If you select the custom image size option, enter your custom image size here (in pixels).  Note that whether using autofit or custom sizing, your Instagrams will never be displayed larger than 612px (the largest size that your Instagrams are stored at instagram.com).

To help your site load quickly, ProPhoto must cache the content of Instagram feeds for your widget. This means there may be up to 30 minutes of delay before brand new content on the Instagram feed shows in the widget. 

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us