How to add a Facebook comment Form to wordpress blog

0 Flares 0 Flares ×

If you don’t want to use your default comment form that comes with wordpress, then you can probably add a Facebook comment form to your wordpress blog. Today I will explain how to add a Facebook comment form to wordpress blog without a plugin support. There might be tons of plugins available but use of too many plugins may potentially decrease the performance of your wordpress blog.

 

Now Facebook has made it very simple, you need not create any FB application for it, you don’t need an App Id even you don’t need to login to your Facebook account.

 

STEPS to add a Facebook comment form to your wordpress blog without a plugin:

 

STEP1: Open the the Facebook developer portal for comments plugin (Facebook Developer Portal)

 

STEP2: Now customize your comment form by providing the details in the customization form. After entering all the fields correctly click the “Get Code” button and copy the generated code.

 

fb-comment-form

 

STEP3: Your generated code should look like below:

<div id=”fb-root”></div>
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>
<fb:comments href=”your-domain-name.com” num_posts=”30″ width=”600″>
</fb:comments>

Now just replace “your-domain-name.com” in the above code with “<?php echo get_permalink( $post->ID ); ?>” . This will ensure that comment is given for a particular URL and not to a domain name. The replaced code dynamically generates the URL to your post. So the final code becomes:

Final Code:

<div id=”fb-root”></div>
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>
<fb:comments href=”<?php echo get_permalink( $post->ID ); ?>” num_posts=”30″ width=”600″>
</fb:comments>

You can also directly use the above final code. You can change the width and num_posts a parameter value according to your choice.

 

STEP4: This step involves modifying your comments.php file. Go to your theme folder and open the comments.php file. Delete or comment out all the existing codes and paste the Facebook comment form code (The final code created in STEP3) to this file and save it.

If you want to customize more then accordingly you add CSS and html codes to the comments.php file. But remember “Do not change the Facebook comment form code”. For example you can put the FB comment code inside a customized div tag which suits to your blog theme.

 

That’s all, your Facebook comment form is integrated to your wordpress blog. 

IMPORTANT NOTE: If you are using any cache system for your blog then delete all your cache files or else this form will not work as you will see the old html files and old comment form.

 

If you are facing any problems in integrating the comment form please do let me know by your comments, I will try to help you out.

Guru

+Ayodhyanath Guru holds a B.Tech degree in Electrical Engineering and has worked with various prestigious clients in the IT industry and presently working as a Software Engineer. He is a part time blogger and presently authors the Jafaloo.Com blog. Being a tech enthusiast Guru likes to surf the web and blogs about interesting technical topics like How-To guides, freewares, Tutorials, Software, Gadgets, web applications etc. Apart from blogging he likes coding in Java/J2EE and PHP.

You may also like...

1 Response

  1. Dave Webb says:

    Hey there,

    Have just got this working correctly on my blog – many thanks. Was just wondering if there’s any way of tracking comments or getting emails/notifications when Facebook comments are posted, in the same way I would get notification emails of standard WordPress comments.

    Thanks in advance 🙂

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 0 Flares ×