Who Likes Me? Showing likers on livefyre posts

4-likers

Livefyre records up to four users who have liked a post. From observation it appears to be the the latest users who liked a comment. The elements showing the avatars of those who liked the comment are on the web page but are marked as not to be displayed. A simple override of the style sheet fixes this.

To do this paste the following line of code in the console of your browser and press return to run it. This will need to be done anytime you change pages or refresh the page.

$('head').append('<style> div.fyre span.fyre-comment-like-imgs { display: inline; } </style>');

Then you will see up to four avatar images to the left of the “like” button. If you mouse-over them you will see the username.

How Does this Work?

This is only reading for the interested. You do not need to know how it works to use it.

As likes are made, Livefyre records information on who made the like in the comment being liked under the element <span class="fyre-comment-like-imgs">. How elements of this class are displayed is controlled by a style sheet and in this case set to not be displayed.

div.fyre div.fyre-stream-sort span.fyre-stream-sort-bar,
div.fyre span.fyre-comment-like-imgs {
	display: none;
}

The style entry above specifies two CSS selectors. The one in bold selects elements with the class span.fyre-comment-like-imgs that are children of elements with the class div.fyre. The style specified indicates these elements are not displayed.

The line of code  you ran indicates to append a new style entry into the head element of the web page:

<style>
	div.fyre span.fyre-comment-like-imgs {
		display: inline;
	}
</style>

As this element is appended to the head element it is now the last and controlling entry for the class fyre-comment-like-imgs. Doing it this way is not the ideal solution as it may fail on very old versions of IE but is a practical solution as few use versions of IE that old.