MMM-Instagram - Pull and animate photos from Instagram feed

zeular

Okay, but is it possible? Anything you could implement? I would like to be able to get in family photos in chronological order. :)

kapsolas

@zeular I suppose that this could be implemented. The module could be updated to make multiple requests to various sources.

Given my current availability, this would not be something I can do in the near future.

zeular

@kapsolas I understand, but if you had time over, I would be grateful.
Thank’s anyway, for taking your time and reply.

kapsolas

@zeular You are welcome!
And to be clear, when you say pull from different API, you mean different services? Like Flickr, Instagram, etc?

zeular

@kapsolas No, I meant two different instagram accounts …

Garrett

@kapsolas Forgive me if i’m wrong, (New Here) when you mean pulling images from your own feed, that means the images are loading from your own account correct? Anyway to pull from others users accounts? I know it states that in your Readme yet i’ve found no instructions on how that works. Basically I want it it load the “home feed” where other users posts you follow show up in. Any light in this area would be much appreciated! Thanks.

kapsolas

@Garrett Not sure if this is actually possible, but may be.
I would need to review the instragram API.
Currently, i was just interested in viewing my own photos when I wrote the module. it was more to meet my needs and then I shared it.

When I have some time, i’ll try to implement some of the requests folks have had.

zeular

@kapsolas In my case, I have two APIs from me and my wife’s account that I want to appear, I’ve tried to “just” to add two APIs, but it wasen’t that easy…

I first thought Instagram “sandbox” could import other accounts flow but it does not seem so. I have added my wifes account to my “sandbox” but there is no difference.

rudibarani

Hi @kapsolas,
I think I need some help with the settings for

min_timestamp: 0,

Is there a way to set show only images from today and show nothing if there is no image uploaded today?

Thanks for your help

kapsolas

@rudibarani Hi - There currently is no intelligence on the images selected. It just processes the list that is returned by the API and starts to randomly display them.

What you are asking for would need to be coded.

rudibarani

@kapsolas Thanks for the quick reply. Another question on the side: It seems that only images are are loaded that where on Instagram before I restarted my MM. Is that intended behaviour or am I doing something wrong?

		{
			module: 'MMM-Instagram',
			position: 'middle_center',
			disabled: false,
			config: {
				access_token: '####.####',
				count: 200,  
				min_timestamp: 0,
				animationSpeed: 2500,
				updateInterval: 30000
			}
		},

I waited an hour but non of my new images showed up. Only old ones. Even create a new account with only three images before booting my MM - and it keeps cycling those three and ignores later uploads…
Any idea?

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