SocialGap is a simple library intended to ease the integration of PhoneGap hybrid mobile apps with social networks. It is modular, so it can be easily extended and it reduces overhead since you import only the modules you need. This plugin has been developed as a proof of concept while developing Mmarazzu Mobile app. This software is not intended for production usage as it is because of the following list of known needed modifications:
- Facebook long-lived token support needs the app-secret. This should not be deployed on the clients. In order to use the Facebook API as intended you need to transform short-lived token in long-lived ones on your servers and then transport the tokens on the clients, where they will be stored. More information: https://developers.facebook.com/docs/facebook-login/access-tokens
Including this library in your project is quite easy.
This software require the inAppBrowser plugin and the modernizr javascript library.
If you do not have it already, you can install the inAppBrowser plugin by typing the following command from within your app main folder:
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
Once the prerequisites are in place, reference the following js files from your html page:
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/SocialGap/socialGap.js"></script>
<script type="text/javascript" src="js/SocialGap/socialGap_facebook.js"></script>
From now on the setup procedure differ based on the module you would like to use.
- Facebook:
When deviceready event is received, set up the Facebook extension calling theFacebook_ChangeSettings
function as follows:
SocialGap.Facebook_ChangeSettings('appID', 'appSecret', 'fbAppDomain', 'fbScopes');
Then prepare two callback functions.<br> One of them will be called in case of success receiving as parameter the Facebook access token.<br> Instead, the other will be called in case of failure. <pre><code> fbLogonSuccess: function(accessToken) { alert(token); } fbLogonFailure: function(){ alert('Fail'); }</code></pre> Once ready build a link that will start the authentication process. <pre><code> <a onclick="SocialGap.Facebook_PerformLogon(fbLogonSuccess, fbLogonFailure);"> Logon with Facebook </a></code></pre> </li> <li><b>LinkedIn</b>:<br> When deviceready event is received, set up the Facebook extension calling the <code>Linkedin_ChangeSettings</code> function as follows:<br> <pre><code> SocialGap.Linkedin_ChangeSettings('apiKey', 'secretKey', 'ldAppDomain', 'ldScopes');</code></pre><br> Then prepare two callback functions.<br> One of them will be called in case of success receiving as parameter the LinkedIn access token.<br> Instead, the other will be called in case of failure. <pre><code> ldLogonSuccess: function(accessToken) { alert(token); } ldLogonFailure: function(){ alert('Fail'); }</code></pre> Once ready build a link that will start the authentication process. <pre><code> <a onclick="SocialGap.Linkedin_PerformLogon(ldLogonSuccess, ldLogonFailure);"> Logon with LinkedIn </a></code></pre> </li>
Developing an extension is quite straightforward.
We have prepared a "template" in example/js/socialGap_basic.js
which can be used as a starting point for extending this library.
In order to make the example work follow these steps:
- Create a new PhoneGap app typing something similar to:
phonegap create YourApp/ com.whatever.yourapp YourApp
- Copy the files contained in the
example
folder into thewww
folder of the project you've just created - Copy the folder
Social Gap
contained under thelib
directory into the folderwww/js
of the project you have just created. - Set the required settings for the extension(s) you need as explained above.
- Install the inAppBrowser plugin for your project, typing these commands:
cd YourApp cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
-
Run the project for the platform you like most.
For instance type the following command from withinYourApp
directory:
phonegap run android