1. Drag Instagram Connect onto your stacks page.
2. Get an Access Token.
In order to display your Instagram photos on your own website, you are required to provide an Instagram Access Token. You can generate one for free at: http://instagram.pixelunion.net/
3. Copy/Paste your Access Token.
Under ‘Instagram Connect – Setup’, paste your token number into the ‘Access Token’ field.
4. That’s it!
That’s the basic set up for Instagram Connect, now when you preview it (if you haven’t changed any other options) – you should see up to 12 of your most recent photos, when you hover over these photos, you should see their Instagram caption. And when you click one, it should open in a lightbox where if the image is clicked again, it takes you to the photo on Instagram.
Note: Your Instagram account cannot be set to private if you want to display your feed.
# of Images:
This sets how many images will show from your Instagram feed on page load. In the section titled “Place optional load more target stack below”, you can add any targeted stack (like the button stack for example) to allow users to load additional images by clicking on it. This button will load additional images equal to the number set in this field. For example, if # of Images is set to 4, clicking the “load more” link will load in an additional 4 images. Clicking the “load more” link will continue to load 4 images until there are no more images to display and the “load more” link will then be removed.
Filter Images by Hashtag:
Enabling this option will filter your Instagram images and only display ones with a certain defined hashtag value. This field only supports a single hashtag.
Note: This field ignores spaces and capital letters. You do not need to add the hash symbol (#).
Each option is self explanatory – Most Recent, Least Recent, Most Liked, Least Like, Most Commented, Least Commented, Random. So Most Recent sorts them chronologically, from most recent to least recent. Least Recent would be the opposite; reverse chronologically.
Note: No matter which Sorting method you choose, the images this stack gets are the most recently posted images. The sorting method sorts the images after they’ve been loaded. So if you have 100 photos on your account, and you set the # of Images value to to 10 – you’ll have the 10 most recently posted images on your site and this option will then sort those 10.
Sort Again After Loading More:
This will re-sort all of the images once the “load more” link has been clicked and more images are loaded in.
Note: This option is only visible if you are not using the “Filter by Hashtag” option. When using “Filter by Hashtag” the “load more” link will automatically re-sort the images as they are loaded in.
This controls the spacing between the images in pixels. By default gutters are turned off, and the images edges touch their neighboring images.
Low Quality loads all the images as 150X150px, Medium Quality loads them in as 306X306px, and Full Resolution loads them up at 640X640px. By default it’s set to medium resolution, which gives you a decent quality of images with a faster loading time. Obviously, smaller images will load faster, and larger ones will be higher quality. Chose the option that fits your needs. For instance, if you’re going to turn off the lightbox and keep all the images small, the Low Quality images should suit your purpose.
Link to Instagram:
This wraps all images in a link, so when the image is clicked, you are redirected to that photo on Instagram. If the lightbox option is turned on, clicking the thumbnail image opens the lightbox and then clicking the image in full screen mode takes you to Instagram. Otherwise, if the lightbox is off, clicking the thumbnail will take you to the image on Instagram.
Open in New Tab:
This is equivalent to ‘Redirecting’. Essentially if this option is turned on, when someone clicks a link – it will open a new tab or window for them to view the image on Instagram while keeping your site open in the first tab or window. When this option is turned off, clicking an image will close your site and take them to Instagram instead.
This option turns on/off the built-in lightbox effect for this stack. The lightbox opens up the images in an Instagram-style full screen viewer. It has left and right navigation arrows (or use the arrow keys on your keyboard), and a close button. If Links are turned on, click the thumbnail opens the lightbox and clicking the fullscreen image from within the lightbox takes you to instagram.
This option controls the transparency of the overlay in fullscreen mode for the lightbox. The overlay is what separates the image from the rest of the site in fullscreen mode. Setting this option to 0 gets rid of the overlay, and setting it to 1 makes it completely solid black.
This turns captions on/off. The captions are the text posted with the image on Instagram. If there was no caption posted with the image originally, then there will be no caption here.
This color will be laid over the image and the text will be laid over this color so that the text is actually legible.
This opacity will be applied to the Background Color to make it more/less transparent. Setting this option to 0 makes the background color invisible, setting it to 1 makes it completely solid.
Choose the color to be applied to the caption’s text. Ideally you want to pick something that contrasts with the background color so that the text is readable.
Controls the size of the caption text in pixels. Somewhere around 12px-16px should be good for most cases, but it depends on the font used by the theme.
Here is where we can control the layout of the thumbnails. Each option refers to the width of the stack so assuming you haven’t changed anything from the default values, it would be like saying:
When the stack is 350px Wide (or smaller), use One Column.
When the stack is between 450px and 649px Wide, use Two Columns.
When the stack is between 650px and 849px Wide, use Three Columns.
When the stack is between 850px and 999px Wide, use Four Columns.
When the stack is 1000px Wide (or bigger), use Five Columns.
So for each size range, you can choose to have between 1 and 10 columns. 350px wide would be what things look like on an iphone, while 1000px (or larger) would be a desktop or laptop with a typically-sized monitor and the browser at full width.
Resize the window in preview mode to see the changes take place.