• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

MMM-Instagram - Pull and animate photos from Instagram feed

Scheduled Pinned Locked Moved Utilities
87 Posts 26 Posters 104.5k Views 27 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Y Offline
    Yurick
    last edited by Yurick Jun 27, 2017, 3:01 PM Jun 27, 2017, 2:55 PM

    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
    
    :::
    
    
    
    1 Reply Last reply Reply Quote 0
    • M Offline
      microkost
      last edited by Jan 23, 2018, 9:07 AM

      This post is deleted!
      M 1 Reply Last reply Jan 23, 2018, 10:30 AM Reply Quote 0
      • M Offline
        microkost @microkost
        last edited by microkost Jan 24, 2018, 1:19 PM Jan 23, 2018, 10:30 AM

        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.

        1 Reply Last reply Reply Quote 1
        • N Offline
          nobita @kapsolas
          last edited by Apr 25, 2018, 5:57 AM

          @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
          1 Reply Last reply Reply Quote 0
          • B Offline
            benderstwin
            last edited by Dec 19, 2018, 4:53 AM

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

            1 Reply Last reply Reply Quote 0
            • A Offline
              AlexanderSalter
              last edited by Jan 21, 2020, 6:30 PM

              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

              C 1 Reply Last reply Jan 23, 2020, 6:50 AM Reply Quote 0
              • C Offline
                chassain 0 @AlexanderSalter
                last edited by Jan 23, 2020, 6:50 AM

                @AlexanderSalter

                It works fine. Thanks Alexander.

                1 Reply Last reply Reply Quote 0
                • K Offline
                  Kkardi
                  last edited by Dec 22, 2020, 7:01 PM

                  @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??

                  1 Reply Last reply Reply Quote 0
                  • 1
                  • 2
                  • 5
                  • 6
                  • 7
                  • 8
                  • 9
                  • 9 / 9
                  • First post
                    Last post
                  Enjoying MagicMirror? Please consider a donation!
                  MagicMirror created by Michael Teeuw.
                  Forum managed by Sam, technical setup by Karsten.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy