Add fallback images for Share/Like buttons

[maxxcrawford]

Part of previous PR #266:

• [x] Add Like Button detection/replacement
• [x] Add Share Button detection/replacement
• [ ] Replace images with SVG versions of the images

Notes

• This only applies to the Facebook SDK-styled buttons.

Needing to setup similar attribute detection for Like and Share buttons from the FB docs:

• Documentation:
  • https://developers.facebook.com/docs/plugins/share-button
  • https://developers.facebook.com/docs/plugins/like-button
• Test pages:
  • Share Button Test Page
  • Like Button Test Page

Example Screenshots

[maxxcrawford]

Code cleanup:

function detectFacebookLoginButton () {
  // TODO: Refactor detectFacebookLoginButton to add HTML badge instead of class/psudeo element
  // Test for standard implementation (Example: Facebook Docs)
  const loginButton = document.querySelectorAll(".fb-login-button");
  for (let item of loginButton) {
    const fbcClassResetArr = ["fbc-overlay-small", "fbc-overlay"];
    const replacementClassArr = ["fbc-loginButton"];
    replacementClassArr.push("fbc-size-" + item.getAttribute("data-size"));
    replacementClassArr.push("fbc-button-type-" + item.getAttribute("data-button-type"));
    // Remove previous detection classes
    item.classList.remove(...fbcClassResetArr);
    // Add declared size values
    item.classList.add(...replacementClassArr);
    // Remeasure elements and add correct badge size
    item.classList.add(...itemWidthCheck(item));
  }
}

[maxxcrawford]

Issues for this include:

• L10N/Language support
• New Facebook designs