problem with instagram script and placeholder image

Katlynn 18 posts 89 karma points

Jun 02, 2016 @ 20:08

Hi all! I recently inherited a website for my organization that was created ~4 years ago by an outside agency that is no longer in business. I've only been involved with the project for a month or so now. Today, I noticed that our Instagram script on our front page is no longer working. The script is set to pull and display the latest image from our account, which it did just last week. No one's touched any of the codes, but there's definitely a weird placeholder photo there now that shouldn't be there.

Our base is below, which references the the script in question at the bottom:

<%@ Master Language="C#" 

    MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
    <asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
        <!doctype html>
        <html class="no-js" lang="en">
            <head>
                <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

                <meta http-equiv="Pragma" content="no-cache">
                <meta http-equiv="Expires" content="-1">
                <meta charset="utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
                <title><umbraco:Item field="pageTitleOverride" useIfEmpty="pageName" insertTextAfter=" | Pitt Alumni Association" runat="server" /></title>
                <umbraco:Macro Alias="Global/MetaDescription" runat="server"></umbraco:Macro>
                <meta name="robots" content="index,follow">
                <link rel="icon" type="image/x-icon" href="/favicon.ico" />
                <link rel="stylesheet" href="/Css/foundation.css" type="text/css" media="screen" />
                <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
                <link rel="stylesheet" href="/Css/menu.css" type="text/css" media="screen" />
                <link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
                <link rel="stylesheet" type="text/css" href="/css/countdown.css"/>
                <script type="text/javascript" src="/Scripts/classie.js"></script>
                <script type="text/javascript" src="/Scripts/Vendor/modernizr.js"></script>
                <script type="text/javascript" src="/Scripts/jquery-2.1.3.min.js"></script>



                <!--[if lt IE 9]>
                <script type="text/javascript" src="/Scripts/Vendor/html5.shiv.js"></script>
                <script type="text/javascript" src="/Scripts/Vendor/ns.matcher.js"></script>
                <script type="text/javascript" src="/Scripts/Vendor/respond.min.js"></script>
                <![endif]-->




                <script>
                  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
                  ga('create', 'UA-3169799-1', 'pitt.edu');
                  ga('send', 'pageview');
                </script>


                <asp:ContentPlaceHolder Id="PLHead" runat="server"/>
            </head>
            <body class='<umbraco:Macro Alias="Fragments/PageBodyClass" runat="server"></umbraco:Macro>'>
                <div id="top" class="top-bar hide-for-small hide-for-medium">
                    <div class="row">
                        <div class="large-4 columns">
                            <a target="_blank" href="http://www.pitt.edu/"><img class="upitt-mark" alt="" src="/media/79624/upitt-mark-2.png" /></a>
                        </div>
                        <div class="large-4 columns">
                            <div class="services-links">
                                <a target="_blank" href="http://www.alumnionline.pitt.edu/" title="Log Into the University of Pittsburgh Website"><umbraco:Item field="#[button]Header Login" runat="server" /></a>
                                <span class="divider">&nbsp;</span>
                                <a target="_blank" href="https://securelb.imodules.com/s/1729/2-pittsburgh/index2col.aspx?sid=1729&gid=2&pgid=8&cid=46&logout=1" title="Register for the University of Pittsburgh Website"><umbraco:Item field="#[button]Register" runat="server" /></a>
                            </div>
                        </div>
                        <div class="large-4 columns">
                            <div class="row collapse">
                                <div class="large-8 large-offset-2 small-9 columns">
                                    <input type="search" id="search" placeholder="search">
                                </div>
                                <div class="large-2 small-3 columns">
                                    <a href="#" class="button small" id="searchbutton" title="search the alumni club website"><i class="fa fa-caret-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <umbraco:Macro Alias="Global/MegaNavigation" runat="server" />


                    <asp:ContentPlaceHolder Id="PLBodyTop" runat="server"/>

                    <asp:ContentPlaceHolder Id="PLBodyMiddle" runat="server"/>

                    <asp:ContentPlaceHolder Id="PLBodyBottom" runat="server"/>

                    <umbraco:Macro Alias="Fragments/SocialFooterBanner" runat="server" />
                    <!-- Footer -->
                    <div class="footer-wrapper">
                        <div class="row footer">

                            <umbraco:Macro Alias="Global/FooterLinks" runat="server" />

                            <div class="large-3 small-12 columns right">
                                <h5><umbraco:Item field="globalBusinessName" recursive="true" runat="server" /></h5>
                                <ul class="address">
                                    <umbraco:Item field="globalContactInformation" convertLineBreaks="true" recursive="true" runat="server" />
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div id="bottom" class="large-12 columns">
                            <div class="large-6 small-12 columns">
                                <!--<a href="#" data-reveal-id="legalModal"><umbraco:Item field="#[button]Legal Terms" runat="server" /></a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;--><a href="http://pitt.edu" title="The Univeristy of Pittsburgh">university of pittsburgh</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="/sitemap/" title="sitemap">sitemap</a>
                            </div>
                            <div class="large-6 small-12 columns">
                                <umbraco:Item field="copyright" recursive="true" runat="server" />
                            </div>
                        </div>
                    </div>

                    <div id="legalModal" class="reveal-modal" data-reveal>
                        <umbraco:Item field="legalStatement" recursive="true" runat="server" />
                        <a class="close-reveal-modal">&#215;</a>
                    </div>


                    <div id="loginModal" class="reveal-modal small" data-reveal>
                        <umbraco:Macro Alias="Functional/AuthenticationForm" runat="server"></umbraco:Macro>
                        <a class="close-reveal-modal">&#215;</a>
                    </div>

                <!--[if lt IE 9]>
                    <script type="text/javascript" src="/Scripts/Vendor/jquery-1.9.1.js"></script>  
                <![endif]-->

                <!--[if gte IE 8]><!-->
                    <script type="text/javascript" src="/Scripts/Vendor/jquery.js"></script>
                <!--<![endif]-->
                <script type="text/javascript" src="/Scripts/foundation.min.js"></script>
                <script type="text/javascript" src="/Scripts/paa.fn.js"></script>
                <script type="text/javascript" src="/Scripts/paa.v2.js"></script>
                <!--[if lt IE 9]>
                <script src="/Scripts/Vendor/rem.min.js"></script>
                <![endif]-->
                <umbraco:Item field="javascriptIncludes" runat="server" />
                <script type="text/javascript" src="/Scripts/facebook_feeds_v2.js"></script>
                <script type="text/javascript" src="/Scripts/instagram_feeds_v2.js"></script>
                <script type="text/javascript" src="/Scripts/flickr_feeds.js"></script>
            </body>
        </html>
    </asp:Content>

