MMM-Instagram - Pull and animate photos from Instagram feed

[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

1. What happen after install this module, Loading…status on monitor (not show photo)
2. How to get API KEY
3. 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.

[Kkardi]

@yo-less said in MMM-Instagram - Pull and animate photos from Instagram feed:

@kapsolas

@kapsolas is it possible to show only the photos you liked with this??