angular-instafeed - npm Package Compare versions

Comparing version 1.7.0 to 1.8.0

package.json

		{
		"name": "angular-instafeed",
		"version": "1.7.0",
		"version": "1.8.0",
		"description": "Grid that displays your most recent Instagram photos.",
		@@ -5,0 +5,0 @@ "main": "public/js/instafeed.js",

README.md

		@@ -37,17 +37,39 @@ # Angular Instafeed

		* You will also need to get your user ID go run this program. To get your User ID, go to [this site](http://jelled.com/instagram/lookup-user-id) and enter your Instagram user name to get your user ID.
		* Note: Your User ID is different than your User Name. Your User ID is a string that looks like ```12345678```
		* You will be creating a Instagram feed using the Instagram API and Angular 1.5. The feed will feature a switchable grid to change the layout of the photos on the page [see Style Guide below for details].

		* In your main JavaScript file, you will need to require the module and invoke the function. The module takes two parameters, the first is your client ID and the second is your User ID.
		Before you start building out your Angular web application, you will need to sign up to be an Instagram Developer:

		```
		const instafeed = require('angular-instafeed');
		instafeed([client_id], [user_id]);
		```
		1. First go [register as an Instagram Developer](https://instagram.com/developer/clients/manage/) to get your Client ID.

		* This package includes CSS styles that can be used. If you choose to use these, you will need to precomile your CSS files after importing the CSS from the Angular Instafeed
		1. You will also need to get your user ID go run this program. To get your User ID, go to [this site](http://jelled.com/instagram/lookup-user-id) and enter your Instagram user name to get your user ID.

		* Finish setting up your build tools to precompile your JavaScript and CSS. For a working example take a look at my demo [Anngular Instafeed](https://github.com/JoeKarlsson/Angular-Instafeed/tree/npm_example).
		* I used Gulp, broswerify, and Rework for my demo.
		* Note: Your User ID is different than your User Name. Your User ID is a string that looks like `12345678`
		* Note: If you do not have an Instagram account, find an account that you enjoy and use their photos for your feed.

		1. Create an `index.html` with an HTML5 template in a new directory, and fire up `http-server` we will need this in order to get our auth token.
		* Start your server, and copy the URL.
		* Go to your Manage Clients on the Instagram API settings, click `Manage` on your project, then click on the `Security Tab` and enter your server URL into the Valid Redirect URIs.

		1. This is the weird step - since we are making a client side web application, we need to get a [pre-approved access-token from Instagram](https://www.instagram.com/developer/authentication/). Here's how you do it:

		* Step One: Direct your user to our authorization URL (Be sure to replace `CLIENT_ID` with your client ID and `REDIRECT_URI` with the url you pasted in the step above)

		https://api.instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&response_type=token

		At this point, we present the user with a login screen and then a confirmation screen where they grant your app’s access to their Instagram data. Note that unlike the explicit flow the response type here is “token”.

		* Step Two: Receive the access_token via the URL fragment

		Once the user has authenticated and then authorized your application, Instagram redirects them to your redirect_uri with the access_token in the url fragment. It will look like this:

		http://your-redirect-uri#access_token=ACCESS-TOKEN

		Simply grab the access_token off the URL fragment and you’re good to go. If the user chooses not to authorize your application, you’ll receive the same error response as in the explicit flow

		1. Once you get your user id and your access_token, try hitting this route to get your most recent Instagram photos (Be sure to replace your `USER_ID` with your user ID and `ACCESS_TOKEN` with the access token you got in the step above).

		https://api.instagram.com/v1/users/USER_ID/media/recent/?count=99&&callback=JSON_CALLBACK&access_token=ACCESS_TOKEN

		1. Now, you're ready to starting building your Instagram Feed in Angular 2.0 :sparkles:

		## Tech
		@@ -54,0 +76,0 @@ Instafeed uses a number of open source projects:

angular-instafeed - npm Package Compare versions

Improved metrics