Download a demo file by clicking here

Overview:

Instagram Connect gets images from Instagram either via your User ID, or via a hashtag (#rapidweaver). You can use the built-in lightbox and turn on/off captions and linking to instagram – as well as controlling the resolution, sorting, # of images, gutters, and the overall layout of the images.


Basic Set Up:

1. Drag Instagram Connect onto your stacks page.

2. Get your User ID.

(if you want to use a #hashtag instead, skip to step 4)
Go here (http://jelled.com/instagram/lookup-user-id), and enter your instagram username into the box. Click the ‘Go’ button, and it will show you your User ID.

3. Copy/Paste your User ID.

Under ‘Instagram Connect – General Options’, paste your Instagram User ID into the ‘User ID’ field.
It should just be a string of numbers, example: 1298991012

4. Choose a HashTag.

(if using your User ID, skip this step)
Under ‘Instagram Connect – General Options’, set ‘Get Photos By’ to ‘#Hashtag’. Enter any word into the ‘HashTag’ field. This field will ignore spaces, cases, and punctuations. So if you type ‘Throw Back Thursday!!!’, it will turn into ‘#throwbackthursday’. It’s recommended to not use spaces or punctuation, but it should handle any case where you use those.

5. 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 10 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.


Advanced Set Up:

General Options:

Resolution:

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.

Sort By:

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 Limit (we’ll get into that later) to 10 – you’ll have the 10 most recently posted images on your site and this option will then sort those 10.

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.

Limit:

The limit doesn’t specify the exact number of images you will get from Instagram, instead it control the maximum possible number. So if you set the limit to 60, but you only have 10 images on your account, it will load those 10. However if you had 100 images, it would show you 60. The maximum for this option is 60. Instagram’s API only allows you to grab 60 images at a time.

Gutters:

This controls the spacing between the images in pixels. By default gutters are turned off, and the images edges touch their neighboring images.

LightBox:

Use Lightbox:

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.

Overlay Opacity:

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.

Links:

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. I’d recommend most people leave this option turned on.

Captions:

Captions:

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.

Background Color:

This color will be laid over the image and the text will be laid over this color so that the text is actually legible.

Opacity:

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.

Font Color:

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.

Font Size:

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.

Advanced Options:

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.

Edit Mode:

Like it says, “This option is for Edit mode only. It will not be applied in Preview.”. This is just to test and see what each column setting looks like from edit mode. It has the same 1 – 10 column layout option as the ‘Advanced Options’ settings.


Conclusion:

Now we should have a fully customized Instagram feed right on your Rapidweaver Stacks page, complete with captions, linking, and a very Instagram-like built in lightbox!