Social shares not working?

113 views
Skip to first unread message

CreativeMind

unread,
Aug 18, 2018, 12:59:32 PM8/18/18
to DroidScript
Hey guys, do you ever have any issue with share buttons showing up on a mobile screen? I have the following buttons and they look nice, but when I run the app in our IDE the buttons don't link me to the right place. Can anyone tell me what I did wrong? Do I just need to link the normal way (i.e. www.facebook.com?)

HTML:

<!-- I got these buttons from simplesharebuttons.com -->
<div id="share-buttons" style="height: 50 px;">
<!-- Email -->
    <a href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://simplesharebuttons.com"  class= email>
        <img src="https://simplesharebuttons.com/images/somacro/email.png" alt="Email" />
</a>
 <!-- Facebook -->
    <a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank" class=facebook>
        <img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<!-- Google+ -->
    <a href="https://plus.google.com/share?url=https://simplesharebuttons.com" target="_blank" class=google>
        <img src="https://simplesharebuttons.com/images/somacro/google.png" alt="Google" />
</a>
 <!-- Pinterest -->
    <a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());" class=pinterest>
        <img src="https://simplesharebuttons.com/images/somacro/pinterest.png" alt="Pinterest" />
</a>
 <!-- Twitter -->
    <a href="https://twitter.com/share?url=https://simplesharebuttons.com&amp;text=Simple%20Share%20Buttons&amp;hashtags=simplesharebuttons" target="_blank" class=twitter>
        <img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>

CSS:

 .share-buttons {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
position: fixed;
bottom: 0;
display:block;
}

.email {
    display:block;  
}

.facebook {
    display:block;
}

.google {
    display:block;
}

.pinterest {
    display:block;
}

.twitter {
    display:block;
}

Thanks!

BareK

unread,
Aug 19, 2018, 3:59:08 AM8/19/18
to DroidScript
I tried them on desktop chrome and all works fine except the pinterest one which distant script pinmarklet.js returns:

pinmarklet.js?r=29574598.124235574:1 Uncaught TypeError: Cannot read property 'substr' of undefined
    at Object.makeImageless (pinmarklet.js?r=29574598.124235574:1)
    at Object.process (pinmarklet.js?r=29574598.124235574:1)
    at a (pinmarklet.js?r=29574598.124235574:1)

Testing on mobile chrome, all behaves perfectly.

And to make it work whith webview, I made the following:

function OnStart()
{    
    lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

    web = app.CreateWebView( 1.0, 1.0 );
    web.LoadUrl( 'test.html' );
    lay.AddChild( web );

    app.AddLayout( lay );
}

function Email()
{
    var url = "mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://simplesharebuttons.com";
    app.OpenUrl( url );
}

function Facebook()
{    
    var url = "http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com";
    app.OpenUrl( url );
}

function Google()
{    
    var url = "https://plus.google.com/share?url=https://simplesharebuttons.com";
    app.OpenUrl( url );
}

function Twitter()
{
    var url = "https://twitter.com/share?url=https://simplesharebuttons.com&amp;text=Simple%20Share%20Buttons&amp;hashtags=simplesharebuttons";
    app.OpenUrl( url );
}

test.html:

<html>
 <head>
     <meta name="viewport" content="width=device-width">
 <script src='file:///android_asset/app.js'></script>
 <style>
    .share-buttons {

                width: 35px;
                padding: 5px;
                border: 0;
                box-shadow: 0;
                display: inline;
                position: fixed;
                bottom: 0;
                display:block;
            }            
            .email {
                display:block;  
            }            
            .facebook {
                display:block;
            }            
            .google {
                display:block;
            }            
            .pinterest {
                display:block;
            }            
            .twitter {
                display:block;
            }
           
 </style>
 </head>
 <body>
 <!-- I got these buttons from simplesharebuttons.com -->

        <div id="share-buttons" style="height: 50 px;">
       
       
        <a href="javascript:app.Execute('Email()')"  class= email>

            <img src="https://simplesharebuttons.com/images/somacro/email.png" alt="Email" />
        </a>        
        <!-- Facebook -->

        <a href="javascript:app.Execute('Facebook()')" target="_blank" class=facebook>

            <img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
        </a>        
        <!-- Google+ -->

        <a href="javascript:app.Execute('Google()')" target="_blank" class=google>

            <img src="https://simplesharebuttons.com/images/somacro/google.png" alt="Google" />
        </a>        
        <!-- Pinterest -->

        <a href="javascript:(function(){var e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})()" class=pinterest>

            <img src="https://simplesharebuttons.com/images/somacro/pinterest.png" alt="Pinterest" />
        </a>        
        <!-- Twitter -->

        <a href="javascript:app.Execute('Twitter()')" target="_blank" class=twitter>

            <img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
        </a>
       
 </body>
</html>

