• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Hide Facebook divs if Facebook is blocked

Question

wrack    455

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 :)

Share this post


Link to post
Share on other sites

9 answers to this question

Recommended Posts

  • 0
Seahorsepip    610

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

Share this post


Link to post
Share on other sites
  • 0
wrack    455

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?

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

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();
});
 

Share this post


Link to post
Share on other sites
  • 0
wrack    455

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?

Share this post


Link to post
Share on other sites
  • 0
wrack    455

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.

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

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.

Share this post


Link to post
Share on other sites
  • 0
wrack    455

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

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

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.

Share this post


Link to post
Share on other sites
  • 0
wrack    455

Thanks. I will use https then.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.