sgoodz/vue3-instagram-feed

Vue 3 Instagram feed component using a personal access token - 2022 Meta API

Vue 3 Instagram Feed/Gallery

A Vue 3 component that displays a basic Instagram feed using Instagram Basic Graph API and your Facebook access token.

Important: This only works with Vue 3 as I am using the composition API. You also need to generate an Instagram Access Token from the Meta Developer Portal.

Installation

yarn add vue3-instagram-feed

OR

npm install vue3-instagram-feed

Usage

To display a simple gallery with a set number of images.

Props:

• accessToken: Required.
• count: Required. Defines the number of images.
• pagination: Optional. Takes a boolean.
• caption: Optional. Takes a boolean.

<template>
  <InstagramFeed
    :count="12"
    accessToken="<your token here>"
    :pagination="true"
    :caption="true"
  />
</template>

Main.js

import { createApp } from "vue";
import App from "./App.vue";

import InstagramFeed from "vue3-instagram-feed";
import "vue3-instagram-feed/dist/style.css";

createApp(App).use(InstagramFeed).mount("#app");

Styling

vue3-instagram-feed includes default styling (dist/styles.css) with that you can use as a base to create your own CSS. All the component's elements are inside a div which acts a wrapper for the icons and the input.

The styles are as shown below, you can ovveride them as you wish.

.instagram-wrapper {
  max-width: 93.5rem;
  margin: 0 auto;
  padding: 0 2rem;
}
.instagram-gallery {
  display: flex;
  flex-wrap: wrap;
  margin: -1rem, -1rem;
  padding-bottom: 3rem;
}
.instagram-gallery-item {
  position: relative;
  flex: 1 0 22rem;
  margin: 1rem;
  color: #fff;
  cursor: pointer;
}
.instagram-gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

vue3-instagram-feed's Issues

Video autoplay

Is it possible (or is it possible to get a feature for) making the posts that are videos on instagram autoplay in the feed? I'm aware any potential sound would have to be muted. They're already properly imported as video elements, so it would be as simple as having a feature toggle for whether to autoplay videos or not.

If there's any interest I can try to submit a pull request in the future.