instaembed

by armensg

HTML

<div ng-controller="MyCtrl">
  <div class="row">
    <div class="col-md-2">
      <div ng-bind-html="instaTemplate"></div>
    </div>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http: //goo.gl/BUfGZ --> 
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><style>

JavaScript

angular.module('App', [])
  .controller('MyCtrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) {

    var latestMediaUrl = "https://igpi.ga/photos.of.palestine/media?count=1";
    $http.get(latestMediaUrl).then(function(success) {
        var lastPost = success.data.items[0];
        var lastpostcode = lastPost.code;

        var embedUrl = "https://api.instagram.com/oembed?url=http://instagr.am/p/" + lastpostcode;

        console.log(embedUrl);
        //var trustedUrl = $sce.trustAsResourceUrl(embedUrl);
        $sce.trustAsResourceUrl(embedUrl)

        $http.jsonp(embedUrl, {
            jsonpCallbackParam: 'callback'
          })
          .then(function(s) {
            console.log(s);
            $scope.instaTemplate = $sce.trustAsHtml(s.data.html);
          }, function(f) {
            console.log(f);
          });
      },
      function(fail) {
        console.log(fail)
      })

  }]).config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
      // Allow same origin resource loads.
      'self',
      // Allow loading from our assets domain.  Notice the difference between * and **.
      'https://api.instagram.com/**'
    ]);

  });