vue-instagram-feed v2.1.1

👉 DEPRECATED! THIS COMPONENT NO LONGER WORKS 👈

After its acquisition of Instagram, Facebook made changes to how the Instagram API is accessed.

Vue Instagram Feed

Getting Started

Prerequisites

• A polyfill for the Fetch API if you have to support old browsers: https://caniuse.com/#search=fetch
• Vue 2.6 or greater

Install

In a project created with vue-cli

# npm
npm i vue-instagram-feed

# yarn
yarn add vue-instagram-feed

Without using build tools

<script>
  import Vue from "https://unpkg.com/vue/dist/vue.esm.browser.min.js"
  import VueInstagram from "https://unpkg.com/vue-instagram-feed/dist-src/index.min.js"
</script>

Example

See it on codepen: https://codepen.io/mornir0/pen/MMabbw

<vue-instagram :token="token" :count="9">
  <template v-slot="{ posts, errorMsg, fetchMorePosts }">
    <section>
      <div>
        <article v-for="post in posts" :key="post.id">
          <a :href="post.link" target="_blank" rel="noopener">
            <img :src="post.images.low_resolution.url" alt="instagram" />
          </a>
          <h2 v-if="post.caption">{{ post.caption.text }}</h2>
          <ul class="tags-list">
            <li v-for="tag in post.tags">#{{ tag }}</li>
          </ul>
        </article>
        <pre v-if="errorMsg">{{ errorMsg }}</pre>
      </div>
      <div class="text-center">
        <button
          class="text-xl border-b-4 border-primary leading-none"
          @click="fetchMorePosts"
        >
          More
        </button>
      </div>
    </section>
  </template>
</vue-instagram>

API

Props

Slot Props

Access Token

How to get the token

1. Open this URL in an incognito tab: https://instagram.pixelunion.net/
2. Click Generate Access Token to get the token

Note: The targeted Instagram account must be public and personal. (Business acounts use the Instagram Graph API)

Security Notice

The generated access token only provides read access to the Instagram account. Therefore, there is no need to keep it private. By the way, public Instragram feeds can also be easily scrapped. Token can be revoked at any times in the Instagram account settings page.