gfscott.com // Huge On Facebook

Huge On Facebook is something I made because I wanted to be able to highlight the most popular articles on my magazine's website. We were displaying lots of links to articles, but each appeared identical, regardless of how much buzz the story was generating. This jQuery script is designed to highlight the links on our site that are actually generating conversation (on Facebook, at least) and boost them visually so that readers can easily find them — and, crucially, click on them.

The Huge On Facebook plugin will traverse through a batch of links, fetch the Open Graph data for each URL, and add a class if it's over a certain number of likes. Optionally, it can also append a <span> element containing the number of likes for that URL.

The plugin can additionally be set to display that number only if it's above a certain threshold, and to optionally add a class .hugeonfacebook to each link—depending on how popular that link is. You get to decide how many shares is enough to bother showing your website visitor.

Example:

Below, we have an unordered list of six links: ul#headlines > li > a.article

Add <script src="hof.js"></script> to load the script. Call hugeOnFacebook(); inside a jQuery document ready function. The script finds all the .article anchor tags, gets the Open Graph data for each one, and then adds classes if the link has a certain number of likes.

In this example, if the link has more than 40 likes, the script adds a class .popular to the anchor tag. Additionally, it adds the class .hugeonfacebook to each link with more than 5000 likes.

Optionally, the script can append a span to each anchor containing the number of likes. Finally, it can also optionally add a data-likes attribute to each popular link containing the count, which might be handy for other scripts to use.

Using these classes, you can set different visual styles in CSS. In the example below, .popular links get a span containing the number of likes, and .hugeonfacebook links are displayed at a larger size, with further styles applied to the count span. For instance, only the most popular links in the list get an exclamation point, added with CSS :content attributes.

Here it is in action:

• The First Link
• Another Link
• More Linkage awesomeness
• Yet another link
• Penultimate link
• Last link

To Do:

• Test against earlier versions of jQuery
  Tested and works with jQuery 1.3.0 – 1.9.2; works with jQuery 2.0.3+
• Zepto.js supportAdded with version 1.3.1.
• Performance? Requiring a separate ajax json call for each link will obviously hit performance barriers at some point.
  Have tested on pages with up to 30 links, and seems capable. Still, less is more; YMMV.
• Remove options from main code, shift to a second <script> snippet, probably. Call hugeOnFacebook() and set options, e.g.: hugeOnFacebook({likesVisible:true});
• Any security vulnerabilities introduced with this technique?
• Browser compatibility?
• Add capability for more than one #container in a page, i.e. $('#container').hugeOnFacebook({linkClass: hentry});Finally, proper jQuery plugin behaviour added. Call script on one or more specific container elements ($('#container').hugeOnFacebook();) or on a class of links ($('.class_of_link').hugeOnFacebook();). Call multiple times and specify different behaviour each time.

Changelog:

Version 1.3.1 (updated July 15, 2013)

• Added Zepto support. Tested and works with versions 0.8 and up.

Version 1.3 (updated July 10, 2012)

• Added proper jQuery plugin behaviour, finally.
• Support for multiple containing elements on a page, or for multiple link classes, each with customizable options.
• Added option to specify the <span> class formerly called "likesVisible." Specify any class by passing option likesVisibleClass: "whatever"

Version 1.2 (updated February 12, 2012)

• Better control over options. Set popularity thresholds, custom classes, like count visibility. Source contains full list of defaults.
• Optionally add a data-likes attribute containing the like count to target anchors.

Version 1.1

• Added a regex replace on $url to strip out any URL arguments, leaving the canonical URL. Will now work properly on links with, for example, UTM tags added. As of 1.2: Facebook Open Graph now compensates for any query strings in URLs. This was a terrible fix anyway.

About:

Copyright © 2012 Graham F. Scott, licensed under the MIT License. Minification by Mihai Bazon's UglifyJS. Comment welcome at gfscott at gmail. Oh, and no hotlinking, please.