/nanogram.js

An easy-to-use and simple Instagram package that allow you to fetch media content without API and access token.

Primary LanguageTypeScriptOtherNOASSERTION

Nanogram

An easy-to-use and simple Instagram package that allow you to fetch media content without API and access token.

Travis CI codecoverage CodeFactor GitHub issues GitHub last commit npm type definitions npm bundle size

npm downloads jsdeliver contributors

Key Features • Demo • Documentation • Installation • How To Use • Examples • Browsers support • License • Contributing

Key Features ✨

  • Small. ~ 2.31KB (minified and gzipped). Size Limit controls the size.
  • No dependencies.
  • No need for the access token secret.
  • Easy to use.
  • Typescript support
  • Tree shakeable

Demo 👀

DEMO

Documentation 🔨

You can read the full documentation here

Installation 🚀

Using package managers

npm

$ npm install nanogram.js --save

yarn

$ yarn add nanogram.js

via CDN

Add script right before closing </body> tag

<script src="https://unpkg.com/nanogram.js@1.0.1/dist/nanogram.iife.js"></script>
or
<script src="https://cdn.jsdelivr.net/npm/nanogram.js"></script>

Hint: for a better performance add preconnect link in the head of your document.

<head>
  <!-- for unkpg cdn --> 
  <link rel="preconnect" href="https://unpkg.com">

  <!-- for jsdelivr cdn -->
  <link rel="preconnect" href="https://cdn.jsdelivr.net">  


  <!-- dns-prefetch only for IE11 --> 
  <!--	<link rel="dns-prefetch" href="https://unpkg.com"> -->
  <!--	<link rel="dns-prefetch" href="https://cdn.jsdelivr.net"> -->
</head>

How to use 🤔

1. Initialize Nanogram.js

Option A: Using Webpack or Rollup:

import Nanogram from 'nanogram.js';

const instagramParser = new Nanogram();

Option B: Using Node.js:

const Nanogram = require('nanogram.js');

const instagramParser = new Nanogram();

Option C: Using CDN:

/* Nanogram is available from global namespace */
const instagramParser = new Nanogram();

2. Get your data

Get media content by providing instagram username

instagramParser.getMediaByUsername('instagram').then((media) => {
  console.log(media);
});

Note: get content from user page. 12 photos is the maximum for this method.

Get media content by providing instagram tag

instagramParser.getMediaByTag('sunset').then((media) => {
  console.log(media);
});

Note: get content from tag page

Get media content by providing location id and place name

instagramParser.getMediaByLocation(6264386, 'highbridge-park').then((media) => {
  console.log(media);
});

Note: get content from location page

Get all available countries

instagramParser.getCountries().then((countries) => {
  console.log(countries);
});

Note: get countries from location page

Get all cities by providing country id

instagramParser.getCitiesByCountryId('US').then((cities) => {
  console.log(cities);
});

Note: get cities from country page

Get all places by providing city id

instagramParser.getPlacesByCityId('c2728325').then((places) => {
  console.log(places);
});

Note: get places from city page

Get media content by providing place id

instagramParser.getMediaByPlaceId(2999512).then((media) => {
  console.log(media);
});

Note: get content from place page

Get media content by providing search query

instagramParser.getMediaBySearchQuery('sunset').then((media) => {
  console.log(media);
});

Note: get content from searchbar on the top of the page

Examples ☺

Vanilla.js (ES5) See example
Node.js See example

Browsers support 🌎

IE / Edge
IE / Edge		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari		 iOS Safari
iOS Safari		 Opera
Opera		 Yandex
Yandex
IE11*, Edge 12+ 40+ 42+ 10.1+ 10.3+ 29+ 15.6+

* – For IE11 you need to install fetch polyfill. Because of how fetch() works, you’ll also need a Promise polyfill.

If you want maximum browser compatibility, please use polyfills.

See caniuse for fetch and promise.

Browsers polyfills

If you want to send a polyfill only to browsers that need it, there's a handy service called Polyfill.io which does just that, it offers a wide array of polyfills.

Here's an example of using polyfill.io to polyfill only the Fetch and Promise feature, so if we put this right before closing </body> tag of index.html and Nanogram.js script, Polyfill.io will read the user agent and use that information to determine if the browser requires a polyfill for the feature or features listed. Since I'm using Chrome it will send back an empty response since my browser doesn't need it, pretty slick.

<script src="https://polyfill.io/v3/polyfill.min.js?features=fetch%2CPromise"></script>

Alternatively, you can install packages like es6-promise and whatwg-fetch.

Node.js

Node.js doesn't have a built-in implementation of the Fetch API, but you can use any library with a compatible interface, such node-fetch.

License 📄

MIT

Contributing 🎉

Found a bug? Missing a specific feature? Your contributions are always welcome! Please have a look at the contribution guidelines first.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Alexey Istomin
🚇 💻 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!