Display Number Of Facebook Comments On WordPress Articles

Well, to fully replace, function for function, the WordPress comments feature on your WordPress website, you would need to be able to tell WordPress how many Facebook comments you have on each article. In many WordPress themes, this number is represented on the blogroll, and will sometimes even feature a link that jumps down to the comments. Let’s take a look at how to get that built.

Content Meta PHP File

I have to preface this bit of code with some background information. The way my WordPress theme is designed, the meta for each blog post is kept in a separate PHP file. Your theme may not be like this, but it doesn’t mean you can’t achieve the same results I did. You just have to customize yours depending on your situation. Leave a comment on this post and lets see if we, as a community, cannot solve your unique situations.

But first… Let’s break down the code below:

  1. This code is encased in a span tag with a class of comment-count (lines 1 and 5). This is done for styling purposes (not discussed here) and should be ignored unless you use that class in your website’s CSS for the same purpose.
  2. I knew that I wanted my comment count to link to the blog post, so I started off by opening an <a> tag. I then moved the language from HTML to PHP because those links are dynamically created (they are different from post to post).
  3. The first thing we are going to do, is use PHP’s echo command with the WordPress function get_permalink(). Notice that we did not use the WordPress function the_permalink() because we wanted the output to be returned as a string without an implied echo. If you don’t use the correct WordPress function, this will not work as I’m showing you.
  4. After the argument-less get_permalink() function has been written out, we are going to use the concatenation operator (the period) to add the string #fb-comments to the link. All this means is that #fb-comments will be added on to the end of any dynamically generated URL so we can jump to that anchor point in the blog post (in this case, jump down to the comments section). I called my anchor fb-comments but you can call yours whatever you’d like.
  5. After that PHP statement, we close out of PHP and are now working in the HTML language again. Close the end of your <a> tag. The next set of code is for working with Facebook’s Open Graph.
  6. Hopefully you can read through this next part of code pretty easily. If not, you should be able to copy and paste the entire 3rd line of the code.
  7. On line 4, I added a space and the word ‘Comments’, closed out the <a> tag, the span (which again, was used for styling purposes), and I was all done.

Single Blog Post PHP File

At this point, my blog roll has the number of Facebook comments for each article on my WordPress site listed as a link that, when clicked, moves the user to that single entry page, and jumps them down to that comments (which was built as an anchor).

In case you were wondering (or forgot) how to build an in-page anchor, I’ll include it. Just make sure whatever you name your anchor in single.php that your anchor in your concatenated link on line 2 of content-meta.php matches.


Congratulations on making it this far! Enjoy the added functionality, spam protection, and social integration that Facebook comments affords your WordPress website!