CodeSolution

Please wait...

How to share post in Instagram in ionic 2

@share  @ post  @ Instagram  @ ionic 2   @ npm  @ social sharing  @ camera  

Share post on Instagram using ionic and Cordova plugin 

Create a project run this command:

ionic start <project name> blank 

then move into the newly created directory:

cd <project name>

Install the required plugin and NPM packages

ionic cordova plugin add cordova-plugin-camera
ionic cordova plugin add cordova-plugin-x-socialsharing
npm install --save @ionic-native/camera
?npm install --save @ionic-native/social-sharing

Open app.js in src ->app-> app.module.ts and add the module of ts file

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 { SocialSharing } from '@ionic-native/social-sharing';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Camera } from '@ionic-native/camera';
@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    SocialSharing,
    Camera,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Open home.html in src ->pages-> home->home.html and add code

<ion-header>
   <ion-navbar>
       <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 (click)="share()"  [disabled]="!currentImage" block>Share</button>
</ion-content>

 

Open home.html in src ->pages-> home->home.ts and add code

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SocialSharing } from '@ionic-native/social-sharing';
import { Camera } from '@ionic-native/camera';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
currentImage = null;
  constructor(public navCtrl: NavController, public socialSharing: SocialSharing, private camera: Camera) {
  }
  loadImage() {
    const 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)
     });
  }
  share(){
      this.socialSharing.shareViaInstagram('Share instagram', this.currentImage).then(() => {  // Success!}).catch(() => {  // Error!}); }}

After add platform in your application code platform add command: 

ionic cordova platform add android/ios/windows

Build and Run command

ionic cordova build android/ios/windows
ionic cordova run android/ios/windows

Github link: https://github.com/Sudarshan101/instagramShare

See demo: https://www.youtube.com/watch?v=NB6wcP8x6hE

thank you

Comments 0

Reply