Facebook comments for WordPress – app creation, code integration and moderation

Facebook comments make homepages, blog and online shops much more lively. Users are no longer forced to enter their data or register. By placing or exchanging the WordPress comments with the Facebook code, the interaction, user loyalty and also the visiting hours of your website, blog or shop increase. For embedding there are of course also WordPress plugins. With a little copy & paste you can also do everything yourself. Today not with a video tutorial, but with screenshots, because it is really fast, even without an advertising agency.

Create Facebook App for use

Tip! Here you can find our XXL Guide to the topic Facebook Ads. In this article you learn:

1. Create Facebook App for use
2. Comment Generate and embed comment code

If you have not yet created your own application in facebook for developers, this is your first step. Just sign up here and create an app:

• Facebook for developers – Create registration and app

Comment Generate and embed comment code

In the next step you generate your own code. It is important that you get it into your header.php. This usually works in two ways with WordPress.

1. The best way is to include the code in your theme backend. Most themes support embedding directly from the backend. Then you don’t have to make any changes to the theme. You place the code where, for example, the code from Google Analytics is located.
2. Directly in the theme via your WordPress backend via Design > Editor. Then open the header.php and insert the code cleanly, best directly after the tag.
3. Recommendation! Better go over your Child Theme and change a copy of the header.php, then you will have no problems with the theme update.

Here you can generate your code:

• Facebook comments for website / WordPress – Get code

This is what the generated code looks like. The appID is your individual ID.

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_DE/sdk.js#xfbml=1&version=v2.8&appId=1453051238274088";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Screenshots of the developers tutorial

Here once again all steps in individual screenshots:

Exchange WordPress and Facebook comment function

Besides the script you will also get a small div box for embedding in the front end of the page. The procedure here is similar to the script. Only that you edit the single.php. If you are working with a theme, the code may also have to be placed in comments.php or similar. Like in my example. You can include the code everywhere in your page or only on single pages. We replace the comment function directly. If you want the comments on single pages, just insert the code directly into the blog posts, etc. This is how you change the comment function globally.

Important, you have to replace your URL (in my case http://lukinski.com) for the global variant with :

< ?php echo get_permalink(); ?>

1. Directly in the theme via your WordPress backend via Design > Editor. Now open the single.php and replace the WordPress code or exclude it.
2. Recommendation! Do the same with your Child Theme and change a copy of the single.php.

<div class="fb-comments" data-href="< ?php echo get_permalink(); ?>" data-numposts="5"></div>

Voila.

Screenshots of the code exchange

In my example the comment code was not in the single.php but in a single comments.php. I copied this into my child theme and replaced the whole comment code with the new Facebook comments. If you work in the single.php, make sure to remove only the comment code. In the example the whole comments.php was replaced.

Facebook comment function in the blog

Ready the whole thing looks like this!