It behaves quite well, even if the twitter one doesn't have all the informations (missing text and hashtag, only the link remains).

CreativeMind

unread,
Aug 19, 2018, 12:25:52 PM8/19/18
to DroidScript
What should I make of the return on the pinterest one? What does that mean?

I tried testing the code you provided in droidscript and a white box covered most of the screen, not even allowing me to see the social shares. Why do you think that would happen? Did I copy it wrong? Or is webview a problem?

BareK

unread,
Aug 19, 2018, 12:54:54 PM8/19/18
to DroidScript
Try sharing your whole .spk

If you don't know how to do it:

Long press on your app icon in the Droidscript list, then select 'Save SPK'.
It will then be stored in the 'SPKs' folder of DroidScript.

CreativeMind

unread,
Aug 21, 2018, 7:28:56 PM8/21/18
to DroidScript
 I made 2 spks so that you could see what I am doing under two circumstances. The webview seems to get rid of all of my content and leave some of the share buttons when I run it. Then the basic social shares without webview seems to entirely ignore my display:block placement. Could you please clarify why the buttons would be clickable at one point, but not another? In regards to the twitter button, what would I have to change to make it viable? I would like the pinterest button, but it is not a huge loss if I do not keep it. I mostly want these to work and be responsive. When I build apks I find that my title loses its font and the social share buttons are too big (I use droidscript on a tablet and then test on a phone). Let me know if you need any other code from me.
Social shares.spk
Social shares-webview.spk

CreativeMind

unread,
Aug 21, 2018, 7:31:24 PM8/21/18
to DroidScript
I think the reason the shares were not clickable was because I mixed css social share buttons and droidscript buttons for in javascript. Would that conflict with one another and should I switch to droidscript share buttons?

CreativeMind

unread,
Aug 23, 2018, 1:04:00 PM8/23/18
to DroidScript
Hey! I know I responded a bit late, but I'd really appreciate you giving me just a few minutes of your time to help me out

BareK

unread,
Aug 23, 2018, 1:44:38 PM8/23/18
to DroidScript
Thanks for the spks, it helped me to understand a bit more :)

Apparently you're using the HTML app template, so no webview is required (and in your second spk, it was useless).

I modified your first one so it should work well now.

For the twitter button, you have to use the web intent schemes:

For the CSS, I'm not an expert, but I think there are some clumsiness in it.
Maybe someone else could help on this.

For the Pinterest behavior, it seems to be an error from their side as the error is thrown from http://assets.pinterest.com/js/pinmarklet.js.

And finally for font sizes not consistent between tablets and phones, you should open another thread :)

<html>
 <head>
    <meta name="viewport" content="width=device-width">
    <script src='file:///android_asset/app.js'></script>

    <div class= title>The Title</div>
 <style>
    .title {
     font-size: 100;
        font-family: cursive;
        width: 100%;
        margin-top: 2em;
        text-align: center;
        color: white;

       
        .share-buttons {
            width: 35px;
            padding: 5px;
            border: 0;
            box-shadow: 0;
            display: inline;
            position: fixed;
            bottom: 0;
            display:block;
        }            
        .email {
            display:block;  
        }        
        .facebook {
            display:block;
        }        
        .google {
            display:block;
        }        
        .pinterest {
            display:block;
        }        
        .twitter {
            display:block;
        }        
 }
 </style>
 </head>

 <script>
    function OnStart()
    {
        console.log( 'application started' );

    }
    function Email()
    {
        var url = "mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://simplesharebuttons.com";
        app.OpenUrl( url );
    }    
    function Facebook()
    {    
        var url = "http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com";
        app.OpenUrl( url );
    }    
    function Google()
    {    
        var url = "https://plus.google.com/share?url=https://simplesharebuttons.com";
        app.OpenUrl( url );
    }    
    function Twitter()
    {

CreativeMind

unread,
Aug 26, 2018, 11:19:16 AM8/26/18
to DroidScript
For some reason, as soon as I add these socials in with droidscript buttons it takes away the ability to click on the buttons. Would you happen to know why?

Steve Garman

unread,
Aug 26, 2018, 11:25:52 AM8/26/18
to DroidScript
Buttons only support a subset of html.

If you look at the "Text Formatting" sample, you will see the following comment.
/*
The following basic Html formatting Tags are supported
within Text, Button and List controls. For more advanced
text formatting use a WebView control.

<a href="..."> <b>, <big>, <br>, <div>,
<font color="..." face="...">
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<i>, <img src="...">, <p>, <small>
<strong>, <sub>, <sup>, <tt>, <u>
*/

CreativeMind

unread,
Aug 27, 2018, 4:13:57 PM8/27/18
to DroidScript
Can you please tell me what you mean by a subset? Will droidscript buttons and CSS buttons not be capable of working on the same page?
Reply all
Reply to author
Forward
0 new messages