Monitor Reply

Support

Instagram not working 'out-of-the-box' ... temp fix

Permalink Browser Info Environment November 05, 2014 at 3:30 AM

Hi,

I've just implemented a social feed wall for a client and had some challenges with the Instagram feed. I successfully registered the app with Instagram, got the API token etc. and have successfully used the apigee console for testing the Instagram API.

Chrome dev tools was showing that the Instagram API URL called to get a users feed was not formatted correctly so I traced down where the URLs are built in the Social Feed addon and discovered that the error was occuring in the social feed jQuery plugin.

Turns out the jQuery plugin is expecting (I believe) a URL with the information needed to load a user feed but the Social Feed addon is only passing the User's ID so the URL build logic doesn't complete properly and the resulting URL isn't a valid Instagram API URL. For my project, I just modified the Social Feed addon a bit to make it generate the correct URL based on the data being passed by the Social Feed addon.

The code in question can be found in the file '/packages/social_feed/blocks/social_feed/sf-js/jquery.social.stream.1.5.4.js, lines 443-474:

case 'instagram':
         href = '#';
         url = 'https://api.instagram.com/v1';
         var cp = id.substr(0,1), cq = id.split(cp), url1 = encodeURIComponent(cq[1]), qs = '', ts = 0;
         switch(cp)
         {
            case '?':
            var p = cq[1].split('/');
            qs = '&lat='+p[0]+'&lng='+p[1]+'&distance='+p[2];
            url += '/media/search';
            break;
            case '#':
            url += '/tags/'+url1+'/media/recent';
            ts = 1;
            break;

Viewing 15 lines of 31 lines. View entire code block.

         case 'instagram':
         href = '#';
         url = 'https://api.instagram.com/v1';
         var cp = id.substr(0,1), cq = id.split(cp), url1 = encodeURIComponent(cq[1]), qs = '', ts = 0;
         switch(cp)
         {
            case '?':
            var p = cq[1].split('/');
            qs = '&lat='+p[0]+'&lng='+p[1]+'&distance='+p[2];
            url += '/media/search';
            break;
            case '#':
            url += '/tags/'+url1+'/media/recent';
            ts = 1;
            break;
            case '!':
            url += '/users/'+url1+'/media/recent';
            break;
            case '@':
            url += '/locations/'+url1+'/media/recent';
            break;
         }
         if(o.accessToken == '' && ts == 0){
            if (location.hash) {
               o.accessToken = location.hash.split('=')[1] ;
            } else {
               location.href="https://instagram.com/oauth/authorize/?client_id="+o.clientId+"&redirect_uri="+o.redirectUrl+"&response_type=token"; 
            }
         }
         url += '?access_token='+o.accessToken+'&client_id='+o.clientId+'&count='+n+qs;
         break;

I changed it to:

case 'instagram':
         href = '#';
         url = 'https://api.instagram.com/v1';
         var cp = id.substr(0,1), cq = id.split(cp), url1 = encodeURIComponent(cq[1]), qs = '', ts = 0;
/*
         switch(cp)
         {
            case '?':
            var p = cq[1].split('/');
            qs = '&lat='+p[0]+'&lng='+p[1]+'&distance='+p[2];
            url += '/media/search';
            break;
            case '#':
            url += '/tags/'+url1+'/media/recent';
            ts = 1;

Viewing 15 lines of 35 lines. View entire code block.

         case 'instagram':
         href = '#';
         url = 'https://api.instagram.com/v1';
         var cp = id.substr(0,1), cq = id.split(cp), url1 = encodeURIComponent(cq[1]), qs = '', ts = 0;
/*
         switch(cp)
         {
            case '?':
            var p = cq[1].split('/');
            qs = '&lat='+p[0]+'&lng='+p[1]+'&distance='+p[2];
            url += '/media/search';
            break;
            case '#':
            url += '/tags/'+url1+'/media/recent';
            ts = 1;
            break;
            case '!':
            url += '/users/'+url1+'/media/recent';
            break;
            case '@':
            url += '/locations/'+url1+'/media/recent';
            break;
         }
*/
         // social feed addon is not passing the data the way this jquery plugin is expecting ... commented out plugins processing script above and added a line that works with what the plugin is passing below
         url += '/users/'+id+'/media/recent';
         if(o.accessToken == '' && ts == 0){
            if (location.hash) {
               o.accessToken = location.hash.split('=')[1] ;
            } else {
               location.href="https://instagram.com/oauth/authorize/?client_id="+o.clientId+"&redirect_uri="+o.redirectUrl+"&response_type=token"; 
            }
         }
         url += '?access_token='+o.accessToken+'&client_id='+o.clientId+'&count='+n+qs;
         break;

Hope this helps resolve any challenges with Instagram in this addon!

Type:	Discussion
Status:	New

Social Feed

Support

Instagram not working 'out-of-the-box' ... temp fix

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post