Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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/

like image 578
Kirby Avatar asked Oct 29 '16 01:10

Kirby


2 Answers

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.

like image 185
adamdport Avatar answered Oct 23 '22 21:10

adamdport


First of all as Ionic view does not support all the third party plugin so you have to build it first and test in real device. But I am not sure this will work. Because Add this share on website not app and as you are developing an app so you have to think like an app developer not like web developer. When you share something from website it will post into the social app's website. But when you share something from app it will post into the social app.

So in my suggestion if Add This still work on your real device, though you should not use this because as you are using Ionic so you have to share on app.

like image 1
Bik Avatar answered Oct 23 '22 22:10

Bik