Instagram plugin for Cordova

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.

 

$3

If you use cordova-cli newer than 5.0:

``bash
cordova plugin add cordova-instagram-plugin
`

or, for older versions:

`bash
cordova plugin add https://github.com/vstirbu/InstagramPlugin
`

$3

Detect if the Instagram application is installed on the device. The function isInstalled accepts a callback function as parameter:

`javascript
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.

`javascript
Instagram.share(canvasIdOrDataUrl, caption, function (err) {
if (err) {
console.log("not shared");
} else {
console.log("shared");
}
});
`

or:

`javascript
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:
`javascript
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);
`

$3

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:
* Add plugin cordova-plugin-file-transfer
`Javascript code
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) {
});
`

$3

#### Android

* Passing caption in addition to sharing image requires Instagram Android application version 6.1.0 or higher.
* Older versions of Android (2.x-3.x) do not have proper support for toDataURL on canvas elements. You can still get the canvas content as dataURL following these instructions. Pass the dataUrl instead of the canvas id to `share``.

#### iOS

* Although the plugin follows the instructions to show only Instagram in the document interaction controller, there are reports that other apps appear in the list.

$3

* Sharing image when knowing the file url.

$3

The plugin is available under MIT license.