# vue-instagram-feed

> A zero-dependency renderless Vue component to fetch the latest posts from a public Instagram account using the official Instagram API

Latest version **2.1.1** (published 2020-11-15) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vue-instagram-feed
pnpm add vue-instagram-feed
yarn add vue-instagram-feed
bun add vue-instagram-feed
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2020-11-15 |
| First published | 2019-06-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | mornir |
| Keywords | vue, instagram, vue-instagram, instagram-feed |

## Links

- npm: https://www.npmjs.com/package/vue-instagram-feed
- Repository: https://github.com/mornir/vue-instagram-feed
- Homepage: https://github.com/mornir/vue-instagram-feed#readme
- Issues: https://github.com/mornir/vue-instagram-feed/issues
- npm.io page: https://npm.io/package/vue-instagram-feed

## Recent versions

- 2.1.1 (latest) — 2020-11-15
- 2.0.0-0 (next) — 2019-06-15
- 2.1.0 — 2019-06-17
- 2.0.0 — 2019-06-16
- 1.0.0 — 2019-06-13

## README

# 👉 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](https://img.shields.io/npm/v/vue-instagram-feed.svg?style=for-the-badge&color=#41b883)](https://www.npmjs.com/package/vue-instagram-feed) [![Cypress Dashboard](https://img.shields.io/badge/cypress-dashboard-brightgreen.svg?style=for-the-badge)](https://dashboard.cypress.io/#/projects/p56aoq/runs)

# 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

```bash
# npm
npm i vue-instagram-feed
```

```bash
# yarn
yarn add vue-instagram-feed
```

#### Without using build tools

```html
<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

```html
<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.

---
_Source: https://npm.io/package/vue-instagram-feed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._