How to open Twitter and Facebook app with Phonegap?

Question

I am trying to have my PhoneGap application link to open a specific users profile page in the Twitter app. I know not everyone has the Twitter app installed on their device so I wanted to send them to the Play Store to download it if they didn't.

Problem is that every time I tap the link on my Android device I receive an error:

Application Error:

net::ERR_UNKNOWN_URL_SCHEME(twitter://user?screen_name=xerxesnoble)

My JavaScript is as follows:

//If Android

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");

if (isAndroid) {

    alert('Android!');

    twitterCheck = function() {
        alert('Android!');
        var now = new Date().valueOf();

        setTimeout(function () {
            if (new Date().valueOf() - now > 100) return;
            window.open('https://play.google.com/store/apps/details?id=com.twitter.android', '_system', 'location=no');
        }, 50);

    window.open('twitter://user?screen_name=XerxesNoble', '_system', 'location=no');
    };
};

$('.twiterNav').click(function() {
     window.open('twitter://user?screen_name=xerxesnoble', '_system', 'location=no');
});

Things that I've tried:

• Using twitter:/// instead of twitter://
• Adding <access origin="twitter://user?screen_name=xerxesnoble" /> to my config.xml

I'm not sure what else to try, nothing is working for Facebook either but right now I'm focusing on one issue at a time.

Solution 1

The Problem is that the InAppBrowser plugin was not installed. New versions of PhoneGap/Cordova do not come with all plugins installed- instead you choose what you want your App to have access to.

In terminal cd yourApp and $ cordova plugin add org.apache.cordova.inappbrowser

After doing that, it worked perfectly.

EDIT

Just to branch out a little bit more on how I got my .js to check if twitter was installed or not.

I installed another plugin : AppAvailability for iOS and Android

Then I altered my .js to look like this:

//Twitter checker

// If Mac//

var twitterCheck = function(){

appAvailability.check('twitter://', function(availability) {
    // availability is either true or false
    if(availability) { window.open('twitter://user?screen_name=xerxesnoble', '_system', 'location=no');}
    else{window.open('https://itunes.apple.com/ca/app/twitter/id333903271?mt=8', '_system', 'location=no'); };
});
};

//If Android

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");

if(isAndroid) {

twitterCheck = function(){    

appAvailability.check('com.twitter.android', function(availability) {
    // availability is either true or false
    if(availability) {window.open('twitter://user?screen_name=xerxesnoble', '_system', 'location=no');}
    else{window.open('https://play.google.com/store/apps/details?id=com.twitter.android', '_system', 'location=no');};
});
};
};

The documentation provided in the AppAvailability plugin was very helpful as well>

Hope that this helps someone!

Solution 2

Just a reference for others who might come here and want a bit more:

I've been able to get this working well (so far) on both iOS and Android, and dynamically falling back to the browser using the code below.

Required plugins are cordova-plugin-inappbrowser and cordova-plugin-appavailability

function openBrowser (url) {
    if (!url) {
        return;
    }

    // turn my url into a scheme/intent url
    getAvailabilityScheme(url, function (url) {
        window.open(url, '_system');
    });
}

function getAvailabilityScheme (url, callback) {
    var schemeOrPackage;
    var schemeUrl;

    // check for appavaialbility plugin
    if (!window.appAvailability) {
        callback(url);
    }

    // facebook
    if (url.indexOf('facebook.com/') !== -1) {
        schemeOrPackage = isAndroid ? 'com.facebook.katana' : 'fb://'
        schemeUrl = 'fb://profile/' + url.split('facebook.com/')[1];
    }

    // twitter
    if (url.indexOf('twitter.com/') !== -1) {
        schemeOrPackage = isAndroid ? null : 'twitter://'
        schemeUrl = 'twitter://user?screen_name=' + url.split('twitter.com/')[1];
    }

    if (schemeOrPackage && schemeUrl) {
        window.appAvailability.check(schemeOrPackage, function () {
            callback(schemeUrl);
        }, function () {
            callback(url);
        });
    } else {
        callback(url);
    }
}

Using it is easy, just call the openBrowser(url) method with a normal website url. The only issue i found was that for a facebook page, it needs to an ID not the slug name

Comments

[Yogster]

Thanks for this. Very useful! The package name for Twitter in Android is com.twitter.android

[Priyanka]

could you able to open facebook page in facebook app?

[Almas Dusal]

Thank you for great function share. One little bug here. There is a "return" needed to " if (!window.appAvailability) " section. Without return code will continue to next section.