jquery Hide Facebook divs if Facebook is blocked

[wrack]

Hi,

 

I am working on a small site http://www.hagglehive.com and I want to use Facebook follow, like, share & comments plugin. http://www.hagglehive.com/en-au/Haggle/Detail/Lumia-930-Green-4G-Lte-32Gb-On-25-Aug-2014-Price-549-221 page has all of those plugin added.

 

I am using ASP.NET with .NET Framework 4.5. Below is the code at the bottom of the master page. 

<!-- Facebook Scripts -->
<div id="fb-root"></div>
<script>
	(function (d, s, id) {
		var js, fjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(id)) return;
		js = d.createElement(s); js.id = id;
		js.src = "http://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
		fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
</script>

Below is one of the div where follow button should show up. 

<div runat="server" id="divFacebookFollowButton" class="fb-follow RoundBorder FacebookFollowButton" data-href="//www.facebook.com/HaggleHive" data-width="100%" data-colorscheme="light" data-layout="standard" data-show-faces="false"></div>

What I want to do is, hiding all Facebook related DIVs first and then using jQuery Ajax, I am trying to connect to Facebook and see if the result is a success. If so then I make them all visible. This is the part I am struggling with.

$(document).ready(function () {
    // Hide facebook divs first
    //$(".fb-follow").hide();
    //$(".fb-like").hide();
    //$(".fb-comments").hide();
    // Check if facebook is blocked
    setTimeout("ShowFacebookIfAvailable();;", 2500);
});

In the above call, I have commented out the part where it hides all divs first. So it is all working now and you can see Facebook div at the top but if I uncomment them then nothing shows up.

 

Below is the function "ShowFacebookIfAvailable".

function ShowFacebookIfAvailable() {
    window.jQuery.support.cors = true;

    $.ajax({
        type: 'HEAD',
        url: 'https://www.facebook.com',
        crossDomain: true,
        success: function (data, textStatus, jqXHR) {
            $(".fb-follow").show();
            $(".fb-like").show();
            $(".fb-comments").show();
        },
        error: function (jqXHR, textStatus, errorThrown) {
        }
    });
}

Any help would be good as I am stuck here.

 

BONUS : What I would ideally like is, first check if Facebook is blocked and only load the JS if not blocked, saving a little download and improving the performance a little. Not sure how to do this though!

 

Cheers :)

[Seahorsepip Veteran]

kinda simpler method:

$(function() {
    var fb = new Image();
    fb.onload = function () {
        //facebook isn't blocked
    }
    fb.onerror = function () {
        //facebook is blocked
    }
    fb.src = "http://facebook.com/favicon.ico";
});

This code actually does not require jQuery but I used it anyway since I'm too lazy to write the js equivalent of $(document).ready

[wrack]

This code actually does not require jQuery but I used it anyway since I'm too lazy to write the js equivalent of $(document).ready

 

Thanks :). That works a treat. Appreciate it.

 

One quick question. I see you used "var fb = new Image(); " to retrieve an image (icon). What type of variable to use if one were to check if a JavaScript can be accessed instead of an image?

[Seahorsepip Veteran]

Thanks :). That works a treat. Appreciate it.

One quick question. I see you used "var fb = new Image(); " to retrieve an image (icon). What type of variable to use if one were to check if a JavaScript can be accessed instead of an image?

You can try the following code.

Though it might be a problem with domains that block requests from other servers like facebook for certain files and pages(as example you cant put facebook into a iframe on a website).

$(function() {
    var url = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";
    var jsfile = new XMLHttpRequest();
    jsfile.onerror = function() {
        alert("blocked");
    };
    jsfile.onload = function() {
        alert("available");
    };
    jsfile.open("GET",url);
    jsfile.send();
});
 

[wrack]

You can try the following code.

Though it might be a problem with domains that block requests from other servers like facebook for certain files and pages(as example you cant put facebook into a iframe on a website).

 

Yeah that makes sense to block certain things. I was asking this to do the same thing for the Google Ad as well as Google Analytics. Try to get the JS and if good then load the rest of the script.

 

So here is 1 more question (hopefully final and I hope you don't mind). Let's say it was successful in getting the file so I get into the onload function. How do I then use that object to inject into the webpage rather then reloading it again?

[wrack]

Ahh never mind. Found it. I can do eval(). Looks like this can open my code up to xss attacks. Not going to do it for now then.

 

Thanks for all your help mate.

[Seahorsepip Veteran]

Ahh never mind. Found it. I can do eval(). Looks like this can open my code up to xss attacks. Not going to do it for now then.

 

Thanks for all your help mate.

Never load code from untrusted domains and always make sure to load them trough https to prevent js xss attacks on your users.

[wrack]

That's true. I was going to load google analytics so hopefully it would be safe but you never know with crafty peoples.

[Seahorsepip Veteran]

That's true. I was going to load google analytics so hopefully it would be safe but you never know with crafty peoples.

As long you get the analystics js from the official https source and not from a suspicious mirror it shouldn't be a problem. When you use https instead of http it's no longer possible to do any man in the middle attacks, given that the website and it's certificate can be trusted. But the website itself that is serving the js can still be hacked though in case of google analystics I'd more worried about the fact that google is hacked then the malicious js that is being served to your website.

 

So simply said, if you load official js libraries from facebook, google, yahoo, microsoft etc It should be fine as long you use a https url. Also malicious js should never be able to harm your website itself, it should only be able to harm your visitors by showing ads as example.

[wrack]

Thanks. I will use https then.