After the release of version 2.0.0, we began seeing some sites in which Social Warfare buttons were “invisible” on the page. This is due to a number of Javascript improvements we’ve made to the plugin that enhance both the user experience and overall performance.
Unfortunately, not every developer writes Javascript with the same standards, and this causes an occasional conflict.
In each case where the share buttons are invisible, we’ve seen a few different scenarios play out. This guide will help you identify what exactly is happening in your instance.
Check the Console
First, check your browser’s console (in Chrome or Firefox) by right-clicking anywhere on the page and select “Inspect Element.” Upon doing so, the developer tools for the browser will open.
Locate the Console tab and click on it. This will list any errors. It will say something like:
blahblah.outerHTML is not a function
This error can be caused by any of the following three scenarios.
Scenario 1: You’re not on the latest version.
You are using an old version and need to update to 2.0.5. You can update by going to your WordPress Dashboard and hovering over the Dashboard menu tab and clicking on the Updates page.
If you do not see an available update for Social Warfare, do the following:
- Go to
Pluginsand Deactivate and then Delete the current install of Social Warfare - Now click on the
Add Newbutton in the Plugins page and search for Social Warfare - Install and Activate and you’ll now have the most current version with all your previous settings returning
- Be sure to clear all your caches, CDN or CloudFlare if you use them
You can, of course, also download the latest file yourself from your Account page and upload it via FTP if you’re more comfortable with that method.
Scenario 2: jQuery is being called more than once on the page.
Check if jQuery is being enqueued both before and after the script for our plugin is being enqueued. You can check this by right-clicking anywhere on the page and selecting View Source.
Once the source code is showing, press CTRL+F and type out the word jQuery. Check if it is being linked into the page more than once.
Why would this matter? jQuery has in it the ability to create new jQuery functions. In fact, we use a custom jQuery function in our plugin. So if jQuery, for example, offers 200 functions to us, I’ve now declared a 201st function that meets the needs of our plugin.
However, the browser is saying that my function doesn’t exist. Here’s why:
- The jQuery function library got built on the first jQuery request. The one built into WordPress.
- Then I declared the new functions that we need for Social Warfare.
- Then your second request for jQuery deleted the existing library (including our custom functions) and rebuilt the jQuery library from scratch effectively deleting the function that we need.
- Then Social Warfare attempted to use the function (to size and show the buttons) but the function didn’t exist so it threw an error and the buttons stay hidden.
It is always a highly discouraged practice to include jQuery libraries directly on a WordPress page. Instead, plugins and themes are supposed to use an enqueue function that calls the version of jQuery that is built directly into WordPress.
Since WordPress bakes a specific version of jQuery directly into it’s core, thousands of plugin and theme developers (including us) know exactly what version of jQuery with which I need to make our plugin compatible.
When someone manually includes a different version, it will almost always lead to conflicts. Either the one that I showcased above, or other similar conflicts because other plugins are relying on functionality in one version that may be different in the version being manually pulled in.
That being said, if you identify a plugin that is manually pulling in a secondary inclusion of jQuery, avoid it like the plague.
Scenario 3: A Minification Plugin is renaming functions or variables that cannot be renamed.
The site is using a minification process that renames functions. I’ve seen some caching plugins that literally rename the functions in our plugin.
The problem is that some of the functions (primarily the jQuery function) cannot be renamed. It literally must be named jQuery because it relies on the jQuery library.
If renamed, it ceases to reference the jQuery library and immediately breaks. Simply add /wp-content/plugins/social-warfare/script.min.js to the list of files in your caching or minification plugin to be excluded from minification and it should fix it.
Our javascript files are already highly minified so you don’t need to worry about excluding it from further minification processes.
