![\"Nanogram\"](\"https://github.com/webistomin/nanogram.js/blob/master/assets/logo.svg\"){kind=logo}
\r \r \r
\n ![\"Nanogram\"](\"https://raw.githubusercontent.com/webistomin/nanogram.js/260d58af351d84606a75b32160f349c9a444691d/assets/logo.svg\"){kind=logo}
\n
\n \n ![\"Travis](\"https://travis-ci.org/webistomin/nanogram.js.svg?branch=master\"\n)
\n \n \n ![\"codecoverage\"](\"https://codecov.io/gh/webistomin/nanogram.js/branch/master/graph/badge.svg\"){kind=icon}
\n \n \n
![\"GitHub](\"https://img.shields.io/github/issues/webistomin/nanogram.js\")
![\"GitHub](\"https://img.shields.io/github/last-commit/webistomin/nanogram.js\")
![\"npm](\"https://img.shields.io/npm/types/nanogram.js\")
![\"npm](\"https://img.shields.io/bundlephobia/minzip/nanogram.js/1.0.1\")
\n![\"npm\"](\"https://img.shields.io/npm/v/nanogram.js\")
![\"downloads\"](\"https://img.shields.io/npm/dm/nanogram.js\")
\n\n
![\"contributors\"](\"https://img.shields.io/badge/all_contributors-1-orange.svg\"){kind=icon}
\n\n
\n Key Features •\n Demo •\n Documentation •\n Installation •\n How To Use •\n Examples •\n Browsers support •\n License •\n Contributing\n
\n\n## Key Features ✨\n\n* **Small.** ~ 2.31KB (minified and gzipped). Size Limit controls the size.\n* **No dependencies.**\n* No need for the **access token** secret.\n* **Easy to use.**\n* **Typescript** support\n* **Tree shakeable**\n\n## Demo 👀\n\n### [DEMO](https://nanogram-js.now.sh/)\n\n## Documentation 🔨\n\nYou can read the full documentation [here](https://webistomin.github.io/nanogram.js/)\n\n## Installation 🚀\n\n### Using package managers\n\n#### npm\n```shell script\n$ npm install nanogram.js --save\n```\n\n#### yarn\n```shell script\n$ yarn add nanogram.js\n```\n\n#### via CDN\n\nAdd script right before closing `![\"IE](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\")
](http://godban.github.io/browsers-support-badges/)![\"Firefox\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\")
](http://godban.github.io/browsers-support-badges/)![\"Chrome\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\")
](http://godban.github.io/browsers-support-badges/)![\"Safari\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\")
](http://godban.github.io/browsers-support-badges/)![\"iOS](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png\")
](http://godban.github.io/browsers-support-badges/)![\"Opera\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\")
](http://godban.github.io/browsers-support-badges/)![\"Yandex\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/yandex/yandex_48x48.png\")
](http://godban.github.io/browsers-support-badges/)![\"\"/](\"https://avatars0.githubusercontent.com/u/30475699?v=4\") Alexey Istomin 🚇 💻 🤔 | \n
\n \n
\n \n \n \n \n \n \n \n
\n\n\n
\n\n
\n Key Features •\n Demo •\n Documentation •\n Installation •\n How To Use •\n Examples •\n Browsers support •\n License •\n Contributing\n
\n\n## Key Features ✨\n\n* **Small.** ~ 2.31KB (minified and gzipped). Size Limit controls the size.\n* **No dependencies.**\n* No need for the **access token** secret.\n* **Easy to use.**\n* **Typescript** support\n* **Tree shakeable**\n\n## Demo 👀\n\n### [DEMO](https://nanogram-js.now.sh/)\n\n## Documentation 🔨\n\nYou can read the full documentation [here](https://webistomin.github.io/nanogram.js/)\n\n## Installation 🚀\n\n### Using package managers\n\n#### npm\n```shell script\n$ npm install nanogram.js --save\n```\n\n#### yarn\n```shell script\n$ yarn add nanogram.js\n```\n\n#### via CDN\n\nAdd script right before closing `` tag\n\n```html\n\nor\n\n```\n\n_Hint:_ for a better performance add [preconnect](https://css-tricks.com/using-relpreconnect-to-establish-network-connections-early-and-increase-performance/) link in the head of your document. \n\n```html \n\n \n \n\n \n \n\n\n \n \n \n\n```\n\n## How to use 🤔\n\n### 1. Initialize Nanogram.js\n\n**Option A: Using Webpack or Rollup:**\n```js\nimport Nanogram from 'nanogram.js';\n\nconst instagramParser = new Nanogram();\n```\n\n**Option B: Using Node.js:**\n```js\nconst Nanogram = require('nanogram.js');\n\nconst instagramParser = new Nanogram();\n```\n\n**Option C: Using CDN:**\n```js\n/* Nanogram is available from global namespace */\nconst instagramParser = new Nanogram();\n```\n\n### 2. Get your data\n\n**Get media content by providing instagram username**\n\n```js\ninstagramParser.getMediaByUsername('instagram').then((media) => {\n console.log(media);\n});\n```\n\n_Note:_ get content from [user page](https://www.instagram.com/instagram/). 12 photos is the maximum for this method.\n\n---\n\n**Get media content by providing instagram tag**\n\n```js\ninstagramParser.getMediaByTag('sunset').then((media) => {\n console.log(media);\n});\n```\n\n_Note:_ get content from [tag page](https://www.instagram.com/explore/tags/sunset/)\n\n---\n\n**Get media content by providing location id and place name**\n\n```js\ninstagramParser.getMediaByLocation(6264386, 'highbridge-park').then((media) => {\n console.log(media);\n});\n```\n\n_Note:_ get content from [location page](https://www.instagram.com/explore/locations/6264386/highbridge-park)\n\n---\n\n**Get all available countries**\n\n```js\ninstagramParser.getCountries().then((countries) => {\n console.log(countries);\n});\n```\n\n_Note:_ get countries from [location page](https://www.instagram.com/explore/locations/)\n\n---\n\n**Get all cities by providing country id**\n\n```js\ninstagramParser.getCitiesByCountryId('US').then((cities) => {\n console.log(cities);\n});\n```\n\n_Note:_ get cities from [country page](https://www.instagram.com/explore/locations/US/)\n\n---\n\n**Get all places by providing city id**\n\n```js\ninstagramParser.getPlacesByCityId('c2728325').then((places) => {\n console.log(places);\n});\n```\n\n_Note:_ get places from [city page](https://www.instagram.com/explore/locations/c2728325/)\n\n---\n\n**Get media content by providing place id**\n\n```js\ninstagramParser.getMediaByPlaceId(2999512).then((media) => {\n console.log(media);\n});\n```\n\n_Note:_ get content from [place page](https://www.instagram.com/explore/locations/2999512/)\n\n---\n\n**Get media content by providing search query**\n\n```js\ninstagramParser.getMediaBySearchQuery('sunset').then((media) => {\n console.log(media);\n});\n```\n\n_Note:_ get content from searchbar on the top of the page\n\n---\n\n## Examples ☺\n\n](http://godban.github.io/browsers-support-badges/)](http://godban.github.io/browsers-support-badges/)](http://godban.github.io/browsers-support-badges/)](http://godban.github.io/browsers-support-badges/)](http://godban.github.io/browsers-support-badges/)](http://godban.github.io/browsers-support-badges/)](http://godban.github.io/browsers-support-badges/)Alexey Istomin 🚇 💻 🤔 | \n
\n \n
\n \n ![\"GitGub](\"https://github.com/webistomin/posthtml-link-noreferrer/actions/workflows/ci.yml/badge.svg\"\n){kind=icon}
\n \n \n \n \n \n
![\"npm](\"https://img.shields.io/bundlephobia/minzip/nanogram.js\")
\n![\"downloads\"](\"https://img.shields.io/npm/dt/nanogram.js\")
![\"jsdeliver\"](\"https://img.shields.io/jsdelivr/npm/hy/nanogram.js?style=rounded\")
![\"contributors\"](\"https://img.shields.io/badge/all_contributors-2-orange.svg\"){kind=icon}
\n
\n Warning •\n Key Features •\n Demo •\n Documentation •\n Installation •\n How To Use •\n Caveats •\n Browsers support •\n License •\n Contributing\n
\n\n## Warning ❗\n\nInstagram [has introduced](https://stackoverflow.com/a/66687344/13374604) 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.\n\n## Key Features ✨\n\n* **Small.** ~ 2KB (minified and gzipped). Size Limit controls the size\n* **No dependencies**\n* No need for the **access token** secret\n* **Easy to use**\n* **Typescript** support\n* **Tree shakeable**\n\n## Demo 👀\n\n### [DEMO](https://codepen.io/webistomin/pen/vYNrgYL)\n\n## Documentation 🔨\n\nYou can read the full documentation [here](https://nanogram-js.now.sh/)\n\n## Installation 🚀\n\n### Using package managers\n\n#### npm\n```shell script\n$ npm install nanogram.js --save\n```\n\n#### yarn\n```shell script\n$ yarn add nanogram.js\n```\n\n### via CDN\n\nAdd script right before closing `` tag\n\n```html\n\nor\n\n```\n\n_Hint:_ for a better performance add [preconnect](https://css-tricks.com/using-relpreconnect-to-establish-network-connections-early-and-increase-performance/) link in the head of your document. \n\n```html \n\n \n \n\n \n \n\n\n \n \n \n\n```\n\n## How to use 🤔\n\n### **Get media content by providing instagram username**\n\n#### ES2015\n\n```js\nimport { getMediaByUsername } from 'nanogram.js'\n\ngetMediaByUsername('instagram').then((media) => {\n console.log(media);\n});\n```\n\n#### CommonJS\n\n```js\nconst getMediaByUsername = require('nanogram.js').getMediaByUsername;\n\ngetMediaByUsername('instagram').then((media) => {\n console.log(media);\n});\n```\n\n#### IIFE\n\n```js\nconst getMediaByUsername = window.Nanogram.getMediaByUsername\n\ngetMediaByUsername('instagram').then((media) => {\n console.log(media);\n});\n```\n\n_Note:_ get content from [user page](https://www.instagram.com/instagram/). 12 photos is the maximum for this method.\n\n---\n\n### **Get media content by providing instagram post id**\n\n#### ES2015\n\n```js\nimport { getMediaByPostId } from 'nanogram.js'\n\ngetMediaByPostId('CIrIDMtDwn4').then((media) => {\n console.log(media);\n});\n```\n\n#### CommonJS\n\n```js\nconst getMediaByPostId = require('nanogram.js').getMediaByPostId;\n\ngetMediaByPostId('CIrIDMtDwn4').then((media) => {\n console.log(media);\n});\n```\n\n#### IIFE\n\n```js\nconst getMediaByPostId = window.Nanogram.getMediaByPostId\n\ngetMediaByPostId('CIrIDMtDwn4').then((media) => {\n console.log(media);\n});\n```\n\n_Note_: get content from [post page](https://www.instagram.com/p/CIrIDMtDwn4/)\n\n---\n\n### **Get media content by providing instagram reel id**\n\n#### ES2015\n\n```js\nimport { getMediaByReelId } from 'nanogram.js'\n\ngetMediaByReelId('CKONdDkJaPU').then((media) => {\n console.log(media);\n});\n```\n\n#### CommonJS\n\n```js\nconst getMediaByReelId = require('nanogram.js').getMediaByReelId;\n\ngetMediaByReelId('CKONdDkJaPU').then((media) => {\n console.log(media);\n});\n```\n\n#### IIFE\n\n```js\nconst getMediaByReelId = window.Nanogram.getMediaByReelId\n\ngetMediaByReelId('CKONdDkJaPU').then((media) => {\n console.log(media);\n});\n```\n\n_Note_: get content from [reel page](https://www.instagram.com/reel/CKONdDkJaPU/)\n\n---\n\n### **Get media content by providing instagram tag**\n\n#### ES2015\n\n```js\nimport { getMediaByTag } from 'nanogram.js'\n\ngetMediaByTag('sunset').then((media) => {\n console.log(media);\n});\n```\n\n#### CommonJS\n\n```js\nconst getMediaByTag = require('nanogram.js').getMediaByTag;\n\ngetMediaByTag('sunset').then((media) => {\n console.log(media);\n});\n```\n\n#### IIFE\n\n```js\nconst getMediaByTag = window.Nanogram.getMediaByTag\n\ngetMediaByTag('sunset').then((media) => {\n console.log(media);\n});\n```\n\n_Note:_ get content from [tag page](https://www.instagram.com/explore/tags/sunset/)\n\n---\n\n### **Get media content by providing location id and place name**\n\n#### ES2015\n\n```js\nimport { getMediaByLocation } from 'nanogram.js'\n\ngetMediaByLocation(6264386, 'highbridge-park').then((media) => {\n console.log(media);\n});\n```\n\n#### CommonJS\n\n```js\nconst getMediaByLocation = require('nanogram.js').getMediaByLocation;\n\ngetMediaByLocation(6264386, 'highbridge-park').then((media) => {\n console.log(media);\n});\n```\n\n#### IIFE\n\n```js\nconst getMediaByLocation = window.Nanogram.getMediaByLocation\n\ngetMediaByLocation(6264386, 'highbridge-park').then((media) => {\n console.log(media);\n});\n```\n\n_Note:_ get content from [location page](https://www.instagram.com/explore/locations/6264386/highbridge-park)\n\n---\n\n### **Get all available countries**\n\n#### ES2015\n\n```js\nimport { getCountries } from 'nanogram.js'\n\ngetCountries().then((media) => {\n console.log(media);\n});\n```\n\n#### CommonJS\n\n```js\nconst getCountries = require('nanogram.js').getCountries;\n\ngetCountries().then((media) => {\n console.log(media);\n});\n```\n\n#### IIFE\n\n```js\nconst getCountries = window.Nanogram.getCountries\n\ngetCountries().then((media) => {\n console.log(media);\n});\n```\n\n_Note:_ get countries from [location page](https://www.instagram.com/explore/locations/)\n\n---\n\n### **Get all cities by providing country id**\n\n#### ES2015\n\n```js\nimport { getCitiesByCountryId } from 'nanogram.js'\n\ngetCitiesByCountryId('US').then((media) => {\n console.log(media);\n});\n```\n\n#### CommonJS\n\n```js\nconst getCitiesByCountryId = require('nanogram.js').getCitiesByCountryId;\n\ngetCitiesByCountryId('US').then((media) => {\n console.log(media);\n});\n```\n\n#### IIFE\n\n```js\nconst getCitiesByCountryId = window.Nanogram.getCitiesByCountryId\n\ngetCitiesByCountryId('US').then((media) => {\n console.log(media);\n});\n```\n\n_Note:_ get cities from [country page](https://www.instagram.com/explore/locations/US/)\n\n---\n\n### **Get all places by providing city id**\n\n#### ES2015\n\n```js\nimport { getPlacesByCityId } from 'nanogram.js'\n\ngetPlacesByCityId('c2728325').then((media) => {\n console.log(media);\n});\n```\n\n#### CommonJS\n\n```js\nconst getPlacesByCityId = require('nanogram.js').getPlacesByCityId;\n\ngetPlacesByCityId('c2728325').then((media) => {\n console.log(media);\n});\n```\n\n#### IIFE\n\n```js\nconst getPlacesByCityId = window.Nanogram.getPlacesByCityId\n\ngetPlacesByCityId('c2728325').then((media) => {\n console.log(media);\n});\n```\n\n_Note:_ get places from [city page](https://www.instagram.com/explore/locations/c2728325/)\n\n---\n\n### **Get media content by providing place id**\n\n#### ES2015\n\n```js\nimport { getMediaByPlaceId } from 'nanogram.js'\n\ngetMediaByPlaceId(2999512).then((media) => {\n console.log(media);\n});\n```\n\n#### CommonJS\n\n```js\nconst getMediaByPlaceId = require('nanogram.js').getMediaByPlaceId;\n\ngetMediaByPlaceId(2999512).then((media) => {\n console.log(media);\n});\n```\n\n#### IIFE\n\n```js\nconst getMediaByPlaceId = window.Nanogram.getMediaByPlaceId\n\ngetMediaByPlaceId(2999512).then((media) => {\n console.log(media);\n});\n```\n\n_Note:_ get content from [place page](https://www.instagram.com/explore/locations/2999512/)\n\n---\n\n### **Get media content by providing search query**\n\n#### ES2015\n\n```js\nimport { getMediaBySearchQuery } from 'nanogram.js'\n\ngetMediaBySearchQuery('sunset').then((media) => {\n console.log(media);\n});\n```\n\n#### CommonJS\n\n```js\nconst getMediaBySearchQuery = require('nanogram.js').getMediaBySearchQuery;\n\ngetMediaBySearchQuery('sunset').then((media) => {\n console.log(media);\n});\n```\n\n#### IIFE\n\n```js\nconst getMediaBySearchQuery = window.Nanogram.getMediaBySearchQuery\n\ngetMediaBySearchQuery('sunset').then((media) => {\n console.log(media);\n});\n```\n\n_Note:_ get content from searchbar on the top of the page\n\n---\n\n## Caveats 💣\n\n](http://godban.github.io/browsers-support-badges/)](http://godban.github.io/browsers-support-badges/)](http://godban.github.io/browsers-support-badges/)](http://godban.github.io/browsers-support-badges/)](http://godban.github.io/browsers-support-badges/)](http://godban.github.io/browsers-support-badges/)](http://godban.github.io/browsers-support-badges/)Alexey Istomin 🚇 💻 🤔 | \n ![\"\"/](\"https://avatars1.githubusercontent.com/u/24753161?v=4\") Yousuf Khan 💻 ⚠️ 🐛 | \n