MMM-Instagram - Pull and animate photos from Instagram feed

Yurick

Read my post 4 months ago. I changed the code and it works fine for me. As I am a copy-paste coder, I can’t post it here for not to be damned. :) But if we ask a author to fix it using my clues it would be nice to have a working module.

rudibarani

Thanks @Yurick for finding the solution to the problem. Would be great to see this implemented so everyone could benefit from @kapsolas module.

kapsolas

The module was not loading new images. I was thinking to fix that and I have a solution i am testing.

Sounds like @Yurick has a solution for this too. If he pm’s it i can test it and incorporate into the code

Yurick

Here is my MMM-Instagram.js

/* global Module */

/* Magic Mirror
 * Module: MMM-Instagram
 *
 * By Jim Kapsalis https://github.com/kapsolas
 * MIT Licensed.
 */

Module.register('MMM-Instagram', {

    defaults: {
        format: 'json',
        lang: 'en-us',
        id: '',
        animationSpeed: 1000,
        updateInterval: 60000, // 10 minutes
        access_token: '',
        count: 200,
        min_timestamp: 0,
        loadingText: 'Loading...'
    },
    
    // Define required scripts
    getScripts: function() {
        return ["moment.js"];
    },
    
    /*
    // Define required translations
    getTranslations: function() {
        return false;
    },
    */
    
  

    // Define start sequence
    start: function() {
	var self = this;
        Log.info('Starting module: ' + this.name);
        this.data.classes = 'bright medium';
        this.loaded = false;
        this.images = {};
        this.activeItem = 0;
        this.url = 'https://api.instagram.com/v1/users/self/media/recent' + this.getParams();
	var insturl = this.url;
//        Log.info('instaurl = ' + this.url);
	setInterval(function() {
//				Log.info('NewUrl = ' + this.url);
			        self.sendSocketNotification("INSTAGRAM_GET", insturl); 
				    }, 40000); //perform every 1000 milliseconds.	

},

    
    getStyles: function() {
        return ['instagram.css', 'font-awesome.css'];
    },

    // Override the dom generator
    getDom: function() {
        var wrapper = document.createElement("div");
        var imageDisplay = document.createElement('div'); //support for config.changeColor

        if (!this.loaded) {
            wrapper.innerHTML = this.config.loadingText;
            return wrapper;
        }
        
        // set the first item in the list...
        if (this.activeItem >= this.images.photo.length) {
            this.activeItem = 0;
        }
        
        var tempimage = this.images.photo[this.activeItem];
        
        // image
        var imageLink = document.createElement('div');
        //imageLink.innerHTML = "<img src='https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'>";
        imageLink.id = "MMM-Instagram-image";
        imageLink.innerHTML = "<img src='" + tempimage.photolink + "'>";
        
        imageDisplay.appendChild(imageLink);
        wrapper.appendChild(imageDisplay);
       
        return wrapper;
    },

    /* scheduleUpdateInterval()
     * Schedule visual update.
     */
    scheduleUpdateInterval: function() {
        var self = this;

        Log.info("Scheduled update interval set up...");
        self.updateDom(self.config.animationSpeed);
	

        setInterval(function() {
            Log.info("incrementing the activeItem and refreshing");
            self.activeItem++;
            self.updateDom(self.config.animationSpeed);
        }, this.config.updateInterval);
    },

    /*
     * getParams()
     * returns the query string required for the request to flickr to get the 
     * photo stream of the user requested
     */
    getParams: function() {
        var params = '?';
        params += 'count=' + this.config.count;
        params += '&min_timestamp=' + this.config.min_timestamp;
        params += '&access_token=' + this.config.access_token;
        return params;
    },

    // override socketNotificationReceived
    socketNotificationReceived: function(notification, payload) {
        //Log.info('socketNotificationReceived: ' + notification);
        if (notification === 'INSTAGRAM_IMAGE_LIST')
        {
            //Log.info('received INSTAGRAM_IMAGE_LIST');
            this.images = payload;
            
            //Log.info("count: " +  this.images.photo.length);
            
            // we want to update the dom the first time and then schedule next updates
            if (!this.loaded) {
            this.updateDom(1000);
                this.scheduleUpdateInterval();
            }
            
            this.loaded = true;
        }
    }

});

:::

Spoiler Text

:::

microkost

This post is deleted!

microkost

Is this module still working? Because after clonning and providing access_token according to manual is still stucked on Loading… warning.

Output from starting MagicMirror:

Connecting socket for: MMM-Instagram
Starting node_helper for module [MMM-Instagram]

OK, some debug… I finally used multi account fork from O5ten and used his API key from README 1160247792.b119586.49fa97770ee34deb92e621069c760cee then it started to show pictures, so finall problem is on my access_token. Good to know for debuging, should help someone else…

How to test that access token is OK?
Put to web browser:
https://api.instagram.com/v1/users/self/media/recent?access_token=1160247792.b119586.49fa97770ee34deb92e621069c760cee
did you see some data as result?

"data": [{"id": "1698285770916717663...

So now test your key
https://api.instagram.com/v1/users/self/media/recent?access_token=[TOKEN_HERE]
If there is result, everything is OK, if you get

data	[]

then is time to investigate! Do you have content on your wall? Because your’s last 20 posts are only accessible in sandbox https://www.instagram.com/developer/sandbox/ (!!!)
For rest and another use cases read carefully https://www.instagram.com/developer/ guide.

My problem was empty my wall… Sorry for spam, but maybe it helps someone not familiar with that with debuging.

nobita

@kapsolas
I have 3 questions

What happen after install this module, Loading…status on monitor (not show photo)
How to get API KEY
in config, ask access_token so I have to put access_token or API KEY
Thanks for all your kind

benderstwin

This works great, but is it possible to make it actually reload the pictures from instagram without reloading MM?

AlexanderSalter

Hi all, had the same problem, Instagram was acquired by Facebook who have updated the way the API works.
I spent a couple of days writing and testing a new module for Instagram that was based off the original.

It requires a Facebook developer account and app, but I have explained it as best i can in readme

Intro_Post
MMM-Instagram2020

chassain 0

@AlexanderSalter

It works fine. Thanks Alexander.