QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Share Button for Intel XDK APP

Share Button for Intel XDK APP

social-share-intel-xdk

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.

What is Share Widget?

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.

Screen Shot 2015-01-02 at 11.22.42 pm

Intel XDK legacy apps don’t support third party plugins therefore you have to make a cordova hybrid app build.

Social Share Button

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);
            });
        }

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

IMG_0582IMG_0583

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');
        }

IMG_0584

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);
            });
        }

IMG_0586

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>
Jan 3, 2015Narayan Prusty
Building Intel XDK APP for Adhoc and App StorePush Notification in Intel XDK using Push Plugin
Comments: 15
  1. Gina
    5 years ago

    Hi, I have the same problem that many have mentioned here.
    I created a project, add the social sharing plugin build and install on my iphone but it does not work, The error that returns on the phone is that window.plugins is undefine, I have looked everywhere but still not able to find a solutions, Does anybody know how to solve it? Thanks

    ReplyCancel
  2. lakhdym
    5 years ago

    Ça marche bien merci

    ReplyCancel
  3. laxman reddy
    6 years ago

    hi sir it is not working on intel xdk app frame work please help me is there any othere plugin

    ReplyCancel
  4. laxman reddy
    6 years ago

    the code not working on intel xdk

    ReplyCancel
  5. Hien,NguyenCong
    7 years ago

    To this app work, I think you have to build and install on real device. Intel xdk say:
    “IMPORTANT: The Emulator and App Preview (on-device-testing) wil not work with 3th-party plugin(yet)”

    ReplyCancel
  6. Emre
    7 years ago

    It doesn’t work on intel XDK I’ve added related plug in.
    I can understand what is wrong , do you think to reply posts ?

    ReplyCancel
  7. Aravind Kumar
    7 years ago

    Hi i am trying to build small app using intel xdk .The app main concept is to share text to whatsapp using the android app my code is

    <body><a href="whatsapp://send?text=<>” data-action=”share/whatsapp/share”>Share via Whatsapp</a></body>

    it works in intel App preview but when i build the apk it does nothing
    Plz try to slove this

    ReplyCancel
  8. Aravind Kumar
    7 years ago

    Hi i am trying to build small app using intel xdk .The app main concept is to share text to whatsapp using the android app my code is

    <a href="whatsapp://send?text=<>” data-action=”share/whatsapp/share”>Share via Whatsapp

    it works in intel App preview but when i build the apk it does nothing
    Plz try to slove this

    ReplyCancel
  9. Olalekan
    7 years ago

    Here is the error i got:

    intel xdk uncaught TypeError: Cannot read property ‘socialsharing’ of undefined

    ReplyCancel
  10. BUG
    7 years ago

    not working :/

    ReplyCancel
  11. Stefano
    7 years ago

    I have added the plugin but it doesn’t works! window.plugins is null

    ReplyCancel
  12. Stefano
    7 years ago

    Ivan you can find a complete repo url here: http://plugins.cordova.io/#/package/nl.x-services.plugins.socialsharing

    ReplyCancel
  13. Rajesh Tiwari
    7 years ago

    I’am new to Phonegap I recently created an application to share image to installed application using “social share” plugin in eclipse
    but I receive error
    ” E/Web Console(1218): Uncaught TypeError: Object # has no method ‘share’ at file:///android_asset/www/index.html:42″
    Can you please tell me how to resolve this problem

    ReplyCancel
  14. Ivan
    7 years ago

    please write complete repo url

    ReplyCancel
  15. CODEWARRIOR
    7 years ago

    I have added the plugin.But d app not responds to share..Kindly solve my pbm

    ReplyCancel

Leave a Reply to Emre Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image7 years ago 15 Comments Cordova
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • What is Share Widget?
  • Include Social Sharing Plugin
  • Social Share Button
  • SMS Sharing
  • E-Mail Sharing
  • Complete Source Code
Related Articles
  • Intel XDK Geolocation Tutorial
  • Push Notifications in Intel XDK using pushMobi
  • Integrate Google Analytics in Intel XDK APP
  • Push Notification in Intel XDK using Push Plugin
  • Sending SMS using Intel XDK
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license