We have implemented the posibility to integrate your Instragram feed directly on your web page. Boomerang is
using the Instafeed plugin in order to do that and we have optimized it so you can configure it only by
replacing some HTML data attributes.
Get your client ID and access token from the Instagram Developer website. After this,
your are all set up and ready to go.
Replace the current data-user-id if your own. If you don't know it, try to Google it.
Stacked
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
Also, you can trigger dropdown menus above elements by adding .dropup to the parent element.
Example
<div id="instafeedExample-1" data-user-id="YOUR_USER_ID" data-limit="4" data-col="3" class="instafeed row row-no-padding"></div>
Spaced
You can define how many images you want to retrieve with the data-limit attribute and the number of columns you want to display on a row
with the data-col attribute.
The Instafeed grid uses the same classes as the default Bootstrap grid system, so you can use it the same way - e.g: data-col="4" for displaying 3 images, data-col="6" for displaying 2 images and so on.
Example
<div id="instafeedExample-2" data-user-id="4168279954" data-limit="8" data-col="3" class="instafeed row"></div>
Additional classes
To apply custom styles on the image items retrivied from your Instagram feed use data-classes to add
additional modifier classes such as shadows, borders and so on.
Example
<div id="instafeedExample-3" data-user-id="4168279954" data-limit="8" data-col="3" data-classes="z-depth-1 z-depth-2--hover" class="instafeed row"></div>
Lightbox
You can present your Instagram posts in an elegant lightbox. It is done with the help of Fancybox plugin. Simply add data-lightbox attribute on the
instafeed container and you're done.
Example
<div id="instafeedExample-4" data-user-id="4168279954" data-limit="8" data-col="3" data-classes="z-depth-1 z-depth-2--hover" data-lightbox="true" class="instafeed row"></div>