Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
stevenschobert committed Nov 11, 2020
1 parent 7d19342 commit bc3c109
Show file tree
Hide file tree
Showing 6 changed files with 80 additions and 7 deletions.
3 changes: 0 additions & 3 deletions docs/README.md

This file was deleted.

6 changes: 4 additions & 2 deletions docs/_coverpage.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@
> A simple Instagram JS plugin for your website.
- Powered by the [Instagram Basic Display API](https://developers.facebook.com/docs/instagram-basic-display-api/)
- Lightweight (< 10kB), with 0 dependencies
- Lightweight (12KB minified), with 0 dependencies
- Easily customizable with templating support
- Maintained and supported since 2012

[GitHub](https://github.com/stevenschobert/instafeed.js/)
[Get Started](#docsify)
[Get Started](#installation)

![color](#f0f0f0)
1 change: 1 addition & 0 deletions docs/_sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@
* [Getting Started](getting-started.md)
* [Managing Access Tokens](managing-access-tokens.md)
* [Migrating to v2](v2-migration-guide.md)
* [Changelog](changelog.md)
67 changes: 67 additions & 0 deletions docs/home.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
# Instafeed.js

[![Build Status](https://travis-ci.com/stevenschobert/instafeed.js.svg?branch=master)](https://travis-ci.com/stevenschobert/instafeed.js)

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

We're in the process of launching Instafeed.js v2, powered by the new [Instagram Basic Display API](https://developers.facebook.com/docs/instagram-basic-display-api/). Guides and documentation are being created and will be added to the [project's wiki](https://github.com/stevenschobert/instafeed.js/wiki).

See the [v2 migration guide](v2-migration-guide.md) for help on updating from v1, or a [basic demonstration with code examples](https://codepen.io/companionstudio/pen/rNVPGOz).

For the now-non-functional v1.x library, please [see the Legacy API branch](https://github.com/stevenschobert/instafeed.js/tree/legacy-api).

## 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).
8 changes: 7 additions & 1 deletion docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,17 @@
<div id="app"></div>
<script>
window.$docsify = {
themeColor: '#9370DB',
name: 'Instafeed.js',
repo: 'stevenschobert/instafeed.js',
coverpage: true,
loadSidebar: true,
subMaxLevel: 2
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>
Expand Down
2 changes: 1 addition & 1 deletion docs/v2-migration-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ v2 provides a much simpler service, but should still cater to the most common us

## Additional requirements:

- An access token refresh service is required. See [Managing Access Tokens](Managing-Access-Tokens) for more info.
- An access token refresh service is required. See [Managing Access Tokens](#managing-access-tokens) for more info.

## Migrating, Step by Step

Expand Down

0 comments on commit bc3c109

Please sign in to comment.