Personal Instagram Angular.js FeedMade by Joe Karlsson - 2018
See more at www.joekarlsson.com
Basic example usage of factory method to make a request to the Instagram api to get a certain amount of images with an Angular.js switchable grid.
UpdateThis project has been converted into an NPM package Check it out here.
Check out a live demo of this plugin here
Reviews"Oh yes. Absolutely spot on ... works like a charm... The cleanest plugin i've ever worked with - clean, straightforward and works out of box." - tenzopro
- In your project directory
```bash $ npm i angular-instafeed --save ```
- In the HTML file you want to add Instafeed, you will need to add a div with the ID "instafeed".
``` <div id="instafeed"></div> ```
- Next, inside the project, you need to register as a Instagram Developer to get your Client ID
- 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.
Before you start building out your Angular web application, you will need to sign up to be an Instagram Developer:
- First go register as an Instagram Developer to get your Client ID.
- You will also need to get your user ID go run this program. To get your User ID, go to this site 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
12345678Note: If you do not have an Instagram account, find an account that you enjoy and use their photos for your feed.
- Create an
index.htmlwith an HTML5 template in a new directory, and fire up
http-serverwe 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
Manageon your project, then click on the
Security Taband enter your server URL into the Valid Redirect URIs.
- 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. Here's how you do it:
Step One: Direct your user to our authorization URL (Be sure to replace
CLIENT_IDwith your client ID and
REDIRECT_URIwith the url you pasted in the step above)
Step Two: Receive the accesstoken via the URL fragment
```bash 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”.
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: ```bash 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
- Once you get your user id and your accesstoken, try hitting this route to get your most recent Instagram photos (Be sure to replace your
USER_IDwith your user ID and
ACCESS_TOKENwith the access token you got in the step above).
```bash https://api.instagram.com/v1/users/USER_ID/media/recent/?count=99&&callback=JSON_CALLBACK&access_token=ACCESS_TOKEN ```
- Now, you're ready to starting building your Instagram Feed in Angular :sparkles:
Note: If you are interested in installing this via NPM, I got cha covered. Check it out here.
- Fork it!
- Create your feature branch: ``
git checkout -b my-new-feature`
- Commit your changes: `
git commit -am 'Add some feature'`
- Push to the branch: ``
git push origin my-new-feature```
- Submit a pull request :D
See more at www.joekarlsson.com