Need Paper Mache

    This package has been deprecated

    Author message:

    Instagram API changed

    vue-instagram-feed

    2.1.1 • Public • Published

    👉 DEPRECATED! THIS COMPONENT NO LONGER WORKS 👈

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

    Vue Instagram Feed Version Badge Cypress Dashboard

    Vue Instagram Feed

    Getting Started

    Prerequisites

    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

    Prop Description Default Value
    token A string code (see below) none
    count Number of posts to load per request 2

    Slot Props

    Prop Description
    posts The object response from the Instagram API
    fetchMorePosts A method to fetch more posts
    errorMsg An error message
    areMorePages A boolean indicating if there are more posts to be fetched

    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.

    Install

    npm i vue-instagram-feed

    DownloadsWeekly Downloads

    34

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    14.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • mornir