Skip to content

Commit

Permalink
update documentation and readme
Browse files Browse the repository at this point in the history
  • Loading branch information
jasper-clarke committed Dec 14, 2024
1 parent 24273e9 commit 83e8d03
Show file tree
Hide file tree
Showing 14 changed files with 292 additions and 334 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
# Changelog

__2.1.0__

- Move documentation to [instafeedjs.com](https://instafeedjs.com)
- Add instatokend.go daemon for managing access tokens with CI/CD

__2.0.0__

Official v2 release 🎉
Expand Down
60 changes: 1 addition & 59 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@

Instafeed.js is a simple way to display your Instagram photos on your website.

Version 2 of Instafeed.js is now available, powered by the new [Instagram Basic Display API](https://developers.facebook.com/docs/instagram-basic-display-api/).

For help upgrading from v1, see the [v2 migration guide](https://github.com/stevenschobert/instafeed.js/wiki/Version-2-migration-guide).
See our documentation at [instafeedjs.com](https://instafeedjs.com) or the [docs folder](./docs) for more information.

## Hosted Alternative

Expand All @@ -18,62 +16,6 @@ If you're looking for a turnkey solution that manages tokens for you, or you nee

#### → [Check out Behold](https://behold.so)

## Installation

Setting up Instafeed is pretty straight-forward - there are 3 main steps.

1. Create a Facebook app linked to Instagram, and add yourself as a test user. See [Managing User Tokens](https://github.com/stevenschobert/instafeed.js/wiki/Managing-Access-Tokens).
2. Create an access token and provide it to an [Instagram Token service](https://github.com/companionstudio/instagram-token-agent)
3. Add the instafeed.js script to your web page and provide some simple options. See [Basic Usage](https://github.com/stevenschobert/instafeed.js/wiki/Basic-Usage)

```html
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
```

> Note: Instafeed.js is also compatible with require.js and commonJS exports
## Basic Usage

```html
<div id="instafeed"></div>

<script type="text/javascript">
var feed = new Instafeed({
accessToken: 'your-token'
});
feed.run();
</script>
```

Instafeed will automatically look for a `<div id="instafeed"></div>` and fill it with linked thumbnails. Of course, you can easily change this behavior using [standard options](#standard-options). Also check out the [advanced options](#advanced-options) for some advanced ways of customizing __Instafeed.js__.

## Requirements

* A Facebook developer account, and an Instagram account with some media posted to it.
* A Facebook app linked to your Instagram account, and a token generated through that app.
* A service to keep your access token fresh

## Options

Here are some of the most commonly used options:

| Key | Default Value | Valid types | Description |
|---|---|---|---|
| `accessToken` | `null` | String, Function | **Required.** The Instagram access token, either as a string, or a function which returns a string |
| `debug` | `false` | Boolean | Set to `true` to display debugging information |
| `filter` | `null` | Function | A function used to exclude images from your results. The function will be given the image data as an argument, and expects the function to return a boolean. |
| `limit` | `null` | Number | Display a maximum of this many posts |
| `sort` | `null` | Function | A custom function to sort the media, rather than the default 'most recent' sorting|
| `target` | `'instafeed'` | String, DOM Element | Either the ID or the DOM element itself where you want to add the images. |
| `template` | `'<a href="{{link}}"><img title="{{caption}}" src="{{image}}" /></a>'` | String | A mustache template used to produce HTML for the document. |
| `transform` | `null` | Function | A function used to transform the image data before it is rendered. |

See [Options](https://github.com/stevenschobert/instafeed.js/wiki/Options-Reference) in the wiki for the complete reference.

## Templating

The easiest way to control the way Instafeed.js looks on your website is to use the __template__ option. You can write your own HTML markup and it will be used for every image that Instafeed.js fetches. See [Templating](https://github.com/stevenschobert/instafeed.js/wiki/Templating).

## Changelog

See [CHANGELOG.md](./CHANGELOG.md).
Empty file added docs/.nojekyll
Empty file.
2 changes: 1 addition & 1 deletion docs/_coverpage.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

> A simple Instagram JS plugin for your website.
- Powered by the [Instagram Basic Display API](https://developers.facebook.com/docs/instagram-basic-display-api/)
- Powered by the [Instagram API](https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login)
- Lightweight (12KB minified), with 0 dependencies
- Easily customizable with templating support
- Maintained and supported since 2012
Expand Down
9 changes: 4 additions & 5 deletions docs/_sidebar.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
* [Home](/)
* [Getting Started](getting-started.md)
* [Managing Access Tokens](managing-access-tokens.md)
* [Migrating to v2](v2-migration-guide.md)
* [Changelog](changelog.md)
- [Installation](installation.md)
- [Usage](usage.md)
- [Managing Access Tokens](tokens.md)
- [Changelog](changelog.md)
57 changes: 0 additions & 57 deletions docs/getting-started.md

This file was deleted.

65 changes: 0 additions & 65 deletions docs/home.md

This file was deleted.

66 changes: 38 additions & 28 deletions docs/index.html
Original file line number Diff line number Diff line change
@@ -1,30 +1,40 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Instafeed.js - a simple Instagram javascript plugin</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Instafeed.js is a simple way to display your Instagram photos on your website.">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
themeColor: '#9370DB',
name: 'Instafeed.js',
repo: 'stevenschobert/instafeed.js',
coverpage: true,
loadSidebar: true,
subMaxLevel: 2,
homepage: 'home.md',
auto2top: true,
alias: {
'/changelog': 'https://raw.githubusercontent.com/stevenschobert/instafeed.js/develop/CHANGELOG.md',
}
};
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
</body>
<head>
<meta charset="UTF-8" />
<title>Instafeed.js - a simple Instagram javascript plugin</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
name="description"
content="Instafeed.js is a simple way to display your Instagram photos on your website."
/>
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/docsify@4/themes/vue.css"
/>
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
themeColor: "#9370DB",
name: "Instafeed.js",
repo: "stevenschobert/instafeed.js",
coverpage: true,
loadSidebar: true,
subMaxLevel: 2,
homepage: "installation.md",
auto2top: true,
alias: {
"/changelog":
"https://raw.githubusercontent.com/stevenschobert/instafeed.js/refs/heads/master/CHANGELOG.md",
},
};
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>
57 changes: 57 additions & 0 deletions docs/installation.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
## Installation

Setting up Instafeed is pretty straight-forward - there are 3 main steps.

1. Create a Facebook app linked to a Professional Instagram Account, and add yourself as a test user. See [steps 1-6 of the official documentation](https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/create-a-meta-app-with-instagram)
2. Create an access token and provide it to an Instagram Token service. See [Managing User Tokens](tokens).
3. Add the instafeed.js script to your web page and provide some simple options. See [Usage](usage)

Instafeed.js is compatible with all of the following loading mechanisms:

- [Browser globals](#browser-globals)
- [RequireJS](#requirejs)
- [CommonJS (`require`)](#commonjs)
- [ECMAScript Modules (`import`)](#ecmascript-modules)

#### Browser Globals

If you are loading Instafeed.js via the standard `<script>` tag, Instafeed.js will be available under the global variable `Instafeed`:

```html
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
//...
});
</script>
```

#### RequireJS

```js
requirejs(["path/to/instafeed.min.js"], function (Instafeed) {
var feed = new Instafeed({
//...
});
});
```

#### CommonJS (`require`)

```js
const Instafeed = require("instafeed.js");

var feed = new Instafeed({
//...
});
```

#### ECMAScript Modules (`import`)

```js
import Instafeed from "instafeed.js";

var feed = new Instafeed({
//...
});
```
44 changes: 0 additions & 44 deletions docs/managing-access-tokens.md

This file was deleted.

Loading

0 comments on commit 83e8d03

Please sign in to comment.