Add FaceBook “Like” Button to Each Post

Applies to Version(s): 

Facebook is arguably the most influential social network in terms of driving traffic and prospects to your web site. Inarguably, Facebook is the most “Liked” of the social networks, with 750 million active users and counting, over half of whom login daily and average some 130 friends each.

Better get on that wagon!

You’re probably on it already. If you have a Facebook account, you may have “Liked” various articles or posts here and there. And even if you don’t have a Facebook account, you can still benefit from the Like button on your site.

Clearly, you want your friends and site visitors to “Like” your content. As a ranking signal to search engines like Google, as “social proof” that your site is worth paying attention to, and more, the importance of Facebook’s Like is impossible to ignore as a smart site owner.

Providing an easy method for your visitors to click a Facebook Like button is the cornerstone to getting started in the Like business.

Adding a Facebook Like button to each of your posts is drop-dead simple in Thesis, and does not require a plugin — the code is down below, for those in a rush to be Liked right now.

While numerous plugins do exist, some of which combine more than one social media network’s version of “Like” (e.g. plus, follow, share) buttons, the maintenance, simplicity, and low resource consumption of a custom function (PHP) make this a user-preferred method for adding Like buttons in Thesis.

But What Does the Facebook Like… Look… Like?

The code shown on this page will appear generally similar in all scenarios, but there are minor differences based on the visitor login status and whether or not a given post has had a Like yet or not.

The first set of images shows a new post with no Facebook Likes so far. The top image represents the visitor view when they, the visitor, are not logged into Facebook. The second image is what will be seen when the visitor is logged into Facebook.

Note that the Like button has certain variables such as “light” or “dark” — all the images displayed here were generated using the Like code from this entry, which is the “light” version of the Facebook Like button.

Once your post gets its first “Like” from a friend or fan, the Like button changes slightly, demonstrating the number of Likes the post has received. Here is the same visitor view as before, where the post has now achieved a fair number of “Likes” — the first image is a visitor “logged out” of Facebook, and the second image shows the FB Like area from the “logged in” perspective.

That’s the sum of the Like button. It’s there, it’s visible, and it’s begging for a click.

To get the above rolling on your Thesis site, simply add this snippet of code to yourcustom_functions.php file contents:

function fb_like() {
	if (is_single()) { ?>
		

		

This code places a Facebook Like button at the bottom of each and every “single post” you have on your Thesis website.