How to Display Facebook Comments on Your WordPress Website

Posted OnMar 18, 2015     CategoryComments     CommentsNo comment

In this section of the guide to Facebook Comments plugin, we will show you how to update your HTML code, add PHP code and customize the display options.

Facebook Comment Shortcode

As well as having Facebook Comments inserted automatically, you can also insert the comment box manually within any page, post or template by simply using the following shortcode:

[fbcomments]

To enter the shortcode directly into a PHP template, enter:

echo do_shortcode('[fbcomments]')

If you want to, exclude Facebook Comments within post IDs 123, 345 and 456 then simply enter this code in a PHP template:

if (!is_single(array(123,345,456))) {echo do_shortcode('[fbcomments]');}

You can also use the options below to override the the settings above.

  • url – leave blank for current URL.
  • width – minimum must be 350.
  • title.
  • num – on/off.
  • count – on/off.
  • countmsg.

An example using these options is:

[fbcomments url="http://peadig.com/wordpress-plugins/facebook-comments/" width="375" count="off" countmsg="wonderful comments!"]

Possible Issues

There are a few issues that the plugin has, which mainly has to do with theme limitations. If the plugin doesn’t appear, you may have to check that all the Facebook elements are loaded into the theme:

  • Facebook and Open Graph Protocol Namespace

    The following should be inserted to replace the current tag:

    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#">
  • Facebook App ID Meta

    The following should be inserted within tag, changing YOUR_APP_ID to your App ID:

    <meta property="fb:app_id" content="YOUR_APP_ID"/>
  • Facebook App ID Meta

    By default, all admins to the App ID can moderate comments. To add moderators, enter each Facebook Profile ID by a comma without spaces. To find your Facebook User ID, click here where you will see your own.

    <head>
    <meta property="fb:admins" content="ID_1,ID_2,ID_3"/>
  • Facebook Javascript SDK

    In the plugin, this is inserted just before </body>. Technically, it is best to insert this directly after <body>, changing YOUR_APP_ID to your App ID:

    &lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
    &lt;script&gt;(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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;amp;appId=YOUR_APP_ID&quot;;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));&lt;/script&gt;ent.getElementById('fb-root').appendChild(e);
    }());
    &lt;/script&gt;

This concludes our guide of the Facebook Comments plugin.


Leave a Reply

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

Send this to friend