• 0

Hide Facebook divs if Facebook is blocked


Go to solution Solved by Seahorsepip,

Question

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

Link to post
Share on other sites

9 answers to this question

Recommended Posts

  • 0
Seahorsepip

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

Link to post
Share on other sites
  • 0
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?

Link to post
Share on other sites
  • 0
Seahorsepip

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();
});
 
Link to post
Share on other sites
  • 0
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?

Link to post
Share on other sites
  • 0
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.

  • Like 1
Link to post
Share on other sites
  • 0
Seahorsepip

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.

Link to post
Share on other sites
  • 0
wrack

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

Link to post
Share on other sites
  • 0
Seahorsepip

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.

Link to post
Share on other sites
  • 0
wrack

Thanks. I will use https then.

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
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Jefferson Mangubat
      Instagram now lets you go live for up to four hours
      by Jefferson Mangubat



      Instagram has rolled out a few changes to its live video feature that should provide content creators the option to stream live videos for a longer duration on the platform. The service is also updating how long you can save those live videos to your archive.

      In a tweet, Instagram says you can now go live for up to four hours. The change is a remarkable extension from the previous one-hour limit and is in line with Facebook's limits for streaming live videos on mobile. It's rolling out to all users worldwide from today, although only those with no record of intellectual property or policy violations can use it (via Engadget).

      In addition, you can save and view your own live streams in your private archive for up to 30 days after broadcast. After that timeframe, the videos will be removed. It's the same feature that you can use to archive Instagram Stories and posts.

      Finally, Instagram is adding a “Live Now” section in the IGTV app and on the Explore tab to let you find more live videos.

    • By Ather Fawaz
      Facebook launches 'cloud-streamed' games for Android phones and PCs but eschews iOS
      by Ather Fawaz



      After reports started surfacing last week that Facebook is launching a dedicated gaming app, the firm has almost made good on that promise. Today, Facebook has launched a cohort of 'cloud-streamed' games that are playable via the Facebook app on Android or the desktop on a modern browser. Like traditional cloud-based gaming services, these games will be available to play right out of the box, without the need to download and install them separately. But while the venture seems like a take on a cloud-based gaming service, Facebook insists that it is not a spin-off or its own take of the same:

      The service will be launching in beta today on Android and Web here. This first array of games includes renowned titles like Asphalt 9: Legends, Mobile Legends: Adventure by Moonton, PGA TOUR Golf Shootout, Solitaire: Arthur’s Tale, and WWE SuperCard. Facebook has promised that Dirt Bike Unchained will be added sometime in the future, along with other titles. Cross-play between games with integrated Facebook Login and the downloaded version of the same game will also be enabled.

      For the first time, you will also be able to customize your own avatars and player names that will show up when you're playing these games. This means that instead of your profile picture and full name appearing representing you, the custom avatar and player name will. Facebook is also launching Cloud Playable Ads on Android and iOS in the United States, which will now support interactive demos from a game’s native code. Some changes to the Gaming tab have also been introduced to improve user interaction and engagement.

      These new cloud-streamed games will run in tandem with the usual HTML5 games that over 380 million people play each month on the website currently. And it is supposed to be a seamless switch between the two formats. However, there's one caveat for now; these apps can run on Android mobile devices but Apple devices rocking iOS and iPadOS aren't supported due to certain problems with App Store guidelines.

      This will leave support for iPhones and iPads an inclusion for the future, if at all. Apropos this, the Vice President of Facebook Play, Jason Rubin remarked, “We’re not on iOS right now, which is a big problem for us. We are barred from having Facebook launch the browser and play the game.” He further added that "Apple treats games differently and continues to exert control over a very precious resource."

    • By zikalify
      Pakistan PM Imran Khan asks Facebook for stricter rules against Islamophobia
      by Paul Hill

      Pakistani Prime Minister and former cricketer, Imran Khan, has written an open letter to Facebook CEO Mark Zuckerberg asking for a ban on Islamophobic content on Facebook. The Prime Minister said that Facebook should clamp down on Islamophobia as hard as it does with Holocaust denial.

      As things stand right now, Facebook does include Islamophobia as hate speech and is against the platform’s community standards, however, Khan highlighted that cartoons had been allowed to be posted on Facebook without repercussions despite being viewed as blasphemous in Islam - Khan called it Islamophobic.

      In his letter, Prime Minister Khan said:

      The Pakistani government has been focused a lot on social media in the last several weeks. Earlier in the week, the government reversed its TikTok ban after initially raising concerns about “immoral” content. The block was lifted after the Chinese firm gave assurance to Pakistan’s government that it would ban immoral content. While Khan didn’t mention blocking Facebook if it did not act, there is precedence for a future ban.

    • By Usman Khan Lodhi
      Facebook launches its dating service in Europe
      by Usman Khan Lodhi



      Facebook Dating, which launched in the U.S. last year, is now expanding its services to 32 European countries. The rollout was originally planned on Valentine's Day, but regulatory concerns caused the long delay.

      Ireland's Data Protection Commission (DPC) stated that it hadn't received prior information about the planned launch, and was informed about the February 13 launch date on February 3. In addition to being given the short notice, the DPC wasn't given documentation concerning the Data Protection Impact Assessment, the regulator said.

      The service, integrated with the rest of the firm's products, appears as a tab in Facebook's mobile app. It is able to pull users' stories and photos from Instagram, and users can initiate video calls via Messenger once they match. There is also a Secret Crush feature that searches your Instagram followers and Facebook friends for potential matches.

      The service is presently available in over 50 countries, which now include Austria, Belgium, Bulgaria, Cyprus, Czech Republic, Denmark, Estonia, Finland, France, Germany, Greece, Croatia, Hungary, Ireland, Italy, Lithuania, Luxembourg, Latvia, Malta, Netherlands, Poland, Portugal, Romania, Sweden, Slovenia, Slovakia, Iceland, Liechtenstein, Norway, Spain, Switzerland, and the United Kingdom.



    • By Abhay V
      Facebook is working on a new 'Neighborhoods' feature aimed at private, local networking
      by Abhay Venkatesh



      Facebook is working on a new ‘Neighborhoods’ feature for the service that aims at connecting users that live close by and for them to socialize within their locality. The feature is supposedly being aimed as a rival offering to services like Nextdoor, which is currently eyeing a $5 billion IPO.

      While some leaked screenshots of the feature made it to Twitter back in May, the social networking giant has confirmed to Bloomberg that it is indeed testing the feature in a limited capacity in Calgary, Canada. “More than ever, people are using Facebook to participate in their local communities,” said a spokesperson in a statement to the publication, adding that the Neighborhoods feature is a “dedicated space within Facebook for people to connect with their neighbors”.

      Social media consultant Matt Navarra shared some screenshots of the feature on Twitter, providing some insight into the setup process and the feature itself. The app confirms users’ location to set their locality and a profile, after which it offers posts, groups, and content from other users in the neighborhood. Interestingly, Navarra adds that users can create profiles for other users to see even if they are not their Facebook friends.

      With Neighborhoods, Facebook aims to bring more private conversations between users of a community, something it has been working on through private groups and the like. However, the firm reminds users through the setup process that all its Community Standards are applicable in Neighborhoods as well, prompting users to be “inclusive”, “kind”, and “clean”. Users are also offered dedicated privacy options for their Neighborhoods, with the option to also switch between or leave these groups altogether.

      It will be interesting to see how the company evolves the feature and expands it to more regions. With close to two billion active users monthly, the adoption of such a feature could be much quicker than that of other smaller companies. The impact on rivals like Nextdoor that offer a “private social network” will also be interesting to keep an eye on.

      Source: Bloomberg