ISSUE: After Smash Balloon plugin setup, Instagram images do not appear
BEFORE TROUBLESHOOTING WITH THIS ARTICLE, PLEASE READ:
If you are still running the WP Instagram widget and Instagram images are no longer loading OR you are receiving the error message "Instagram has returned invalid data," please instead read this article.
If you are looking for information on how to implement an Instagram feed into a widget area, refer to our article on installing and customizing the Smash Balloon Social Feed plugin.
If you have closely followed our instructions for installing and customizing the Smash Balloon Social Photo Feed plugin, your settings and Instagram authentication are all correct and working, but Instagram photos are still not appearing, the likely issue is that you are running a site optimization plugin that is interfering with JavaScript (JS) files.
You will need to update settings in that plugin in order for plugins like Smash Balloon to work. It's a good idea to do so anyway, as interference with these JS files may cause issues with certain theme functions, like the search bar.
Here's what to check for:
1. Are you running any site caching or performance plugins, like Autoptimize? Autoptimize is one of the most common performance plugins, and often a culprit for JS file interference. If you are running Autoptimize, check to see if you have it set to combine JS files, which is what may cause scripts to not work properly. You can do this by going to Settings > Autoptimize, then uncheck Aggregate all linked JS-files. Click Save Changes and Empty Cache.
2. Do you have any other plugins that seem to indicate they alter JS files? Head to your Plugins tab in the WordPress Dashboard to do a quick audit and see. If you do, try deactivating those plugins, and see if your Instagram images will render.
3. Do a little site investigation of your own. The Google Chrome browser provides tools to tell you if you have any errors, conflicts, or problems with scripts loading. In Google Chrome, navigate to your blog Home Page, right click, and select Inspect. In the frame that loads, navigate to the Console tab. Here's what this looks like in action:
Any specific errors pointing to JavaScript, ones that mention "UISearch is not defined," and/or ".waypoint is not a function" indicate something is interfering with how scripts load. Those two specific errors would be "thrown" by your theme files when scripts aren't loading or are loading out of order, so it's a good breadcrumb to indicate something's amiss with how your site is loading scripts. If you see these, be sure to check plugins again!