Gatsby Theme Instagram Demo

Theme that gives you a set of components to render yout instagram posts

What you get from this theme

  • Add Instagram posts to your Gatsby site
  • A set of UI Components to layout posts on every section.
  • A set of custom hooks to customize the data you render on your components

Source code & Youtube playlist

Examples

Grid with <SimpleCard />

Grid with <ComplexCard />

doraforscale

42

2

doraforscale

44

2

doraforscale

58

3

doraforscale

56

2

doraforscale

63

2

doraforscale

42

4

doraforscale

52

5

doraforscale

43

1

Installation

To use this theme in your Gatsby sites, follow these instructions:

  1. Install the theme
npm install --save @horacioh/gatsby-theme-instagram

or

yarn add @horacioh/gatsby-theme-instagram
  1. Add the theme to your gatsby-config.js:
module.exports = {
  plugins: ["@horacioh/gatsby-theme-instagram"],
}
  1. Start your site
gatsby develop

Usage

All the options are pretty much similar to how you setup gatsby-source-instagram. This theme uses gatsby-source-instagram at its core to pull data from Instagram.

Public Scrapping for posts

If you intend to use the public scraping method then you need to pass the concerning username

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "@horacioh/gatsby-theme-instagram",
      options: {
        type: `account` // optional. `account` is the default `type` value
        username: "doraforscale",
      },
    },
  ],
}

Hashtag scraping

If you want to source nodes from hashtags then you need the following:

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-instagram`,
    options: {
      type: `hashtag`,
      hashtag: `snowing`,
    },
  },
]