CODEWITHSUNDEEP
angularionic-frameworkionic3
vignesh
vignesh

Reputation: 109

How to share image on social media from ionic3

I created a New Project in ionic3

In My Project; Firstly, I save the image into Database using PHP

Then I retrieve all images from database and display in ionic photo.html using photo.ts

It works successfully.But I need to add sharing options in ionic3.

If users click the share button, that particular image will share on users social media(fb, twitter, whatsapp). How to do this?

Here is html code

photo.html

<ion-header>
<ion-navbar>
<ion-title>photo</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-grid>  
<ion-item *ngFor="let item of items">
<ion-row align-items-stretch>
<ion-col col-12 col-md-6 align-self-stretch align-self-center  
approxItemHeight="457px">
             <ion-card class="card">
       <img src="http://xxxxxx.com/imgshare/{{item.img}}" height="200" 
width="200">
        <button ion-button color="lightText" 
(click)="share(item)">share</button>
</ion-card>      
</ion-col>
</ion-row>
</ion-item>
</ion-grid>
</ion-content>

photo.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
import { SocialSharing } from '@ionic-native/social-sharing';
@IonicPage()
@Component({
selector: 'page-photo',
templateUrl: 'photo.html',
})
export class PhotoPage {
public items : Array<any> = [ ];  
constructor(public navCtrl: NavController, public navParams: NavParams, 
public http: HttpClient, private socialSharing: SocialSharing) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad PhotoPage');
}
   ionViewWillEnter() : void
{
  this.load();
}
load() : void
{
  this.http
  .get('http://xxxx.com/imgshare/retrieve.php')
  .subscribe((data : any) =>
  {
     console.dir(data);
     this.items = data;
     console.log(this.items[0].img);

  },
  (error : any) =>
  {
     console.dir(error);
  });
}
}

Upvotes: 2

Views: 7057

Answers (2)

Suhail Kawsara
Suhail Kawsara

Reputation: 515

I used Social sharing then I used this method on my app.

share(data){
  this.socialSharing.share('',null,data.imgUrl,null);
}

and it's work for me.

Sorry about my English.

Upvotes: 1

Utpaul
Utpaul

Reputation: 2007

First of all you need to install Social sharing via two command following:

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

Then there are many way to share in different social site.

This will share the app via the action sheet to any app you choose.

share(index){
  this.socialSharing.share(index.img, null, null, null);
}

More details visit medium link

And also visit official site official link

Upvotes: 2

Related Questions