jQuery Lazy not loading images after I click the Facebook Connect button - javascript

I implemented jQuery Lazy: http://jquery.eisbehr.de/lazy/. Everything works correctly except for one thing: When I click the Facebook Connect button, the images remain blank. After I click around, they come in as usual.
I have noticed that when I click the Facebook Connect button to log in, the URL in the address bar changes from [My URL] to [My URL]/#_=_. The Facebook Connect implementation does something that prevents the jQuery Lazy images to load unless I click around after this Facebook login. I have not found online anybody complaining about this. I thought it would be a common and addressed bug. Any ideas about why this could be happening?
UPDATE 1: When I visit [My URL]/#_=_ without using Facebook Connect at all, jQuery Lazy does not work either, the images remain blank. What happens is that when I click around, this #_=_ that is appended immediately after I log in with Facebook, gets removed. What I am seeing is that the problem is this #_=_ that Facebook Connect puts at the end of our URL. I see this situation is discussed at Facebook Callback appends '#_=_' to Return URL and the logical thing to do would be to get rid of the #_=_ but not without studying first the implications of doing that.
UPDATE 2: I followed Gorgi Rankovski's comment to Ryan's solution at Facebook Callback appends '#_=_' to Return URL and used this in my head tag:
<script type="text/javascript"> var idx=window.location.toString().indexOf("#_=_"); if (idx>0) { window.location = window.location.toString().substring(0, idx); } </script>
Now [My URL]/#_=_ becomes [My URL]/, which is what I wanted. Nonetheless, this did not fix the problem about the jQuery Lazy images not loading after clicking the Facebook Connect button.
UPDATE 3: I tried https://appelsiini.net/projects/lazyload/ instead of http://jquery.eisbehr.de/lazy/ for lazy loading images, two different plugins for lazy loading images, and both of them experience the same bug when using Facebook Connect.

I experienced a similar bug using Slick carousel (Pictures of Slick carousel do now show only after coming back from a successful Facebook Connect). I guess upgrading the Facebook PHP SDK (v.3.2.3) to something newer might help. For now I am not using jQuery Lazy anymore after not finding a fix for this bug yet.

Related

WordPress timeout error ('Articles' admin link + WPML)

In my WordPress admin when I am inside a single article in the admin panel, and I click on the 'Articles' link on the left menu, I get my a timeout in my browser. This is very strange, because it happens ONLY when I click on that link inside an article: it doesn't happen when I click it from other sections of the panel, as when I'm in the dashboard or plugins section and I want to go to articles.
The second error I receive is when I click the 'Duplicate' button inside a post to translate that content in another language. The result is the same, 5 minutes loading and timeout error which leads to crash of the browser.
All plugins are updated, as well as the WordPress version. I have already tried to disable and activate each plugin one by one and this error comes anyway, also with all plugins disabled!!
I think it's not about WordPress version or plugins but it's like there's something which the system can't manage loading inside the article...I really can't figure out any solution.

Minor issues with a Google API Project

I'm encountering two problem with my Google API Project.
First, I've been working with this project for several weeks but the past couple days I have started seeing this error in my console. Everything works fine, I just get this annoying message.
Unknown RPC service: _noop_echo cb=gapi.loaded_0:71
Secondly, I get this new dialog that keeps fading in but I don't know how to disable it. It appears for a couple seconds and then fades out.
I originally had the Google+ API turned on for my project but I turned it off since I only needed the Google Drive API and SDK. I thought these problems may have started after turning the Google+ API off in my project but turning it back on has no effect.
Google just fixed a bug. You should no longer see the message unless you are using the plus.login scope.
That message is intended for users that have signed in with Google+ Sign-In, but was appearing more often than designed.
Ok, I finally figured out how to prevent the new "Welcome back" dialog from appearing. I just added the following line of code in my handleAuthResult function from the docs here.
https://developers.google.com/drive/auth/web-client
function handleAuthResult(authResult) {
...
$("iframe").hide();
}
The "Welcome back" dialog is an iframe wrapped in a few divs. The problem is the ID for the iframe appears to be randomly generated and there are no IDs used in the parent divs. My project doesn't use any iframes so just hiding all iframes does the trick.

Facebook 'Like' Dialog Appears and Immediately Disappears

