Cannot load Instagram profiles in AngularJS ng-views

Question

I'm trying to embed an Instagram profile:

$scope.instagram = "<blockquote class=\"instagram-media\" data-instgrm-version=\"4\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"><div style=\"padding:8px;\"> <div style=\" background:#F8F8F8; line-height:0; margin-top:40px; padding:50% 0; text-align:center; width:100%;\"> <div style=\" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;\"></div></div><p style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;\"><a href=\"https://instagram.com/p/1yaMWyoVZM/\" style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;\" target=\"_top\">Une photo publiée par National Geographic (@natgeo)</a> le <time style=\" font-family:Arial,sans-serif; font-size:14px; line-height:17px;\" datetime=\"2015-04-22T18:41:49+00:00\">22 Avril 2015 à 11h41 PDT</time></p></div></blockquote>\n<script async defer src=\"//platform.instagram.com/en_US/embeds.js\"></script>";

But when displaying it within an ng-view (where trust simply calls $sce.trustAsHtml):

<div ng-bind-html="instagram | trust"></div>

The profile does not load. Any idea why? I think it has something to do with the script tag at the end of the Instagram embed HTML, but I haven't found a solution yet:

<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

Here is a plunker you can play with, see how it should look like on this fiddle.

Hmmm, is it possible that Angular is bootstrapping before the instagram script has fully loaded? Is there a callback that the instagram script calls when it's ready? If there's one, maybe manual bootstrap Angular inside that? Or maybe try removing `async` and `defer` from the instagram `script` tag... — M.K. Safi, Jun 01 '15 at 17:28
@MKSafi I already tried removing the `async` and `defer` attributes, but it did not work. I don't really know what the included script does, it's a bit hard to read: http://platform.instagram.com/en_US/embeds.js. Do you get something? — sp00m, Jun 01 '15 at 17:37
http://stackoverflow.com/a/40855386/5537365 This is everything you need. This worked perfect for me! — Darko Kostic, Nov 28 '16 at 23:43

score 5 · Accepted Answer · answered Jun 01 '15 at 19:17

it has something to do with the script tag at the end of the Instagram embed HTML

Yes, it does; and it seems the way the HTML is inserted with ng-bind prevents it from working.

You could copy/paste the script to the index page:

 <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

and display your image by adding a $timeout in your controller:

$timeout(function(){
  $window.instgrm.Embeds.process();
});

See working plnkr

score 0 · Answer 2 · answered Jul 26 '16 at 18:32

0

I used only

$timeout(function(){
  $window.instgrm.Embeds.process();
});

without

<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

and works!

answered Jul 26 '16 at 18:32

Leandro Oliveira

21
5

score 0 · Answer 3 · answered Nov 28 '16 at 23:48

In your app.js create a directive for adding script element:

.directive('externalscript', function() {
    var injectScript = function(element) {
        var instagramScript = angular.element(document.createElement('script'));
        instagramScript.attr('async defer');
        instagramScript.attr('charset', 'utf-8');
        instagramScript.attr('src','http://platform.instagram.com/en_US/embeds.js');
        instagramScript.attr('onload', 'window.instgrm.Embeds.process()');
        element.append(instagramScript);
        var twitterScript = angular.element(document.createElement('script'));
        twitterScript.attr('async defer');
        twitterScript.attr('charset', 'utf-8');
        twitterScript.attr('src', 'http://platform.twitter.com/widgets.js');
        element.append(twitterScript);
    };

    return {
      link: function(scope, element) {
          injectScript(element);
      }
    };
})

and then in your html view call:

<div externalscript></div>

Cannot load Instagram profiles in AngularJS ng-views

3 Answers3