Skip to content
This repository has been archived by the owner on Nov 29, 2021. It is now read-only.
/ nanogram.js Public archive

πŸ“· An easy-to-use and simple Instagram package that allows you to fetch media content without API and access token.

License

Notifications You must be signed in to change notification settings

webistomin/nanogram.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation


Nanogram


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

⭐️ Star me on GitHub β€” it helps!

GitGub Actions codecoverage CodeFactor GitHub issues GitHub last commit npm type definitions npm bundle size

npm downloads jsdeliver contributors

Warning β€’ Key Features β€’ Demo β€’ Documentation β€’ Installation β€’ How To Use β€’ Caveats β€’ Browsers support β€’ License β€’ Contributing

Warning ❗

Instagram has introduced a strict-origin-when-cross-origin policy since February 2021. So they don't allow cross-site content access anymore. For now, I am not sure how to solve this issue.

Key Features ✨

  • Small. ~ 2KB (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 πŸ‘€

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/[email protected]/dist/nanogram.iife.js"></script>
or
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/nanogram.iife.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 πŸ€”

Get media content by providing instagram username

ES2015

import { getMediaByUsername } from 'nanogram.js'

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

CommonJS

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

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

IIFE

const getMediaByUsername = window.Nanogram.getMediaByUsername

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 post id

ES2015

import { getMediaByPostId } from 'nanogram.js'

getMediaByPostId('CIrIDMtDwn4').then((media) => {
  console.log(media);
});

CommonJS

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

getMediaByPostId('CIrIDMtDwn4').then((media) => {
  console.log(media);
});

IIFE

const getMediaByPostId = window.Nanogram.getMediaByPostId

getMediaByPostId('CIrIDMtDwn4').then((media) => {
  console.log(media);
});

Note: get content from post page


Get media content by providing instagram reel id

ES2015

import { getMediaByReelId } from 'nanogram.js'

getMediaByReelId('CKONdDkJaPU').then((media) => {
  console.log(media);
});

CommonJS

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

getMediaByReelId('CKONdDkJaPU').then((media) => {
  console.log(media);
});

IIFE

const getMediaByReelId = window.Nanogram.getMediaByReelId

getMediaByReelId('CKONdDkJaPU').then((media) => {
  console.log(media);
});

Note: get content from reel page


Get media content by providing instagram tag

ES2015

import { getMediaByTag } from 'nanogram.js'

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

CommonJS

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

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

IIFE

const getMediaByTag = window.Nanogram.getMediaByTag

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

Note: get content from tag page


Get media content by providing location id and place name

ES2015

import { getMediaByLocation } from 'nanogram.js'

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

CommonJS

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

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

IIFE

const getMediaByLocation = window.Nanogram.getMediaByLocation

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

Note: get content from location page


Get all available countries

ES2015

import { getCountries } from 'nanogram.js'

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

CommonJS

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

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

IIFE

const getCountries = window.Nanogram.getCountries

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

Note: get countries from location page


Get all cities by providing country id

ES2015

import { getCitiesByCountryId } from 'nanogram.js'

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

CommonJS

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

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

IIFE

const getCitiesByCountryId = window.Nanogram.getCitiesByCountryId

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

Note: get cities from country page


Get all places by providing city id

ES2015

import { getPlacesByCityId } from 'nanogram.js'

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

CommonJS

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

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

IIFE

const getPlacesByCityId = window.Nanogram.getPlacesByCityId

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

Note: get places from city page


Get media content by providing place id

ES2015

import { getMediaByPlaceId } from 'nanogram.js'

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

CommonJS

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

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

IIFE

const getMediaByPlaceId = window.Nanogram.getMediaByPlaceId

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

Note: get content from place page


Get media content by providing search query

ES2015

import { getMediaBySearchQuery } from 'nanogram.js'

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

CommonJS

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

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

IIFE

const getMediaBySearchQuery = window.Nanogram.getMediaBySearchQuery

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

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


Caveats πŸ’£

How to get next page? There are only 12 photos
12 photos is the maximum. I think there is no way to load more content. Use instafeed.js with access_token to load more items.
Nanogram stopped working (Cannot read property '0' of undefined)
Perhaps you made a large number of requests in a short period of time. There is a limit. Usually, the duration of a temporary Instagram ban ranges from few hours to 24-48 hours. The duration of ban also depends on your follow up actions. If you would continue doing the wrong actions, the ban may prolong.

Browsers support 🌎

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Opera
Opera
Yandex
Yandex
IE11*, Edge 12+ 27+ 32+ 7.1+ 8+ 19+ 14.2+

* – For IE11 you need to install a Promise polyfill.

If you are using version less than 2.0.0 you will also need polyfill for Fetch API.

If you want maximum browser compatibility, please use polyfills.

See caniuse for 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 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=Promise"></script>

Alternatively, you can install packages like es6-promise.

Node.js

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

If you are using version less than 2.0.0 you need Fetch API instead of XHR API. Such node-fetch.

License πŸ“„

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

πŸš‡ πŸ’» πŸ€”

Yousuf Khan

πŸ’» ⚠️ πŸ›

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