4 Steps to open Social Media Apps in Ionic 4

Open Social media Apps from Ionic

Basic Ionic 4 Application Setup

ionic start open-social-media blank

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.

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-availability

In App Browser Plugin

ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

Step 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);
});
}
}
  1. Add the imported provider classes into the providers array of a component.
  2. Inject 3 providers in the constructor (Platform, InAppBrowser and AppAvailability).
  3. Platform service is used to find which type of platform are we using i.e… Android or IOS or web browser.
  4. InAppBrowser is used to open provided URL in our phone or in the browser based on URL.
  5. AppAvailability is used to check whether the respective App is available or not.
  1. 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

Example GIF

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

  1. 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.

References

To know more about In App browser click here.

To know more about App Availability click here.

JavaScript frameworks

The new way of learning

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store