And here is the script:

var user_id = "1146530164";
var client_id = "a2cc312d7e904f5aa4d6f83e35331c0a";


$(document).ready(function(){
    getInstagramPosts();
});

function getInstagramPosts(){
    var endpoint = "https://api.instagram.com/v1/users/" + user_id + "/media/recent?client_id=" + client_id + "&count=1";
    console.log(endpoint);
    $.ajax({
        type: "GET",
        url: endpoint ,
        dataType: "jsonp",
        success: loadInstagramTab,
        error: parseFailure 
    });
}


function loadInstagramTab(response){
    console.log(response);
    var picture = "";
    if(response.data[0].images.standard_resolution.url){
        picture = response.data[0].images.standard_resolution.url;
    }


    var placeholder = document.getElementById("panelIN");
    if(placeholder) {
        placeholder.innerHTML = '<div class="social-feed"><div class="row"><div class="small-5 column social-title">&nbsp;</div><div class="small-2 column account"><i class="fa fa-instagram">&nbsp;</i></div><div class="small-5 column social-title">&nbsp;</div></div><div class="feed"><img src="' + picture + '"></div><a class="social-account" href="http://instagram.com/pitt_alumni" target="_blank">FOLLOW US ON INSTAGRAM</a></div>'
    }
}

function parseFailure(error){
    console.log("It failed:" + error);
}

The placeholder image that's being queued is here:

http://placehold.it/612x612/C8AA78/fff&text=Instagram+Photo+612+x+612

This is a lot of information, but I honestly can't figure out why it's not working correctly anymore. I assume it's super obvious and I just can't see it, but nonetheless, here we are.

Thanks!

Copy Link

Jordan 24 posts 182 karma points

Jun 03, 2016 @ 08:53

Hey kresides,

This is actually not an issue with your code unfortunately :(. All of our projects using Instagram also stopped working the other day. It was actually a restriction point in place by Instagram a while back but only put into affect on the first of June. Spinet from their dev site:

Any app created before Nov 17, 2015 will continue to function until June 1, 2016. On that date, the app will automatically be moved to Sandbox Mode if it wasn't approved through the review process. The previous version of our documentation is still available here.

https://www.instagram.com/developer/

You can try and put the account up for review, but by the sounds of it, it will be unlikely it will be approved unless there is real need.

Hope this information helps, Jordan

Copy Link

Katlynn 18 posts 89 karma points

Jun 03, 2016 @ 15:04

Hi Jordan,

Oh wow, thank you so much! I didn't even think of that! There were two versions of this script that were up in umbraco when I started a few weeks ago, and I didn't even think to check when they were created. Would you be able to point me in the direction of another script I could use to replace the outdated one on the website?

Thanks!

Copy Link

is working on a reply...

Flag this post as spam?

Problem with Instagram Script and Placeholder Image