How to Enable Facebook Comments on WordPress

How to Enable Facebook Comments on WordPress

Marketing can be one of those tricky things that as an artist I have had to spend a lot of time over the past 10 years trying to master. There are many ways that we can market our art to the community we are trying to serve and with some of the ways that social media can be shared it opens up a lot more ways for us to reach people. Having a blog for your photography studio is a great way to connect with your clients and market your photo business to new brides. It gives people a change to see your latest and greatest work and also lets them see a little bit about who you are. I have had a blog for about 7+ years for my studio and have always loved how it has let me share a little about myself and does really give potential clients the ability to see who I am. A blog should also be 2 sided and allow for your readers to leave comments to open up communication. Awhile back Facebook created a way for any website to add a comment feature that would allow for users who were logged into Facebook already to leave a comment on the site. This comment can also show up on their Facebook wall and can be a great way to get extra visibility to your website. We added the Facebook comments feature to this site a little while back and it has been a great way to open up communication. If you ever have a comment, question or suggestion just type your comments in the Facebook comment section near the bottom of the page.

So how do you add the Facebook comments feature to your own blog? It’s fairly easy although does take some steps to accomplish. Here is a step by step walk through on how to do this.

1) First you will have to create an App in Facebook for your website. You can set this up here, and just need to name the app and provide your website blog URL Facebook App

2) Once you have created your app you will see an App ID number shown. Copy this App ID which we will need in a later step.

3) Click on the App Dashboard and go to the about section. Near the bottom under Manage Users make sure that it shows a Admin setup which is your Facebook name. You can add other admins if you need to, admins will be able to moderate comments and you can add as many other people as an admin to your Facebook App.

4) Before you install the comments code on your site you will want to install the Facebook Javascript SDK. For those of you that aren’t techie don’t worry its easier than it sounds. Installing this SDK will give your website access to many other Facebook features if you wanted to install them down the line and really plug into Facebook. Just go to your header.php file (in your wordpress admin go to Appearance –> Editor and then find this file on the right). As you always should copy and paste this text into a backup file somewhere in case you make a mistake. It’s always good to be safe and have a backup. In this file right after the BODY tag enter this text below, the only change to make is replace the “your app id” with your app id from step 2. You can also copy and paste the code from Facebook’s developer site here: http://developers.facebook.com/docs/reference/javascript/

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

5) To enable the moderation for your comments you will need to add one more piece of code in this header file. In between the < head > and < /head > tags add this code


<meta property="fb:app_id" content="your app id"/>

6) Next head over to the Facebook Comments page and enter in your sites URL and any other customizations and click the get code button. Copy this code to paste into the next step.

7) Now all you have to do is paste this text into any page where you want your Facebook comments box to appear. Paste it in a blog post at the end to test it out. You can also add this to your comments.php file in wordpress to have the comments appear on every page. You don’t have to remove the existing wordpress comments feature if you don’t want to, they can live side by side. For this site I have decided to keep both comments since there were already thousands of great comments on old pages that have good conversations and not everyone is on Facebook.

8 ) To add the comments to all pages on your site navigate to the comments.php file and paste in the code from step 6.

Now you are on your way to connecting with your clients via Facebook comments.
There are other ways to add the Facebook comments to your site as well with wordpress plug-ins. If you don’t want to mess with the sites code you are just a plug in away from comments.

Let me know any questions you have and start a discussion below. I look forward to hearing from you.

If you like our articles remember to share them on Facebook, Twitter or +1 them on Google. I appreciate you spreading the word to your photo friends!

Related Posts with Thumbnails

Author: Mark

Mark is a fine art wedding and portrait photographer from Northern California. He has been passionate about photography since childhood and started his studio 12 years ago to bring a fresh style of photography to the wedding and portrait world.

Share This Post On
Loading Facebook Comments ...

4 Comments

  1. Not sure what it is, but someone mentioned the AWD Plugin. Seems that for some reason the only way to log in with it using the login button is by right clicking and opening in new window. Still working out why. Anybody know the answer, feel free to share.

  2. I think that the WP Facebook AWD all in one is neat, but where can I find out more about how to set it up? Just create a FB app then plug in the Admin ID and Page Admin ID?

Trackbacks/Pingbacks

  1. Our 500th Post – Digital Photo Buzz | Digital Photo Buzz - Digital Photography reviews and tips - [...] How to Enable Facebook Comments on WordPress [...]

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Heads up! You are attempting to upload an invalid image. If saved, this image will not display with your comment.