Posts

Ionic 3 Share Through Social Media

 Ionic 3 Share Through Social Media Installation: ionic cordova plugin add cordova-plugin-x-socialsharing npm install --save @ionic-native/social-sharing  Create Your Project: ionic start socialSharingApp Change Directory To Your Ionic Project: cd socialSharingApp Add Page To Your Application :  ionic g page socialShare Add the following in app.module.ts  import { SocialSharePage } from '../pages/social-share/social-share'; declarations:[ ..... SocialSharePage ], imports: [ ..... ], entryComponents : [ .... SocialSharePage ] Add the following code in social-share.html <ion-header> <ion-navbar color="primary"> <ion-title>Social Share</ion-title> </ion-navbar> </ion-header> <ion-content padding> <h6 style="text-align:center">Share About this application in social-media</h6> <br /> <button ion-button (click)="shareWhatsapp()" full>...

Ionic 3 Text To Speech Conversion

 Ionic 3 Text To Speech Conversion Installation: ionic cordova plugin add cordova-plugin-tts npm install --save @ionic-native/text-to-speech  Create Your Project: ionic start textToSpeech Change Directory To Your Ionic Project: cd textToSpeech Add Page To Your Application :  ionic g page textToSpeech Add the following in app.module.ts  import { TextToSpeechPage } from '../pages/text-to-speech/text-to-speech'; declarations:[ ..... TextToSpeechPage BrowserFacebookPage ], entryComponents : [ .... TextToSpeechPage ] Add the following code in text-to-speech.html <ion-header> <ion-navbar color="primary"> <ion-title>Text To Speech</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-item> <ion-label floating>Username</ion-label> <ion-input type="text" [(ngModel)]="speakOut"></ion-input> </ion-item> <...

Ionic 3 Login with Browser Facebook

 Ionic 3 Login with Browser Facebook  Installation: npm install ng2-cordova-oauth --save  Create Your Project: ionic start browserFacebookApp Change Directory To Your Ionic Project: cd browserFacebookApp Add Page To Your Application :  ionic g page browserPage Add Provider To Your Application :  ionic g page facebookService Add the following in app.module.ts  import { BrowserFacebook Page } from '../pages/browser-facebook/browser -facebook import { HttpModule } from '@angular/http'; import { FacebookServiceProvider } from '../providers/facebook-service/facebook-service'; declarations:[ ..... BrowserFacebookPage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), HttpModule ], entryComponents : [ .... BrowserFacebookPage ], providers: [ .... FacebookServiceProvider ] Add the following code in browser-facebook.html <ion-header> <ion-navbar color="primary"> <ion-title>Browser Fa...

Ionic 3 Creating OAuth redirect URL for Facebook

Ionic 3 Creating OAuth redirect URL for Facebook Steps for creating OAuth Redirect URL for Facebook Go To OAuth Portal . Login To OAuth / Register and login to OAuth After Logining In You Need To Enter Tenant-name ("Any Name Which suits you application here iam using temp-app") Select Region and click on NEXT button Select Account Type either COMPANY / PERSONAL(HERE iam selecting personal) Select A role either DEVELOPER / NON-DEVELOPER. Select one of the option in type of project dropdown and click on create. A Dashboard is appeared. Click on connections in sidemenu and select social. You can see all Social media applications , select one and make the toggle active. Here we are selecting Facebook. A model will be opened. We need to enter APP-ID and APP-SECRET which we got from Facebook developers dashboard Scroll down and click on SAVE button Then in the same model goto client Tab on the top of the model Make Default App to active by changing toggle to a...

Ionic 3 Linking Fire-base and Facebook App

Ionic 3 Linking Fire-base and Facebook App   Steps for Linking Fire-base and Facebook Go to Fire-base Console Login with your google account Click on Add Project . Enter project name and click continue , Firebase dashboard will be opened Click on ATHENTICATION in side-menu In ATHENTICATION Page select "SIGN-IN-METHOD" tab. Click on facebook option and enable the facebook authentication. Enter APP ID and APP SECRET which we can got from Facebook developers Portal at step 5 Click on save

Ionic 3 Creating App Id and App secret for Facebook

Ionic 3 Creating App Id and App secret for Facebook Steps for Creating APP-ID and APP-SECRET : Go To Facebook Developers Page Login to developers Portal Using Your Facebook Credentials Click On Add a New App Button Enter Your App Name and click continue You will see facebook developers Dashboard , where you can see APP ID and APP SECRET Click on setting in the side menu , click on Basic and click on the "ADD PLATFORM" button at bottom of page Now You can see Google Play Package Name Field Where you need to enter your application Package Name sufix with "com." Package name will be "com.io.ionic.starter" (io.ionic.starter can be found in config.xml file) You can also see Class Name Field Where you need to enter your application Package Name sufix with "com." and prefix with "MainActivity" Class name will be "com.io.ionic.starter.MainActivity" (io.ionic.starter can be found in config.xml file) Click On Save Cha...

Ionic 3 Login With Facebook Using Native Facebook Plugin

Ionic 3 Login With Facebook Using Native Facebook Plugin Used Plugins: Facebook Plugin: ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="YOUR_APP_ID" --variable APP_NAME="YOUR_APP_NAME" npm install --save @ionic-native/facebook Firebase Installation: npm install --save firebase Create Your Project: ionic start nativeFacebookApp Change Directory To Your Ionic Project: cd nativeFacebookApp Add Page To Your Application :  ionic g page nativeFacebook Add the following in app,module.ts  import { NativeFacebook Page } from '../pages/native-facebook/ native-facebook '; declarations:[ ..... NativeFacebookPage ], entryComponents : [ .... NativeFacebookPage ] Add the following code in native-facebook.html <ion-header> <ion-navbar color="primary"> <ion-title>Native Facebook</ion-title> </ion-navbar> </ion-header> <ion-content padding> <div *ngIf=...