4 Steps to open Social Media Apps in Ionic 4
Basic Ionic 4 Application Setup
ionic start open-social-media blankThe above command creates a project with “open-social-media”.
What can we expect from this session ?
We will create a set of button with social media icons. When User clicks a particular social media icon (Facebook, Instagram, YouTube and Twitter) it will check whether the respective native app is installed or not.
If installed it will navigate to a page or user profile of the respective native app otherwise it will navigate to a page or user profile of the browser.
Step 1:
Creating an HTML social media icons with a click event and method (Which would be defined in step 4)
<ion-header>
<ion-toolbar color="primary">
<div class="ion-text-center">
<ion-title>
Open Social Media
</ion-title>
</div>
</ion-toolbar>
</ion-header><ion-content padding>
<div>
<div class="horizontal">
<p class="font-size-16">Like, Follow and Share</p>
</div>
<div class="horizontal">
<div class="social-icons" (click)="socialMedia('FACEBOOK')">
<ion-icon name="logo-facebook"></ion-icon>
</div>
<div class="social-icons" (click)="socialMedia('INSTAGRAM')">
<ion-icon name="logo-instagram"></ion-icon>
</div>
<div class="social-icons" (click)="socialMedia('TWITTER')">
<ion-icon name="logo-twitter"></ion-icon>
</div><div class="social-icons" (click)="socialMedia('YOUTUBE')">
<ion-icon name="logo-youtube"></ion-icon>
</div>
</div>
</div>
</ion-content>
Step 2
Adding required CSS for a component
.social-icons {
font-size: 30px;
}
.horizontal {
display: flex;
justify-content: space-evenly;
}
.font-size-16 {
font-size: 16px;
}Step 3
Add the dependencies or plugins required
App Availability Plugin
ionic cordova plugin add cordova-plugin-appavailability
npm install @ionic-native/app-availabilityIn App Browser Plugin
ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browserStep 4
Adding our TypeScript logic into component.ts
import { Platform } from '@ionic/angular';
import { Component } from '@angular/core';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { AppAvailability } from '@ionic-native/app-availability/ngx';@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
providers: [InAppBrowser, AppAvailability]
})
export class HomePage {
constructor(
private platform: Platform,
private inAppBrowser: InAppBrowser,
private appAvailability: AppAvailability
) { }
socialMedia(type) {
switch (type) {
case 'FACEBOOK': {
this.openFacebook('saichoclate', 'https://www.facebook.com/saichoclate/');
break;
}
case 'INSTAGRAM': {
this.openInstagram('sai_kumar_korthivada_skk')
break;
}
case 'TWITTER': {
this.openTwitter('korthivadasai');
break;
}
}
}
openTwitter(name) {
let app;
if (this.platform.is('ios')) {
app = 'twitter://';
} else if (this.platform.is('android')) {
app = 'com.twitter.android';
} else {
this.openInApp('https://twitter.com/' + name);
return;
}
this.appAvailability.check(app)
.then((res) => {
const data = 'twitter://user?screen_name=' + name;
this.openInApp(data);
}
).catch(err => {
this.openInApp('https://twitter.com/' + name);});
}
openFacebook(name, url) {
let app;
if (this.platform.is('ios')) {
app = 'fb://';
} else if (this.platform.is('android')) {
app = 'com.facebook.katana';
} else {
this.openInApp('https://www.facebook.com/' + name);
return;
}
this.appAvailability.check(app)
.then(res => {
const fbUrl = 'fb://facewebmodal/f?href=' + url;
this.openInApp(fbUrl);
}
).catch(() => {
this.openInApp('https://www.facebook.com/' + name);
});
}
openInApp(url) {
this.inAppBrowser.create(url, '_system')
}
openInstagram(name) {
let app;
if (this.platform.is('ios')) {
app = 'instagram://';
} else if (this.platform.is('android')) {
app = 'com.instagram.android';
} else {
this.openInApp('https://www.instagram.com/' + name);
return;
}
this.appAvailability.check(app)
.then((res) => {
this.openInApp('instagram://user?username=' + name);
}
).catch(err => {
this.openInApp('https://www.instagram.com/' + name);
});
}
}
Let us understand above typescript code snippet
- Import in-app-browser, app-availability plugin into your component.
- Add the imported provider classes into the providers array of a component.
- Inject 3 providers in the constructor (Platform, InAppBrowser and AppAvailability).
- Platform service is used to find which type of platform are we using i.e… Android or IOS or web browser.
- InAppBrowser is used to open provided URL in our phone or in the browser based on URL.
- AppAvailability is used to check whether the respective App is available or not.
Methods and Usage
socialMedia(type): This method receives a “type” prop when user clicks on icons in HTML. This method decides which method has to be executed based on User action.
openFacebook, openTwitter, openInstagram these methods will check following:
- Whether the platform is Android or IOS.
- Whether respective app exist in their native phone or not. If the respective app exist it opens the app if not it navigates to the built-in web browser.
Sample Demo below
Note
Here, each and every social media applications have different package names on different platforms. They have different URL formation and different patterns for opening a page or user profile. The static content defined above will give you a good understanding on how they need to be configured.
Facebook Mobile APP v/s Web
- When we are using the Facebook page name for accessing in mobile Facebook APP it always opens a specific module like Home, Reviews, photos but will not open a particular page overview. To open an overview page we have to open the link in our native phone browser.
Observation: The right side of the image is a mobile browser (Showing home module of entire page) whereas the left side of the image is the mobile Facebook App, both views are different but both points to the same Page and URL.
References
To know more about In App browser click here.
To know more about App Availability click here.
