Fix: Upgrade Instagram Feeds

This is only relevant to Umbraco 8 themes > Theme versions 1.x - 2.x.

Step 1

Download the latest Vanilla JS version of Instagram Feed from Github — at the time of writing that was v3.0.1.

Step 2

Open the file ~/scripts/usn_default/instagramfeed-1.3.6.min.js and replace the existing JS with the new one downloaded above.

At this point, I would also recommend renaming that file to just instagramfeed.js to remove the version from the name.

If you do rename it, you should also update the reference to the file in ~/Partials/USN_Default/USNWebsiteFooterSection/USN_FooterScripts.cshtml at line 14.

Step3

Modify the new JS file at the following lines 19, 25, 26, 311, 335-337, 339, 351, 360-362 & 364.

Change line 19 to:

'host': "https://images" + ~~(Math.random() * 3333) + "-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/",

Remove line 311. 

Change line 25 and 26 to:

'display_profile': false,
'display_biography': false,

Change lines 335-337 to:

html += '<div class="item items-' + options.items_per_row + ' instagram-' + type_resource + '">'; 
html += '<div class="image">'; html += '<a rel="noopener" href="' + url + '" target="_blank" class="instagram-' + type_resource + '" data-caption="' + caption + '">';
html += '<img' + (options.lazy_load ? ' loading="lazy"' : '') + ' src="' + image + '" alt="' + caption + '" />';
html += '</a>';
html += '</div> ';
html += '</div> ';

Remove line 339.

Change lines 360-362 to:

html += '<div class="item items-' + options.items_per_row + ' instagram-' + type_resource + '">';
html += '<div class="image">';
html += '<a href="' + url + '"' + (options.display_captions ? ' data-caption="' + caption + '"' : '') + ' rel="noopener" target="_blank">';
html += '<img' + (options.lazy_load ? ' loading="lazy"' : '') + ' src="' + igtv[i].node.thumbnail_src + '" alt="' + caption + '" />';
html += '</a>';
html += '</div>';
html += '</div>';

Remove line 364.

 

That's it, you're all set! #h5yr 

Get started today

Join thousands of agencies, freelancers, enterprises & start ups worldwide who use uSkinned Site Builder for Umbraco to deliver results.

NEW Site Builder!

We have launched a brand new, game-changing product for Umbraco CMS.