This post is a part 41 of Intel XDK Complete Tutorial post series.
In this tutorial I will show you how to create sharing buttons for Intel XDK app. Sharing buttons are necessary if you want your app users to share some content of your app with their friends/connections.
A share widget is a like a native popup which contains list of social, email and sms apps installed on the device. Every mobile OS has a share widget which can be launched using native APIs. A sharing button actually launches the widget and then user selects a app from the widget using which the user wants share the content.
Include Social Sharing Plugin
We will use Telerik Social Sharing cordova plugin to lauch the share widget. It allows the user to share file, text or URL via sms, email or social apps.
Intel XDK legacy apps don’t support third party plugins therefore you have to make a cordova hybrid app build.
Here is the JavaScript code to display the share widget
function social_share()
{
//Parameters:
//Message, Subject, File Path(relative, File URL or file://), URL, success callback, fail callback
window.plugins.socialsharing.share("Blog Post Title","Post Summery",null,"http://qnimate.com",function(result){
alert('result: ' + result);
}, function(result){
alert('error: ' + result);
});
}
{
//Parameters:
//Message, Subject, File Path(relative, File URL or file://), URL, success callback, fail callback
window.plugins.socialsharing.share("Blog Post Title","Post Summery",null,"http://qnimate.com",function(result){
alert('result: ' + result);
}, function(result){
alert('error: ' + result);
});
}
This code launches the share widget. The share widget lists social apps, email apps and sms apps installed in the device which support sharing of content through them.
This is how it looks in iOS
SMS Sharing
The above code does provide an option for the user to share via SMS. But if you want user to only be able to share via SMS then you need to launch the default SMS app.
Here is the code to launch the SMS directly without launching the share widget
function sms_share()
{
//Parameters
//Message text, comma seperated list of phone numbers
window.plugins.socialsharing.shareViaSMS('Message', '1223221312,8172645367');
}
{
//Parameters
//Message text, comma seperated list of phone numbers
window.plugins.socialsharing.shareViaSMS('Message', '1223221312,8172645367');
}
E-Mail Sharing
If you want user to only be able to share via EMail then you need to launch the default EMail client app.
Here is the code to launch the E-Mail app directly without launching the share widget
function email_share()
{
window.plugins.socialsharing.canShareViaEmail(function(){
alert("Email client is configured");
}, function(){
alert("Email client is not configured");
});
//Parameters:
//Body, Subject, Array of to address, Array of CC, Array of BCC, Array of attachments url(relative, File URL or file://), success callback, error callback
window.plugins.socialsharing.shareViaEmail('Email Body','Subject',['to@person1.com', 'to@person2.com'],['cc@person1.com'],null,['https://www.google.nl/images/srpr/logo4w.png'],function(result){
alert('result: ' + result);
},function(result){
alert('result: ' + result);
});
}
{
window.plugins.socialsharing.canShareViaEmail(function(){
alert("Email client is configured");
}, function(){
alert("Email client is not configured");
});
//Parameters:
//Body, Subject, Array of to address, Array of CC, Array of BCC, Array of attachments url(relative, File URL or file://), success callback, error callback
window.plugins.socialsharing.shareViaEmail('Email Body','Subject',['to@person1.com', 'to@person2.com'],['cc@person1.com'],null,['https://www.google.nl/images/srpr/logo4w.png'],function(result){
alert('result: ' + result);
},function(result){
alert('result: ' + result);
});
}
Complete Source Code
Here is the complete source of an demo app using the above mentioned functions.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="lib/ft/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<button onclick="social_share();">Share on Social Sites</button>
<button onclick="email_share();">Share via E-Mail</button>
<button onclick="sms_share();">Share via SMS</button>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script>
function social_share()
{
window.plugins.socialsharing.share("Blog Post Title","Post Summery",null,"http://qnimate.com",function(result){
alert('result: ' + result);
}, function(result){
alert('error: ' + result);
});
}
function email_share()
{
window.plugins.socialsharing.canShareViaEmail(function(){
alert("Email client is configured");
}, function(){
alert("Email client is not configured");
});
window.plugins.socialsharing.shareViaEmail('Email Body','Subject',['to@person1.com', 'to@person2.com'],['cc@person1.com'],null,['https://www.google.nl/images/srpr/logo4w.png'],function(result){
alert('result: ' + result);
},function(result){
alert('result: ' + result);
});
}
function sms_share()
{
window.plugins.socialsharing.shareViaSMS('Message', '1223221312,8172645367');
}
</script>
</body>
</html>
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="lib/ft/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<button onclick="social_share();">Share on Social Sites</button>
<button onclick="email_share();">Share via E-Mail</button>
<button onclick="sms_share();">Share via SMS</button>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script>
function social_share()
{
window.plugins.socialsharing.share("Blog Post Title","Post Summery",null,"http://qnimate.com",function(result){
alert('result: ' + result);
}, function(result){
alert('error: ' + result);
});
}
function email_share()
{
window.plugins.socialsharing.canShareViaEmail(function(){
alert("Email client is configured");
}, function(){
alert("Email client is not configured");
});
window.plugins.socialsharing.shareViaEmail('Email Body','Subject',['to@person1.com', 'to@person2.com'],['cc@person1.com'],null,['https://www.google.nl/images/srpr/logo4w.png'],function(result){
alert('result: ' + result);
},function(result){
alert('result: ' + result);
});
}
function sms_share()
{
window.plugins.socialsharing.shareViaSMS('Message', '1223221312,8172645367');
}
</script>
</body>
</html>
