Add headlines to Facebook Comment Moderation Tool

Some of the news sites I help manage (NewsAdvance.com, GoDanRiver.com, WSLS.com) have recently switched their commenting system to Facebook comments.

I like it a lot and so far our readers' reaction is mostly positive.

As a member of the team that moderates comments, though, one thing I don't like is that in Facebook's Comment Moderation Tool, the Admin/Moderator View has "Visit Website" links below each comment — but it doesn't tell you the headlines of the articles the links point to.

You can hover your mouse over the link to see the URL, but in our case it uses our own internal short URLs that have nothing more revealing than an ID number for the article.

I made a script for Firefox and Google Chrome to add article headlines to the "Visit Website" links in the Facebook Comment Moderation Tool.

You can see the added headlines in the screenshot below.

Screenshot:

Get the script:

For Firefox users, the Greasemonkey add-on is required.

For Google Chrome users, the Tampermonkey add-on is required (it will not work if installed as a native Chrome user script).

Once you have your browser of choice set up...

Download the Facebook Comment Moderation Tool Headlines script

After you've got it, go to Facebook's Comment Moderation Tool and click over to Admin/Moderator View.

You must be in Admin/Moderator View, not Public Comments view, to see the headlines.

After the page loads, the headlines should appear. There may be a delay of a few seconds because the script runs after the page loads, and it has to follow each "Visit Website" link and grab its HTML content.

Source:

// Released under the MIT license
// http://www.opensource.org/licenses/mit-license.php
// ==UserScript==
// @name    Facebook Comment Moderation Tool Headlines
// @namespace   http://mattbusse.com
// @description   Appends story headlines to Facebook Comment Moderation "Visit Website" links
// @include   http*://developers.facebook.com/tools/*
// @version   1.0
// ==/UserScript==

var allLinks, visitWebsiteLink, expr, visitWebsiteLinkURL,
  visitWebsiteLinkPage, pageTitle, pageContent, title;

// grabbing URLs
function fetchPage(visitWebsiteLinkPage, targetLink) {
  GM_xmlhttpRequest({
    method: 'GET',
    url: visitWebsiteLinkPage,
    onload: function(response){

      // get the HTML content of the page
      pageContent = response.responseText;

      // use regex to extract its h1 tag
      pageTitle = pageContent.match(/(.*?)/g)[0];

      // strip html tags from the result
      pageTitle = pageTitle.replace(//g, '');

      // little bit of cleanup - ampersands and apostrophes
      pageTitle = pageTitle.replace(/&/g, '&');
      pageTitle = pageTitle.replace(/'/g, "'");

      // append headline to Visit Website link
      title = document.createElement('div');
      title.style.backgroundColor = "yellow";
      title.style.color = "#000";
      title.style.display = "inline";
      title.appendChild(document.createTextNode(" - " + pageTitle));
      targetLink.parentNode.insertBefore(title, targetLink.nextSibling);  

    }
  });
}

function processLinks() {

  // define which links to look for
  expr = "//a[contains (string(), 'Visit Website')]";
  allLinks = document.evaluate(
    expr,
    document,
    null,
    XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
    null);

  // loop through the links
  for (var i = 0; i < allLinks.snapshotLength; i++) {
    visitWebsiteLink = allLinks.snapshotItem(i);
    visitWebsiteLinkURL = visitWebsiteLink.getAttribute('href');

  // follow Visit Website link and attach corresponding headline
  fetchPage(visitWebsiteLinkURL, visitWebsiteLink);
  }
}

// get the ball rolling
processLinks();

Technical notes, if you're interested:

• The script works by following each "Visit Website" link and grabbing the corresponding page's first h1 tag. If you are moderating a site where the article's headline is not in its first h1 tag, you should be aware of two things:
  1. The script might show you something other than the article's headline
  2. You need to talk to your site's SEO staff
• The script works on "Visit Website" links on Facebook's Comment Moderation Tool but not "View Full Thread" links. This is because the former point to websites the script can follow and grab headlines from; the latter point to Facebook AJAX functions that pop up boxes with more comments in them.
• The script doesn't work with Google Chrome because, while Chrome supports userscripts, it does not support the Greasemonkey function that allows the browser to grab pages from another website domain. That feature is on the developers' list to be implemented but for now this script is Firefox-only, unless you research your own workaround. Update, January 2012: Works in Google Chrome with Tampermonkey!
• Thanks go to Hellion at the terrific Stack Overflow community of programmers for help working out a problem that came up while writing this script.

If you have any questions or comments about this script, or — since this is my first public Greasemonkey script — if you'd like to report a bug, please contact me!

Share this post:

•