Insta Feed Macro

Version 5.6 by Oana-Lavinia Florean on 2018/07/27 15:09

photosDisplay a feed of you own Instagram's account
TypeXAR
CategoryMacro
Developed by

Guillaume Delhumeau, Mohamed Boussaa, Lavinia Florean, Jean-Sébastien Dennebouy

Rating
0 Votes
LicenseGNU Lesser General Public License 2.1

Installable with the Extension Manager

Description

Welcome to the Instafeed POC !
Created using this JS script: http://instafeedjs.com thanks to Steven Schobert.

Here are the steps to make it work on your wiki.

First you need to create an developer account and grab an access token from Instagram.
This could be done easily using this third party service, or to protect you data directly in Instagram:

API Access Token

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.

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 previous step.
instafeed.png
In the "more" section you can set the maximum number of photos that are showed and the size they have by changing the default values.

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
Tags:
    

Get Connected