This MagicMirror module displays your Instagram photos, videos, carousel albums, and captions on your MagicMirror. It makes use of the Facebook Instagram Graph API.

Module loading image and example display of Instagram posting
(click to enlarge)

1. Prerequisites
2. Installing
   1. Updates
3. Configuration
   1. Example config entry
   2. CSS Styling
4. Authorization Process
5. Features
6. Support
7. License
8. Acknowledgments

This module requires a Facebook Developer App in "Development" mode. This Getting Started guide from Facebook will show you how to setup the App for instagram access.

- Just follow steps 1, 2 and 3 to get the variables you need.

+ Note: For the Callback URL's required, namely:
+ "Valid OAuth Redirect URIs"
+ "Deauthorize Callback URL"
+ "Data Deletion Request Callback URL"
+ You can just use: https://localhost/

From the app settings you will need:

1. client_id
2. client_secret
3. redirect_uri

1. Navigate to the modules folder and execute git clone https://github.com/doctorfree/MMM-InstagramView.git. A new folder with the name 'MMM-InstagramView will be created, navigate into it.
2. Execute npm install to install the node dependencies.
3. Configure as per below.
4. Follow the Authorization Process.

Update this module by navigating into its folder on the command line and executing the commands:

• git pull
• npm install

cd ~/MagicMirror/modules/MMM-InstagramView # adapt directory if you are using a different one
git pull
npm install # install (new) dependencies

{
  module: 'MMM-InstagramView',
  position: 'top_center',
  header: 'Instagram - @doctorfree',
  config: {
    client_id: '<YOUR FACBOOK INSTAGRAM APP ID>', // Facebook Instagram App ID
    client_secret: '<YOUR FACBOOK INSTAGRAM APP SECRET>', // Facebook Instagram App Secret
    redirect_uri: '<YOUR FACEBOOK INSTAGRAM APP REDIRECT URL', // Facebook Instagram App redirect_uri
    auth_code: '', // Temporary authorization code as part of the Facebook Instagram Authorization Process
    showCaptions: true,
    showChildren: true,
    showDate: true,
    showMediaType: false,
    startRandom: true,
    shuffle: true,
    animationSpeed: 5000,
    updateInterval: 60000,
  }
}

The default styling applied to the MMM-InstagramView module is as follows:

.image {
  margin-right: 15px;
}

.green {
  color: #83FFB3;
}

.yellow {
  color: yellow;
}

.red {
  color: #FF4C4C;
}

#MMM-Instagram-image {
  width:1080px;
}

#MMM-Instagram-video {
  width:1080px;
}

Additional custom styling may be applied with entries in:

MagicMirror/css/custom.css

For example, to increase the font size of the module header, add the following to your custom.css file:

.MMM-InstagramView .module-header {
  font-size: 40px;
}

1. Ensure that client_id, client_secret and redirect_uri are all configured in config.js and that they match your settings in the Facebook Develloper App.
2. Ensure the auth_code configuration varibale is set to nothing or ''.
3. Ensure the accesstoken.cfg file does not contain an access token and is completely blank.
4. Start MagicMirror and wait for the authorization link to show, you will need to either VNC into your MagicMirror or access the MagicMirror interface remotely 'http://magic_mirror_ip:8080/'
5. Look for the Message defined below and click the "Here" link

Authorization Process Step 4

+ Note: The mouse pointer may be hidden, just right-click to locate your pointer.

6. Click the Authorize Button and the form will send you to your redirect_uri and give you an auth_code in the url.

Authorization Process Step 5

DONT PANIC! If the url contains a string like ?code=ABCDE...........123SDG0129#_ all is good.

Authorization Process Step 6

7. Copy the auth_code from the url, removing the #_ at the end

?code= <<<auth_code>>> #_

8. Add the auth_code to your config.js file.
9. Restart MagicMirror and enjoy your instagram feed.

After Authorization Process is Complete
(click to enlarge)

Note: The authorization process uses a key stored in accesstoken.cfg under the module directory. This allows access to the account for 60 days. There is a mechanism in place to renew the key every time MagicMirror is restarted. If the access token expires, just repeat the authorization process.

In addition to those features available and supported in MMM-Instagram and MMM-Instagram2020, this module supports features previously unavailable in MagicMirror Instagram modules. Included with this version of MMM-InstagramView are the following:

• Support for playback of Instagram video posts
• All media in multiple media Instagram posts can be displayed
  • The showChildren config option controls whether all media in posts are displayed
• Compatibility with MMM-GoogleAssistant and MMM-Detector unlike previous Instagram modules
• Additional configuration options:
  • showCaptions: Controls whether post caption is displayed
  • showChildren: Controls whether additional media in post are shown
  • showDate: Controls whether date of post is displayed
  • showMediaType: Controls whether media type is displayed
  • startRandom: Choose a random starting point to display Instagram feed media
  • shuffle: Display Instagram posts in random order
• Improved custom CSS capabilities
• Module updates no longer clobber the stored access token
• Multiple bug fixes

Issues with MMM-InstagramView can be reported and tracked in the Issues section of the repository at https://github.com/doctorfree/MMM-InstagramView/issues

This project is licensed under the MIT License. See the LICENSE file for details.

This module derives from the original MMM-Instagram module and its fork, the MMM-Instagram2020 module. Thanks to the following authors of those modules.

• Alexander Salter for creating the MMM-Instagram2020 module used as the primary guidance in creating this module.
• Dimitrios Kapsalis for creating the original MMM-Instagram module that was used as guidance in creating the MMM-Instagram2020 module.