wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog Tutorials Add Facebook comment to WordPress Video

Tutorials

Add Facebook comment to WordPress Video

Last updated on February 18, 2017
Posted on April 28, 2011

Add Facebook comment to wordpress comment template

I was so interested with some blogs that I have visited, because they did add facebook comment to wordpress blogs, and the visitors or readers of those blogs can actually comment via facebook with just easy way, logging in and then comment, or another way, syncing Facebook comments, that will display all comments from Facebook account in your wp comment template.

Because of that interest, I was curious and tried this video tutorial how to add Facebook comment to wordpress, and it did work.

Strange enough, I actually made one video of Add facebook comment to wordpress last year, but I did not have time to make a post because this kind of video tutorial requires longer time to write in a post or article :), and now everything is different again with the new FB layout interface 2011.

I wonder, why I did post a lot of video tutorials in my first year of blogging journey, I guess because I did love what I am doing.

This interesting feature of facebook that will allow you to add Facebook comment to wordpress is actually nice to implement, but I decide not to use it or apply it in this blog, and I will tell you why later on..

Add facebook comment to wordpress – Preparation

Before we jump into the how to add facebook comment to wordpress video tutorial, you might want to prepare anything you will need, which are not complicated either.

You will need, Facebook account obviously, and ability to access developer page. I mention this, because I personally experience, unpleasant experience with FB developer page, while I could not create any FB applications.

You might want to check out my problem while accessing the developer page in this Facebook your account must be verified error post.

Another post which is related to this post, how to get Facebook API key article.

Additionally, in this tutorial and demo how to add facebook comment to wordpress, we will add the FB comment box only in the single post page. This means, we will need to edit a wordpress theme file, called single.php file.

So when you click in the home page, this FB comment box will not appear, because that’s not a single.php file, but index.php.

It also depends on the current theme you are using for your blog, in the demo, I am using Twenty Ten default theme (related: add logo to twenty ten), and this file has loop-single.php file. If you have some other themes (free themes or premium), for example like the theme I am using in this blog, Thesis theme (reasons why I use Thesis), this tutorial is not going to work unless we edit in another file.

Add facebook comment to wordpress Video tutorial

This is the screenshot result of this video tutorial. In the picture, the demo post only has one comment, it will change accordingly depends on the total numbers of your comment numbers in the option of configuration.

add facebook comment to wordpress
The result.

Add facebook comment to wordpress Video

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

Add facebook comment to wordpress Steps

These are the steps that I do in the Add facebook comment to wordpress video tutorial above. To me personally, watching video is much faster, however, it needs a while to follow.

The Add facebook comment to wordpress steps:

1. Go to this Facebook comment developer page

2. You will see many stuff you can actually use, but today, we are going to choose “Comments” Click on the pic or link as shown as the below screenshot.

3. You will be brought to this page (see screenshot) where you can add following:

add facebook comment to wordpress
The options.

 

– : Type the URL of your blog domain.

– Number of posts: By default, it gives you 2, you can modify it as you like.

– Width : it is referring to the width of your Facebook comment box, you can use any reasonal numbers. By default it is 500 px, in this demo, I left it as it is.

– Color Scheme : light or dark, you can choose the color by expanding the pull down menu.

4. Once you’re done with the step 3 above, click “Get code” button.

5. More and less, you will get these following code:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="http://yourblog.com/" num_posts="2" width="500"></fb:comments>

6. After getting the code in step 5 above, we will go back to the dashboard. Now as stated earlier, it depends on your theme, if your theme has single.php file, then follow this tutorial, if not, ask the theme developer.

Twenty Ten has it on loop-single.php.

7. To reach loop-single.php, you can find it in Appearance → Editor → loop-single.php

8. Paste the step 5’s code before this code line:

<?php comments_template( '', true ); ?>

See image where I pasted the code.

add facebook comment to wordpress
Where the code is pasted.

9. Update the file.

Now, you can test by commenting your own post by logging into FB account, and your comment will be displayed as shown in the demo of Add facebook comment to wordpress picture result above.

The reasons why I don’t want to add Facebook comment to wordpress blog, this blog, because it slows down my site loading speed, my server has to connect to Facebook server to display this FB comment box.

comment facebook from how

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← WordPress Smilies How to disable and enable them?
→ How to change font color of my blog?

Comments

  1. Xavier says

    May 31, 2011 at 4:59 am

    Hi, I tried following the steps but I guess WordPress changed because I don’t find Editor under Appearance. I find Edit CSS.

    Can you help me?

    • Kimi says

      June 2, 2011 at 5:07 pm

      I guess you are using wordpress.com? IF yes, you would not find “Editor” this is only for a selfhosted wordpress blog, means, you need to a webhosting and then install wordpress there.

  2. Emma Ballard says

    August 2, 2011 at 1:09 pm

    Useful article thank you..

  3. Suresh says

    September 26, 2011 at 3:11 pm

    nice article, thanks for sharing with us.

  4. Ellie says

    March 1, 2012 at 5:42 pm

    I can’t find the in twentyeleven…. do I go somewhere else? I so hoped I could do this. Thanks so much.

    • Kimi says

      March 2, 2012 at 6:44 am

      Hi Ellie,

      I haven’t looked into TwentyEleven theme, but might make a tutorial of it in the next days (added in the list).

      Feel free to subscribe to receive updates of this wordpress tutorial from this blog via email.

      Thanks for the catch and coming across too.

      Kimi.

  5. hardy says

    July 19, 2012 at 8:18 am

    Thank you so much for your valuable info…
    Adding the comment box right away !!
    god bless u 🙂

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • WordPress CDN setupWordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • WordPress Google maps in contact pageHow To Add Google Map in WordPress Contact Page
  • The configuration of YouTube Subscribe button in Google Developers web pageHow To Add YouTube Subscribe Button To WordPress Website
  • Adding Social Media Links to WordPress Menu With CSS Classes
  • Unable to create directory wp-content/uploads in WordPress
  • Forward Twitter to Facebook Using App and Feedburner Tutorial
  • Kitchen Sink WordPress - Seem Simple But Important
  • Admin Pointers, Drag and Drop WordPress 3.3 Media Upload Features
  • How to sell ebook in a wordpress blog?
  • Check your site's performance using Google labs Page Speed

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept