Display a feed of you own Instagram's account

Description

Welcome to the Instafeed POC !

Created using this JS script: http://instafeedjs.com thanks to Steven Schobert.

Use Insta feed macro

Go to the page where you want the instagram feed to appear.
Edit this page in WYSIWYG mode and include the XWiki macro with the name "Insta Feed" and introduce the token generated at the following step.
In the "more" section you can:

• set the maximum number of photos that are shown
• Select the size of the photos that are shown (150px "thumbnail", 306px "low_resolution" or 612px "standard_resolution") 
• Select the source of the photos that are shown (user feed with "get", or a specific tag)
• Select the displayer of the feed: panel reduces images to 75px

API Access Token

To make it work on your wiki, you need to grab an access token from Instagram.
This could be done easily using this third party service, or to protect you data directly in Instagram by creating a developer account, following these steps:

Step 1 — Register Application

Visit https://www.instagram.com/developer/ and register a new app

Step 2 - Register a new application

https://www.instagram.com/developer/clients/manage/

Go to Manage Clients, and hit ‘Register a New Client’ to register and gain API access.
Copy the Client ID here, or at least keep this tab open, you will need the Client ID soon.

Step 4—Configure Client for Public Access

Click ‘Edit’ on your app from the Manage Clients screen, then open the ‘Security’ tab and uncheck the ‘Disable Implicit OAuth’ since we’d like the public to be able to see our feed.
Also, open the ‘Sandbox’ tab and confirm you are the ‘admin’ of this app.

Step 5—Spin up a ‘localhost’ to access API url

Put in the redirect url your local server, for example: http://localhost:8080/xwiki/bin/view/Main/WebHome

Step 6—Use this API URL in a browser

Once you have a ‘localhost’ server running, you can use a simple URL in your browser to grab your access token. Open your browser and paste the url below, replacing the string after ‘client_id’ and before the ’&’ with your Client ID you saved earlier, and hit Enter to visit this URL: https://www.instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=http://localhost:8080/xwiki/bin/view/Main/WebHome&response_type=token&scope=public_content

Remember: Replace the 'CLIENT_ID’ part of this url with your Client ID. You can access the Client ID again from the Instagram Developers site on the Manage Clients page.

Step 7—Authorize it

Visiting the URL we made with the Client ID will bring up an ‘Authorize’ screen. At this point, you are using your local server to simulate an API connection, and you will Authorize it to get a view of the Access Token response. Click ‘Authorize’.

Step 8—Use the access token

In the url right after ‘#access_token=’ you can grab your public Access Token, which also has your ID in it.

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

1. Log in the wiki with a user having Administration rights
2. Go to the Administration page and select the Import category
3. Follow the on-screen instructions to upload the downloaded XAR
4. Click on the uploaded XAR and follow the instructions
5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Release Notes

v0.2