If your app works with images, chances are high your users want to post their output to their Instagram account. With Ionic, we can easily add this sharing function with a plugin and also add a special effect under the hood.
Also, if you are active on Instagram make sure to check out my profile where I post some behind the scenes images from time to time!
Starting our Instagram Image Sharing App
To start we create a blank new Ionic app and install the plugin for Instagram sharing as well as the Camera plugin so we can capture and image inside our app for testing. Go ahead and run:
|
1 2 3 4 5 |
ionic start instaShare blank cd instaShare ionic cordova plugin add cordova-instagram-plugin ionic cordova plugin add cordova-plugin-camera npm install --save @ionic-native/instagram @ionic-native/camera |
After installing the plugins we need to make sure they are loaded correctly, therefore go to your src/app/app.module.ts and change it to:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { Instagram } from '@ionic-native/instagram'; import { Camera } from '@ionic-native/camera'; @NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}, Instagram, Camera ] }) export class AppModule {} |
Now we already got everything we need, as this is no special Instagram app that needs permissions we can easily open our images directly within the app through a sharing dialog.
Implement Image Capture and Instagram Share
Before we can post an image to Instagram we need to capture one. In our case our view will just display the current selected image along with 2 buttons to replace the image (or load the image in the beginning) and to then share the selected image to Instagram.
Open your src/pages/home/home.html and change it to:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ion-header> <ion-navbar color="primary"> <ion-title> Insta share </ion-title> </ion-navbar> </ion-header> <ion-content padding> <img [src]="currentImage" *ngIf="currentImage"> <button ion-button full (click)="loadImage()">Load Image</button> <button ion-button full (click)="shareImage()" [disabled]="!currentImage">Instagram share</button> </ion-content> |
Nothing special here, so let’s continue with the actual class.
Inside the loadImage() function we construct a little options object which we pass to the camera. In our case we set the options to select an image from our Photolibrary and also the result data to be a data URL which is needed for the Instagram plugin later. Once we get the data back we set it to our current image and add the needed string before the data to make it a real base64 image string!
Once we got the image set, we can easily share this image to Instagram with just one line. Additional we got a little feature here which automatically copies the second argument of the share() function to your clipboard.
The problem is that Instagram is not allowing to pre fill the caption block, so people got creative and you can now inform your users that some text was copied to their clipboard. This makes especially sense for apps with predefined texts, like when using something like Buffer!
In our case we just pass a dummy string for testing, and then there’s something to be aware of: If you reach the then() block of the promise this does not mean the user has shared the image!
The app can’t detect whether the image was really shared, this will only tell you that the Instagram app was opened. But the user still has the option to abandon that process, so keep that in mind.
For now, open your src/home/home.ts and change it to:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
import { Instagram } from '@ionic-native/instagram'; import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Camera, CameraOptions } from '@ionic-native/camera'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { currentImage = null; constructor(public navCtrl: NavController, private camera: Camera, private instagram: Instagram) { } loadImage() { let options: CameraOptions = { quality: 100, destinationType: this.camera.DestinationType.DATA_URL, encodingType: this.camera.EncodingType.JPEG, sourceType: this.camera.PictureSourceType.PHOTOLIBRARY } this.camera.getPicture(options).then(data => { this.currentImage = 'data:image/jpeg;base64,' + data; }, err => { // Handle error console.log(err) }); } shareImage() { this.instagram.share(this.currentImage, 'This was copied to your clipboard!') .then(() => { // Image might have been shared but you can't be 100% sure }) .catch(err => { // Handle error console.error(err); }) } } |
Now you are ready to offer your users easy Instagram sharing of their images. Perhaps you have already texts that make sense to pre fill the caption, or define some hashtags that will be always copied at that point.
You can also find a video version of this Quick Win below.