How to Manage Facebook Comments Using WordPress


In this post, we will talk about how to include and manage Facebook comments through WordPress. In fact, this post was written by me for two reasons, the first of which is my lack of experience with Facebook in terms of the applications it provides. In it about the possibility of controlling the comments. The first thing that came to my mind is how to control comments that are published on a site that you do not have any permissions on. This is because, as I mentioned, I have no experience with Facebook. Now we move to the heart of the matter

The form of Facebook comments when the explanation is completed

Comments form when completing the explanation

To control Facebook comments you will need:

  1. Create a Facebook app
  2. Get your account ID
  3. Adding comment codes while modifying them
  4. Add metatag

Create a Facebook Comments App

For the benefit, this method that I will put is the same as that required of you by other add-ons to create the Facebook application, and there is an addition that requires the creation of a Facebook application to do its work, for example, adding Facebook Page Publish 2.

Here you will find only the steps that you must take to create a Facebook application. If you do not understand these steps, you can review the official website for more information

First, let’s go to the application creation page

https://developers.facebook.com/apps/
facebook create app - WordPress magazine

Click on Create a new app as shown in the image. After clicking, a window will appear as in the following image:

facebook create app new - WordPress Magazine

We write the name of the application and the app namespace and click on create the application, then another window will appear for you to check the captcha as in the following image:

facebook create app captcha - WordPress Magazine

The important thing is to enter the letters or numbers that will be presented to you and press submit, then the application page that we have created will be displayed as in the following image:

facebook create app info - WordPress Magazine

We click on add platform, another window will appear, choose a website

facebook create app platform - WordPress Magazine

After selecting the website, the website properties will appear on the application page as shown in the following image:

facebook create app info - WordPress Magazine

Put the link to your site and save the changes as shown in the image above. After saving the changes, we go to Status & Review. You will find it in the right menu. If you use Arabic on Facebook, we press Yes as shown by the red arrow in the following image:

facebook live app - wordpress magazine

Confirm the feature as shown in the following image:

facebook live app popup - wordpress magazine

Now we are done creating the app

facebook app id - wordpress magazine

Keep the App IDYou can review the official explanation if you do not understand the method Register and Configure an App

Get the ID of your account

Since Facebook no longer allows displaying information in the old way, I will show you two ways to obtain the ID number

facebook tool

You can get your account identification number through the Facebook (explorer) tool. All you have to do is do the following steps:

Visit the following link: Graph API Explorer

After entering the site, click on the button indicated in the image

Graph API Explorer get access token - WordPress Magazine

After clicking on Get Access Token, a window will appear as follows:

Graph API Explorer accesstoken about me - WordPress Magazine

Choose user_about_me, then click on Get Access Token, and another window will appear, confirm the matter

Graph API Explorer message - WordPress Magazine

After confirming, click on the Submit button

Graph API Explorer facebook userid - WordPress Magazine

As you can see in the picture, your name and account number will be displayed

help site

This site (lookup-id.com) I tried and it showed the correct number for my account. You can use it to get your account ID easier than the Facebook tool

Facebook comment codes

Here we will visit the Facebook plugins page to get the comments code. After entering the page, click on the “Comments Plugin Configurator” button to get to the place of preparing comments

Facebook Comments Plugin Configurator - WordPress Magazine
  1. Do not change the link at the moment until we modify it later
  2. As for the presentation, leave it blank until it becomes responsive to your site
  3. The number of comments that will appear by default

Now scroll down until you find the “Get Code” button as shown in the image below, then click on it

get code facebook comments - WordPress Magazine

Add Facebook comment codes to the template

After pressing the “Get Code” button, a window will appear like this:

facebook comments configator dialog box - WordPress مجلة
  1. Choose the app you created
  2. Choose the Arabic language or according to the language of your site
  3. We will need the entire code to put in the footer.php . file
  4. This code we will include in the comments file or where you want to display comments
  5. Leave the page open, do not click OK until we have finished the modifications that we will need

Ok, now we will modify our template files. First we go to the file at the bottom of the page (footer.php) and then we add the code shown in the above image with the number 3 so that it becomes as follows:

facebook sdk footer - WordPress Magazine

After modifying the html tag, save the footer.php file

Now we move to the single.php file. We open it and search for the comments_template code for WordPress. For example, we will find the code as follows:

<?php comments_template(); ?>

We put above or below it the code indicated by arrow 4 in the picture above and put the code as follows:

<?php comments_template(); ?>
<div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator"></div>

Now we will change the link in the code from

https://developers.facebook.com/docs/plugins/comments#configurator

To the get_permalink() function to fetch the article link, that is, the code will look like this:

<?php comments_template(); ?>
<div class="fb-comments" data-href="<?php get_permalink($post->ID); ?>"></div>

After modifying the code and adding it, save the file single.php

Add your Facebook metatag

Here we will add some meta tags for the header file (header.php), which is as stated on the Facebook website

<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>
<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/>

The first meta is for those who will manage the comments. You must put the ID we talked about earlier, for example 100002606664324 for the user of my Mwordpress account

The second meta is for the Facebook application, puts the App Id number that we got when creating the application. For me, the App Id is 354996951270580.

Here the code will look like this:

<meta property="fb:admins" content="100002606664324"/>
<meta property="fb:app_id" content="354996951270580"/>

Change the values ​​as per your convenience and save the header.php file.

Note: Now after completing the modification of the template, if you use any addition to the cache, for example w3 total cache, empty the cache and try the blogs on your site on the idea of ​​creating the application. It will take time until the content of your site is updated in the Facebook servers. Facebook debug tool to preview changes without waiting for your site to be updated in the Facebook servers

Here is the link to Facebook’s debug tool:

https://developers.facebook.com/tools/debug/og/object/

All you have to do is put the link in the field and press debug

Here we have finished this explanation and see you in an upcoming explanation, God willing, you are safe

Leave a Comment