Mobile Multi Share Implementation mit jQuery Mobile


Can be HTML matching with the to easily build a share alternative for mobile applications to save space (with jQuery mobile).

These are services share in a <Select> Day traded registered and individually via JavaScript. The result looks like this on Android phones:

20121127-154143.jpg

HTML:

            <label for="select-choice-share">Share</label>
            <select name="select-choice-share" id="select-choice-share" data-icon="forward" data-mini="true" data-iconpos="left" onchange="handleSocialShare()">
                <option value="no">Share it</option>
                <option value="facebook">Post this on Facebook</option>
                <option value="twitter">Tweet this</option>
                <option value="email">Email this</option>
            </select>

Javascript:

function handleSocialShare()
{
    $('#select-choice-share option:selected').each(function()
    {
        text = "Flash vs HTML5 Trendanalyse";
        url ="http://www.sebastianviereck.de/flash-html5-trendanalyse/#.ULTEkYb9n2A";

        shareService = $(this).val()
        switch (shareService) {
            case "facebook":
                shareFacebookLike(url);
                break;
            case "twitter":
                shareTwitter(url, text);
                break;
            case "email":
                shareEmail(url, text);
                break;
            default:

        }
    });
}

These events like this run on Android phone:

20121127-154219.jpg

Mailto command asks for email client

20121127-154227.jpg

Facebook launches Facebook page

Facebook like with JavaScript triggers

function shareFacebookLike(url)
{
    window.location="http://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(url);
}

Twitter Tweet with JavaScript triggers

function shareTwitter(url, text)
{
    window.location = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text) + "&url=" + encodeURIComponent(url);
}

Write email with JavaScript triggers

function shareEmail(subject, body)
{
    window.location = "mailto:&subject=" + subject + "&body=" + body;
}
  1. Hi, tanks for the explanation. a question: how do you deal with application life cycle? Sayng, this line ” window.location=”http://www.facebook.com/sharer/sharer.php?u=” + encodeURIComponent(url);” opens a new browser window, rught? So it is’nt very likely that in the meantime user shares link, the app will close?
    Have you seen that Apache Cordova Plugin who deals whit this issue?
    http://tech.sarathdr.com/featured/social-share-plugin-for-android-cordova-2-2-0-email-sms-facebook-twitter-share/

  2. Hi, thnx for posting this. I am wondering how to use facebook function properly? I does not insert anything into the posting window. Any suggestions?