I've been having an issue with the Facebook Like button for quite some time. I've looked all over for a solution but am quite stuck. The error occurs on my site www.MapYourVote.com. When you go to a poll page and click 'Like' the dialog appears and quickly disappears. At the same time, the counter also goes to 1 and quickly goes back to 0.
The problem is always solved for individual poll pages by using the Facebook Debug tool (http://developers.facebook.com/tools/debug). Once you use it on the url, the like button will work as expected. The issue is my website is dynamic and I can't use the Facebook Debug tool every time someone creates a new poll. The Facebook Debug tool does not reveal any problems (apart from og image size but I doubt that's the issue).
Here is an example of a page in which the Like button does not work. If you were to enter this url into the Facebook Debug tool, the Like button would work.
http://www.mapyourvote.com/Poll/Election-Result-Feelings/
Any help would be much appreciated!
I also had this problem. I was constructing a referrer url to give link-sharers a credit, so there was a different url for each user that wanted to share something. The referrer link would give the user credit and redirect to the login page of my site. With this configuration, the like dialog would appear for a moment and then disappear again, unless I went to facebook's debug tool.
What fixed the problem for me was to change from a redirect to rendering the page directly from my referral link. In fact, I changed the referral link to be a ?r=refid parameter on my root page URL. It appears to work correctly if facebook doesn't have to follow a redirect to get the og: data.
I had a similar problem and it turned out I had too restrictive cookie policy set in my browser - I only allowed Facebook to use 1st party cookies. When I allowed Facebook to use other cookies, the problem was solved. It's hard to debug when no error appears other than the immediate pop-up closeup.
I had the same problem. It was caused by url value in data-href attribute. I had there url pointing to my localhost.
When I changed the url to existing one, problem was solved.
Hope it helps
For me, the problem (Like popup disappearing after a second) was happening when the Like button URL redirected to another URL.
The fix was to add og:type, og:url, and og:title (required per https://developers.facebook.com/docs/reference/opengraph/object-type/website), then running the URL through the Facebook debugger to clear the cache (https://developers.facebook.com/tools/debug).
More at https://stackoverflow.com/a/16597060/2391566

Facebook FB.login() Popup Won't Close in IE8

I've searched for answers to this -- seems like all the answers relate to the old Facebook API so the solutions are no longer relevant.
The problem I'm having: I've got a custom Facebook tab which has a button on it that, when clicked, triggers FB.login(). The way it should work is: user clicks to log in, popup comes up to authorize the app, user clicks authorize, the popup closes. This flow works correctly on all browsers except IE8 and below. On IE8, the user clicks to log in, the popup comes up to authorize the app, the user clicks authorize, then the content INSIDE the popup refreshes with the content from the redirect URL. Needless to say, this is not the desired experience for IE8 users :(
I've tried everything I could find: doublechecked that there are no javascript errors, ensured that there is a valid channel file, etc. Nothing appears to fix it. Everything is happening through secure (https), so I'm not sure if that has anything to do with it.
I've been trying to fix this for DAYS now; any help would be GREATLY appreciated!
Make sure fb-root element is only once in your page , I have faced this issues and when i made sure that fb-root div is only once the issue got resolved
You should specify a p3p header in all responses from your web server. Please see: http://www.hanselman.com/blog/TheImportanceOfP3PAndACompactPrivacyPolicy.aspx.
By "the content INSIDE the popup refreshes with the content from the redirect URL" do you mean that you are passing a redirect URL? If so, don't do that. The popups work using some cross-domain JavaScript magic with a specially constructed redirect URL. If you put your own, then the popups may break.
Also, make sure you're setting a proper channelUrl when you call FB.init().

Facebook Like And Twitter Tweet Load Slow

I have put a facebook like, facebook send, and twitter tweet button 10 times on my web page (1 for each article in my thread), but yet the page loads very slowly. Right now the site is just running on my local XAMPP stack but when I comment out those widgets, the page loads instantaneously. Otherwise it takes like 10 seconds to load.
It would be helpful to see the code to make sure you are applying it correctly, but I've experienced similar symptoms before. The way I would render it is by having the associated external Javascript files just before your </body> tag and not in your head. If the connection to the external host is slow, it can cause parallisation issues so you want to load it last.
This is happening all over the web lately. I'll see a slow-loading page and sure enough at the bottom there's a note that facebook or twitter is still loading.
The solution I found was an extension that shows the FB, Twitter buttons but doesn't actually load them unless you click the button. That way your page loads quickly and if FB or Twitter is slow that's their problem.
I use Sharrre for social sharing buttons. I activate it on mouseover so nothing is loaded until the user actually needs it. Hard to get it faster than this. It also supports a few other networks.
I don't load social sharing buttons directly anymore and only do it when there is no other option. Those things are horrible for loading times specially if used multiple times on the same page.

Categories