Search code examples
javascriptangularjsmobileionic-frameworkaddthis

My addthis toolbox JavaScript widget not present on mobile device


I'm using Ionic v1 and testing in Chrome (ionic serve) and View App (ionic upload).

I included this script in my index.html

<script src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=foo&async=1"></script>

And added the https://github.com/thisissoon/angular-addthis directive.

<sn-addthis-toolbox class="addthis_custom_sharing"
                data-share="{
                    title: thing.title,
                    url: 'https://myurl/' + thing.id,
                    description: 'Check out my thing.'
                }">
  <a href class="addthis_button_email"></a>
  <a href class="addthis_button_facebook"></a>
  <a href class="addthis_button_twitter"></a>
  <a href class="addthis_button_google_plusone_share"></a>
</sn-addthis-toolbox>

When viewing my ionic app in Chrome or firefox everything looks great. When i push to Ionic view my addthis buttons are missing. In Chrome Dev Tools, things look great with any responsive view or device.

Any direction would be helpful here. How would i see error messages in Ionic view?

Why is the addthis.com js widget not working on mobile device?

TIA.

EDIT: I added the https and that got things a step further. (thanks to adamdport)

Now seeing Failed to load file://m.addthisedge.com/live/boost/foo/_ate.track.config_resp resource: NET ERR_FILE_NOT_FOUND

and

Uncaught TypeError: Cannot read property 'split' of null at r (https://s7.addthis.com/js/300/addthis_widget.js:2:44431) at e.exports (https://s7.addthis.com/js/300/addthis_widget.js:2:211271) at https://s7.addthis.com/js/300/addthis_widget.js:2:224158 at https://s7.addthis.com/js/300/addthis_widget.js:2:361724 at o (https://s7.addthis.com/js/300/addthis_widget.js:2:223353) at https://s7.addthis.com/js/300/addthis_widget.js:2:215504 at HTMLDocument.onReady (https://s7.addthis.com/js/300/addthis_widget.js:2:214257)

on addthis_widget.js line 2

FINAL EDIT and solution: The best way i learned to solve this problem was to hook up my Nexus 6p via usb, enable usb debugging, and https://developers.google.com/web/tools/chrome-devtools/remote-debugging/


Solution

  • I resolved your original question regarding why your script wasn't loading: it involved your usage of // and switching between http and https. If your Ionic URL uses https://, the // in your script src will try to also retrieve your script using https, and it might not load.

    Since you've edited, I've pointed out that file:// will only work on your local file system. If you try to reference it from a server, it will still try to load resources from the client's machine.

    If you need further help, I'd suggest posting another question.