nanogram.js v3.2.0
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 --saveyarn
$ yarn add nanogram.jsvia 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 ☺
Browsers support 🌎
| IE / Edge | Firefox | Chrome | Safari | iOS Safari | Opera | 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):
This project follows the all-contributors specification. Contributions of any kind welcome!