Ionic: Disqus embed loads locally, but not in production (or on an emulator) - ionic-framework

I've built a simple Android app, as a companion piece to a publication website, with the Ionic framework, and (after much head-banging), I managed to get the Disqus threads on the app to sync with those on the site. After trying a few different methods, I ended up going with this directive from Michael Bromley to implement the Disqus widget in the app, which is hiding behind a "Comments" button at the bottom of each article on the app's UI.
Running with Ionic Serve, everything works brilliantly. Outside of the local server: not so much. I don't get an error message from Disqus – it simply doesn't load the iframe at all. I'm refraining from posting code, because I'm wondering if this is simply a CORS issue, or maybe something simple that I'm overlooking.
One thing that might be of importance: I don't have the Crosswalk plugin installed on the app – I'm not sure if my thinking is correct, here, but could it be possible that Disqus is compatible with Chrome, which is why it runs fine when I'm testing it on my browser, but isn't compatible with Android's default browser? I'm not extremely well-read on Crosswalk, but I believe it tells the app to use a specific browser – if so, could installing it fix the problem? I'd go ahead and install it, and see if it helps, but I'd like to avoid tampering too much with an otherwise-working app if the issue is something completely unrelated to the plugins.
One weird caveat: The Disqus comments loaded on one article just fine when I tested the app on Genymotion. I deleted that article, and created a new Test article on my site (thus firing up a new Disqus thread), and that failed to render on Genymotion. It seems very... random, I guess, that it would work once. It would seem that it would either work all the time, or never work.
EDIT: While running on Genymotion, no errors appear in the console when debugging the app with WebView. The fact that I'm not getting a "Refused to load" error makes me think that Disqus is getting called and, for whatever reason, is refusing to answer the phone at all.

