Recently we had a client ask us how to add a Facebook Comments Box plugin to their WordPress website. In response to that question, this post will cover how to manually create a Comments Box to put on individual pages of your website.
First, a word of warning before you implement this on your own website. Encouraging visitors to come to your website and leave comments that will also appear on Facebook can be super cool and engaging, but it also leaves a door open for anyone to make negative or obscene comments. So, you will want to be able to moderate the comments left behind.
Step 1: Visit the Facebook developers site for the Comments Box plugin: https://developers.facebook.com/docs/plugins/comments/
Step 2: Enter these 4 pieces of information:
- The URL of the page for the comments box: You can create new comment boxes for any number of pages, however it makes more sense to manually do this after the code is created.
- Color Scheme: light or dark (light is the default, if left blank)
- Number of Posts: Minimum of 1 (default is 10, if left blank) For my example I chose 5.
- Width: For this site I chose 680 pixels, so it fits across the full width of the page. If you're filling in a smaller area, just adjust the number in this field to match.
Step 3: You will see an example of your comments box below, so make any changes until it looks right.
Step 4: Click "Get Code" and a pop-up box will open with different options for embedding the code. For my comments box I chose HTML5. The comments box only supports HTML5 and XFBML.
Step 5: Copy the first part of the code and paste into the HTML of your website. Ideally, it will go right after the opening tag, but it can also go right above the next part of the code.
Step 6: Copy the second part of the code and paste into your HTML of your website wherever you want the plugin to appear on your page.
Step 7: Save and preview to make sure the code is working properly.
Now, you may ask: "How do I put this on other pages without creating a new comments box app for each and every page?" The answer is simple: Just repeat Steps 5 and 6 above and put the same code on each page, but with 1 minor change each time.
In Plugin HTML you will notice the data-href= part with the URL of your current page:
< div data-href="http://www.vieodesign.com/facebook-comments-box-how-to/" data-colorscheme="light" data-numposts="5" data-width="680" > < / div >
Just change that URL to match the URL of the next page and then repeat. You'll notice that you can also make changes for the plugin on each page by editing the rest of the items in the div. For example, if you have another page and you only want the comments box to be 400 pixels wide to fit in a specific area, just change data-width="680" to data-width="400" and paste/save.
If your website is written in PHP there is also a way to dynamically change the URL programmatically so it dynamically pulls in the current URL for the data-href value. But that is another post for another day (or Google it).
Step 8: Go to http://developers.facebook.com/tools/comments to moderate your comments. From there you will also have many other options such as:
- Add other users as moderators
- Require moderation before comments show
- Blacklist words
- Comment sorting
- Grammar filter
Was this helpful? Test out the Comments Box below and let me know!