Detect Facebook Comments Plugin Blocking

A Quick Tutorial

by — Posted in Tutorials on August 18, 2014 - with views

Freelance Desk

Recently, when developing my new portfolio, I needed to figure out how to detect whether or not the Facebook Comments Plugin was being blocked. Here's how I did it.

There are a number of reasons that the Facebook Comments Plugin can be blocked. Perhaps an adblock extension or the Disconnect plugin is installed in a user's browser. Personally, I use the Disconnect plugin. This plugin is wonderful, but it does block the Facebook comments plugin embedded on many sites, mine included. I wanted to display an alert to the user letting them know that they have a plugin blocking the comments, and to whitelist my site if they'd like to comment.

At first, I stupidly spent time trying to detect the plugin via JavaScript. While that worked, it was not a smart solution. Reason being, I would have to know about, and write code to detect, every plugin that could block the Facebook comments. Clearly that is inefficient and not an intelligent way to go about things. I goofed. At least I learned how to detect certain plugins/extensions.

I realized that I could simply detect if the Facebook object was loaded. Brilliant! Except not. For some reason, the generally accepted method was unreliable for me. This left me with no choice but to examine the DOM for the Facebook comments. Quick note: my solution uses jQuery, but you could easily use vanilla JavaScript. Additionally, I'm using a few Twitter Bootstrap classes. Here are the steps I took:

The Steps

  1. Create an updateFacebookCmnts function to init on page load.
  2. Set a timeout of 500-1000ms to give the FB object time to load up the iframe.
  3. If the .fb-comments element doesn't have the .fb_iframe_widget class, then we know it's not loaded, so we can continue adding our warning message; if the .fb-comments element does have the class .fb_iframe_widget, then we can remove our custom warning if it is present.
  4. Assuming the .fb-comments element doesn't have the .fb_iframe_widget class, we would create a variable to contain our HTML markup which will make up our alert.
  5. Add the HTML markup variable content via the .before() method before the .fb-comments element.
  6. Be sure to init the updateFacebookCmnts function when all is said and done.

The Script

There are a number of ways this script can be improved. Working more with the Init method on the Facebook object to more consistently detect the object init would be one of them. In any event, I hope you've found this mini-tutorial useful! Feel free to comment on or fork the gist!

Thank you for reading.

I Would Love To Hear What You Have To Say

Comment using Facebook, Yahoo, AOL, or Hotmail below.

AngularJS Logo
jQuery Logo
FuelPHP Logo
Wordpress Logo
Bootstrap Logo
Github Logo

Web Design

I specialize in beautiful, clean, and usable web design. Perfect for businesses, organizations, and and online stores looking to maximize engagement.

Application Development

Have an idea a little larger than "a website?" Well, a webapp might be the perfect solution. I focus on standards-based, object-oriented programming.

eCommerce

eCommerce websites need to be comprehensive, intuitive to search and navigate, and mobile friendly. If it's time to make money selling, I'm your guy.

Consultation

Not sure exactly what you need? With my experience, I can serve as a valuable asset to your business or team in the form of consultatory services.

Marketing

Interested in developing out your brand further? Online marketing and advertising can yield high dividends in your brand awareness and saturation.

Strategy

Many wonderful ideas are large and need proper planning and execution. Together, we can determine set phases to deploy your business's online presence.

View More Services

Completely Free! Privacy guaranteed.