I can spend hours trying to figure something out, and then... well, as soon as I post a question, I end up figuring out the answer five minutes later.
I dug looked into the code for the directive I was using (which I highly recommend for anybody looking to easily implement Disqus into any AngularJS project), and I noticed that was calling for embed.js with the following string:
....
if (!$window.DISQUS) {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + scope.config.disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
} else {
....
Amending dsq.src = '//' + scope.config.disqus_shortname + '.disqus.com/embed.js';to add a protocol, making it dsq.src = 'http://' + scope.config.disqus_shortname + '.disqus.com/embed.js';fixed the issue on Genymotion. I'll ship the updated APK to the Play Store, and comment on this answer to confirm whether or not it holds up there, as well.

Related

Facebook is not initialized when using Facebook Login with React in Production

I love React, it has quickly become my favorite development tool. It is a fantastic library that creates the kind of flexibility I've always dreamed about.
That said, I'm having a very hard time getting Facebook login to work with React in production.
I have tried all of the following methods. In all three cases, I implemented the examples exactly as shown in the code using the simplest possible technique:
https://github.com/seeden/react-facebook
https://github.com/keppelen/react-facebook-login
http://jslancer.com/blog/2017/11/27/facebook-google-login-react/
Everything works great in development. :)
When I create the production build using create-react-app and push it live, it breaks and reports: Error: Facebook is not initialized or Uncaught TypeError: Cannot read property 'login' of undefined where undefined is FB.
Basically it seems like the Facebook javascript SDK is not loaded or initialized.
The first two links above are for existing component libraries, but the third is a custom implementation that places the Facebook initialization code in the index.html file and creates an event listener. The results are the same in all three examples.
It is as if something about the create-react-app compression method is obfuscating the variables to the point that Facebook can no longer work, or at least is not available to the react code. This includes all calls to window.FB as recommended in many tutorials.
I've been working at this for a couple of weeks now (off and on) and am now turning to the hive mind. Anyone have any ideas on how to get Facebook to actually work with Facebook's own code library (React)? It seems so painfully odd that it causes this much trouble and I have been unable to find a clear solution that works in production.
Most of the debugging steps are already mentioned in the comments section.
Here are the steps laid down:
1) Check the network tab in your browser's console and see if the request to load FB's SDK is successful or not
2) Most common culprit is some extension like Ad-Blocker blocking such async requests which loads JS on your web page. Disable it or try it incognito mode
3) Other common mistake I have seen is forgetting to use the FB.init({ // config }); function - which is the actual call which initializes the fb sdk and makes available the FB variable globally.

Facebook page is not loading properly in mx:html (Adobe AIR) outside IDE

Adobe AIR application which was working perfectly earlier; is not working now. No idea whether it is due to any recent change in Facebook or Adobe AIR.
I have added the component mx:HTML to display http://facebook.com content. In the development environment (Flash Builder 4.5) after logging in facebook successfully; I can see the TimeLine contents and updates properly. But after build when executed outside the IDE; I am able to login facebook but the timeline or updates are not being displayed properly.
Anybody facing similar issue and has a fix; please provide the solution.
uncaughtScriptException gives following two errors...
TypeError: Result of expression 'bigPipe' [undefined] is not an object.
ReferenceError: Can't find variable: console
I have similar issue, if you catch the javascript errors you will notice that facebook is using some library that fails in AIR, then if you google that exact error you will find similar issues. My solution was to use the FB API and reimplement the functionality(in my case share) , other alternatives is to fix that library or FB code to make it work. I don't remember the details but I fixed it a week ago.
Check the docs for catching the JS errors uncaughtScriptException
I am wondering if that library has code for each browser that it supports and on AIR it fails, maybe changing useragent will help, you need to check the javascript code to see where it fails

Facebook SDK for .NET - Security Warning Issue

everyone. Today I encounter the following message in my Windows Phone App:
Success
SECURITY WARNING: Please treat the URL above as you would your password and do not share it with anyone.
This happens when my users Login through the Web Browser Control, which get the Login URL from the GetLoginUrl method from the Facebook SDK for .net. This problem is not only happening in my Apps, I've seen users from other Apps having the same problem.
Anyone found a solution to this?
I'm running this SDK in my PictureWeather (Windows Phone 7 & Windows Phone 8) and Picture2Cams (Windows Phone 8) Apps.
Had the same problem. In my app I changed this line:
parameters["redirect_uri"] = "https://www.facebook.com/connect/login_success.html";
To this line:
parameters["redirect_uri"] = "https://m.facebook.com/connect/login_success.html";
And it works now.
Had the same problem on our WP8 app using the Facebook SDK for Windows Phone (http://facebooksdk.net/docs/phone/) and the indicated solution with changing the redirect URL also worked for us.
Thanks for submitting this solution.
I ran into this problem, myself, and did a bit of digging to get to the root of the issue. The problem seems to spring from some unknown (to me, anyway) change on Facebook's side, where previously the authentication response URL was in the form
https://www.facebook.com/connect/login_success.html#access_token= ...
for some reason it now comes back from the login flow as
https://www.facebook.com/connect/login_success.html#?access_token= ...
The code in FacebookSDK.NET does a comparison in line 104 of LoginPage.xaml.cs with a simple Uri equality test
if (e.Uri == WebAuthenticationBroker.EndUri)
which fails to return true when the question mark appears in the middle. I expect Facebook will correct this on their end just because too much stuff breaks, but in the meantime a pretty clean fix is to get the FacebookClient sources from GIT instead of NuGet and change the comparison to this
UriBuilder clean = new UriBuilder(e.Uri);
clean.Query = "";
if (clean.Uri == WebAuthenticationBroker.EndUri)
The code will then run just fine, but this is seems ultimately to be Facebook's bug when checking the documentation on their developer site.
I hope this helps some others, I signed up for Stackoverflow just to make this post. :)
Use latest facebook sdk for windows phone. This issue got resolved in latest sdk. I am using Facebook.Client 0.8.2-alpha and its working great. I followed http://nuget.org/packages/Facebook.Client and http://facebooksdk.net/docs/phone/controls/login-ui-control
I guess the only way he did this was by downloading both projects from their official Github (Facebook and Facebook.Client) and reference them in your app instead of using the DLL that you can get from Nuget.
With both projects in hand, you can change this parameters on the Facebook.Client Project in the file FacebookSessionClient. Then build all the project and run.
However this solution didnt work for me too.

window.CavalryLogger error in Facebook App running in Facebook Page Tab

I have applications which are displayed as tabs in Facebook pages which have been working fine. They suddenly started displaying this output in the tab:
/1336720089,176820405/
if (window.CavalryLogger) { CavalryLogger.start_js(["EgxV3"]); }
__d("UFIUpdate",
Any ideas what is going on???
Here is a link to one of them: http://www.facebook.com/TweakShoes/app_132692060112327
A temporary solution is to add https:// to facebook itself. This doesn't solve the problem, but it'll allow you to see your page on a per client basis.
The best fix in the longer term until facebook fixes this issue is to go to your account settings > Security > Enable secure browsing. This will enforce HTTPS wherever it can and should resolve the issue for a lot of pages you're trying to access.
Good Luck!
After encountering this issue yesterday, I tracked it down to an apparent conflict with the JS log wrapper included as part of HTML5 Boilerplate's script.js file. In particular, the "make it safe to use console.log always" snippet. After commenting it out, the FB lib error went away and my app displayed properly.
I didn't dig into what the conflict was, but here is the snippet. If you use something similar on your page, then it may be worth investigating.
/* make it safe to use console.log always */
(function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,timeStamp,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try
{console.log();return window.console;}catch(err){return window.console={};}})());
It's probably not a coincidence that FB's own logger bugs out with this.
Facebook has opened a bug for this issue and recently triaged it to medium priority - no word on when it will be addressed.

Has anything changed in the past ~48 hours that would break a legacy canvas app using require_login()?

Nothing has changed on my end (at least I don't think anything has), but all of a sudden I'm unable to launch my app (and users reportedly are unable to install/launch) which uses the legacy require_login() function from an old version of the PHP SDK.
When I go to apps.facebook.com/myapp, I'm brought into a redirect loop between that URL and http://mysite.com/myAppsCanvasURL.
I've Googled and found some old posts where people report similar behavior but it doesn't seem like there was any resolution, and I still have no idea what could have caused this to happen out of the blue.
Any help would be greatly appreciated.
Thanks!
dshap
Figured out the answer to my own question.
My app requires access to both the user's uploaded photos as well as the user's photo tags.
To do this, I was requesting the (previously) necessary permissions by calling:
require_login('user_photos, user_photo_video_tags');
According to this developer blog post, the "user_photo_video_tags" permission is not supposed to be deprecated until November 22nd, however if I use it right now it breaks my app - if I simply remove it, there are no issues and the app works as expected.
The weird thing is I'm not seeing any exceptions thrown, but then again I'm not seeing any exceptions thrown even if I do something like:
require_login('user_photos, fake_permission');
So maybe this has something to do with the out-dated version of the PHP SDK that I'm using.
Hopefully that helps if someone else out there is having the same problem.