CODEWITHSUNDEEP
angularjsionic-frameworkngcordova
GY22
GY22

Reputation: 785

How to share a photo to Instagram with Ionic

I am trying to share a taken photo to Instagram. I have installed the social share plugin from ngCordova website

But I am not able to get it to work. When running it I get no errors. I get a success response but the image is not posted on the wall of Instagram.

Here is a print screen from the logs (xcode -> running from actual device to test). enter image description here

Can anybody see what I am doing wrong?

Here is part of my controller code:

app.controller('CameraCtrl', function($scope, $cordovaCamera, $cordovaSocialSharing, $rootScope, $state){

  $scope.takePicture = function(){
    var options = {
        quality: 75,
        destinationType: Camera.DestinationType.DATA_URI,
        sourceType: Camera.PictureSourceType.CAMERA,
        encodingType: Camera.EncodingType.JPEG,
        saveToPhotoAlbum: true,
        correctOrientation:true
    };
    $cordovaCamera.getPicture(options) 
      .then(function(imageURI){
          var imagePlaceholder = document.getElementById('placeholderPicture');
          imagePlaceholder.src = imageURI;
          $rootScope.imgShare = imageURI;
          //$scope.imgURI = "data:image/jpeg;base64," + imageURI;
          //$state.go('app.camera', {image: $scope.imgURI});
          //console.log('camera data: ' + angular.toJson(imageURI));
      },  function(error){
          console.log('error camera data: ' + angular.toJson(imageURI));
    });
  }

$scope.shareViaInstagram = function(message, image){
    socialType = "instagram";
    message = "test";
    image = $rootScope.imgShare;

     $cordovaSocialSharing.shareVia(socialType, message, image, null).then(function(result) {
      console.log('image shared to Instagram ', result);
      console.log('dddd', image);
      console.log('######', $rootScope.imgShare);
      //$state.go('app.finish');
}, function(err) {
      console.log('error in sharing to Instagram ', err);
});

  }

});

Part of my html code:

<div class="wrapperCamera">
        <div class="cameraContent padding">
            <img id="placeholderPicture" ng-src="{{imgShare}}">
            <br>
            <h2 class="customH2Camera">looking good!</h2>
            <br><br>
            <div class="socialIcons">
                <a href="" ng-click="shareViaInstagram(null, null, imgShare, null)"><img src="img/iconInstagram.svg" width="40"></a>
                &nbsp;&nbsp;&nbsp;
                <a href="" ng-click="shareViaFacebook(null, null, imgShare, null)"><img src="img/iconFacebook.svg" width="40"></a>
            </div>
        </div><!-- end cameraContent -->
    </div><!-- end WrapperCamera -->

Upvotes: 4

Views: 1516

Answers (2)

Mini Bhati
Mini Bhati

Reputation: 343

Wrap your plugin call within the deviceready event of cordova. It makes sure that device is fully loaded before making a call to the plugin.

document.addEventListener("deviceready", function () { 
  // your plugin call here 
});

You can also use $ionicPlatform.ready(function() {});

Read this for more info: ngCordova common issues

Upvotes: 1

imtiyaz
imtiyaz

Reputation: 92

  module.controller('ThisCtrl', function($scope, $cordovaInstagram) {
      // Get image from camera, base64 is good. See the
      // $cordovaCamera docs for more info
        $cordovaInstagram.share($scope.image.data, $scope.image.caption).then(function() {
        // Worked
      }, function(err) {
        // Didn't work
      });
    })

Upvotes: 1

Related Questions