By Vlad Stirbu.
Adds ability to share the content of a canvas element or a dataUrl encoded image using the Instagram application for iOS and Android.
If you use cordova-cli
newer than 5.0:
cordova plugin add cordova-instagram-plugin
or, for older versions:
cordova plugin add https://github.com/vstirbu/InstagramPlugin
Detect if the Instagram application is installed on the device. The function isInstalled accepts a callback function as parameter:
Instagram.isInstalled(function (err, installed) {
if (installed) {
console.log("Instagram is", installed); // installed app version on Android
} else {
console.log("Instagram is not installed");
}
});
Share the content of a canvas element or a base64 dataURL png image. The function share accepts a string, corresponding to the canvas element id or the dataURL, an optional caption, and a callback function as parameters:
API CHANGE NOTE: Instagram app stopped accepting pre-filled captions on both iOS and Android. As a work-around, the caption is copied to the clipboard. You have to inform your users to paste the caption.
Instagram.share(canvasIdOrDataUrl, caption, function (err) {
if (err) {
console.log("not shared");
} else {
console.log("shared");
}
});
or:
Instagram.share(canvasIdOrDataUrl, function (err) {
if (err) {
console.log("not shared");
} else {
console.log("shared");
}
});
Share library asset image or video. The function shareAsset (iOS only) accepts a string with asset local identifier, and a callback function as parameters:
var assetLocalIdentifier = "24320B60-1F52-46AC-BE4C-1202F02B9D00/L0/001";
Instagram.shareAsset(function(result) {
console.log('Instagram.shareAsset success: ' + result);
}, function(e) {
console.log('Instagram.shareAsset error: ' + e);
}, assetLocalIdentifier);
You can get a LocalIdentifier by using Photos Framework Fetching Assets API
A very basic application that uses the plugin can be found here.
Additionally for IOS only, you can utilize a fourth parameter on the base64/canvas method share
, to correspond with a mode:
console.log(Instagram.SHARE_MODES);
> {
DEFAULT: 0, // original plugin logistics, where it checks for IOS Version 13+ to switch from IG to IGO mode.
IGO: 1, // legacy UTI for instagram DI (.exclusivegram)
IG: 2, // new UTI for instagram DI (.photo)
LIBRARY: 3 // save base64 or canvas to disk jpg, copy it to the Library, so that it can then be shared via App Intent
}
Using above as definition, you can change your code as such (note the usage of a blank caption, to specify 4 total arguments, not 3):
var caption = ''; // copied to clipboard by Cordova js. Instagram doesn't support feeding it anymore.
Instagram.share(canvasIdOrDataUrl, caption, function (err) {
if (err) {
console.log("not shared");
} else {
console.log("shared");
}
}, Instagram.SHARE_MODES.LIBRARY);
The plugin is included in ngCordova and ionic-native.
NOTE: If you are using an image from the server,then you should download the image and fetch the content using readAsDataURL. Example:
var url = encodeURI('https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg');
var filename = 'image.jpg';
var targetPath = cordova.file.externalRootDirectory + filename;
$cordovaFileTransfer.download(url, targetPath, {}, true).then(function(result) {
var mywallpaper = result.toURL();
window.resolveLocalFileSystemURL(mywallpaper, function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader(),
data = null;
reader.onloadend = function(event) {
data = reader.result;
$cordovaInstagram.share(data, '#amazing').then(function(success) {
console.log('shareViaInstagram Success', success);
}, function(err) {
console.log('shareViaInstagram failed', err);
});
};
reader.readAsDataURL(file)
});
});
},
function(error) {},
function(progress) {
});
share
.The plugin is available under MIT license.