HubSpot CMS

Instagram Feed Module

The Instagram Feed module is super simple to set up and allows you to directly access the photos you posted in your Instagram timeline.

Created by: il-hubspot



After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

0 Recommendations

View on:


HubSpot Marketplace

<section class="content-instagram-feed" style="background-color: {{ module.background_color.color }};">
  <div class="container">
    <div class="content">{{ module.content_text }}</div>
    <div class="instafeed-items" data-token="{{ module.access_token }}"></div>

            .content-instagram-feed {
	padding-top: 50px;
  padding-bottom: 50px;

.content-instagram-feed * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

.content-instagram-feed .content {
  margin-bottom: 25px;
	text-align: center;

.content-instagram-feed .instafeed-items {
  font-size: 0;
	text-align: center;

.content-instagram-feed .instafeed-items a {
 	display: inline-block;
  width: 20%;
  position: relative;
  overflow: hidden;

.content-instagram-feed .instafeed-items a span {
  display: block;
  padding-bottom: 100%;

.content-instagram-feed .instafeed-items a:hover img {
	opacity: 0.6;

.content-instagram-feed .instafeed-items img {
	height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
.content-instagram-feed .instafeed-items .orientation-portrait img {
	height: auto;
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

@media (max-width: 767px) {
	.content-instagram-feed .instafeed-items a {
    width: 50%;

function getIntaFeedToken(elem, id, token) {
	var feed = new Instafeed({
		get: 'user',
		target: elem.toString(),
		userId: id.toString(),
		accessToken: token.toString(),
    resolution: 'low_resolution',
    limit: 10,
    template: '<a href="{link}" class="orientation-{orientation}" target="_blank"><span><img src="{image}" /></span></a>'.replace(/[{}]/g, "$&$&")

jQuery(document).ready(function($) {
		var o = $(this);

		if (o.hasClass("init")) {


		var headerId = "id-" + Math.random().toString().slice(2);
		o.find('.instafeed-items').attr("id", headerId);

		var userToken = o.find('.instafeed-items').data("token");
    var userId = userToken.substr(0, userToken.indexOf('.')); 

		getIntaFeedToken(headerId, userId, userToken);

Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here

Instagram Feed Module

The Instagram Feed module is super simple to set up and allows you to directly access the photos you posted in your Instagram timeline.

Benefits of this module:

Increase Social Engagments
Customize the way you display your Instagram photos
Automated way of posting fresh content
Hassle-free set up
Automatic connection to your Instagram account

+++ How to set up the Instagram Feed module? +++

  1. Get your Instagram Access Token here:

  2. Paste the Access Token into HubSpot module field "Access Token"

Note: this feed module uses a third party website to generate an access token for the Instagram API. This 3rd party is not supported by HubSpot, therefore, if there are any questions feel free to reach out to us at InboundLabs.

The Instagram Feed module demo can be visited here:

The Instagram Feed module is part of the Startup Framework template which can be found here:

Have Questions?

If you have questions, please email me at github (at)


Not developing on HubSpot CMS yet?

We'd love to have you a part of our developer community!

0 Recommendations

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Made with  by community members: