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.
Below, we have an unordered list of six links:
ul#headlines > li > a.article
<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
hugeOnFacebook()and set options, e.g.:
$('#container').hugeOnFacebook();) or on a class of links (
$('.class_of_link').hugeOnFacebook();). Call multiple times and specify different behaviour each time.
<span>class formerly called "likesVisible." Specify any class by passing option
data-likesattribute containing the like count to target anchors.
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.