How To Integrate Facebook Login And Facebook Comments With WordPress

Posted on November 11, 2014 by in Tips & Tricks | 38 comments

How To Integrate Facebook Login And Facebook Comments With WordPress

38 Comments

  1. Always wanted to know this !!! Very interesting, thank you Nathan!!

  2. Thank you for sharing.

  3. When I purchased Divi, I had no idea all of the great extra content and tips you’ve posted. Keep it up – loving everything Elegant Themes has to offer.

    • Welcome to the club Ricky! ET is fresh to death!

  4. This is awesome! I’ve always wondered how to tie these together, but it looked too daunting for me. So I greatly appreciate the tutorial!

    One question: it appears that the “url to comment on” only allows you to have comments for that one url. How do you set it up so that each new post will have a fresh comments section? Or is that possible?

    • I was wondering the same thing. Can you just put in your home URL and it will work? Or will comments from all posts go under the same spot then?

      Also, how can you get notified if someone comments? I see a section about it in the Docs, but don’t quite understand it.

  5. Great article, thank you!

  6. Good post. Incorporating social media is a must these days.

    I prefer manually integrating Facebook comments and using Elegant Theme’s Monarch plugin for social sharing and follow functions.

    Avoid as much bloat as possible. And don’t be afraid of code. It may seem complicated but if you devote a little time to learning how to perform some of the tasks that come up from time to time, it will pay dividends in the long run.

  7. Hi Nathan,

    Awesome share.

    Initially, I really hated the FB comment system majorly because of the plethora of comment spam I noticed was a prime feature on blogs which ran it.

    It’s a great idea that your entry here shows that comments can be moderated.

    I’ll be considering FB comments soon enough.

    Make the day great!

    Always,
    Terungwa

  8. Great post!!!

  9. I am curious as to what the true benefit is from this… Does it really help that much? If so why do you not see every site doing this for comments? Especially Elegant Themes.

  10. I notice that Facebook Connect has not been updated in four years and has not been tested with the current version of WordPress. That sounds a bit scary to me.

  11. Excuse me, I meant it has been updated in two years.

  12. Just a quick FYI

    If you decide to use the code outlined in the article you need to make a small change in order for the Facebook comment box responsive.

    All you need to do is change the value for the data-width to “100%” or whatever % you like.

  13. Thanks for the Facebook Comments tips!

  14. Thanks Nathan, I had been wondering how this was done. You’ve put together a very useful tutorial here!

  15. Thanks Nathan, I had been wondering how this was done. You’ve put together a very useful tutorial here!

  16. Hi Nathan,

    I believe I’ve followed all steps correctly but the test comment “Heerlijk die sfingi!” comment that was posted underneath this post http://onsicilycard.com/blog/2014/11/11/san-martino-en-de-sfingi-uit-agrigento/ is visible underneath all other posts.

    I clearly want the comments visible on only the posts they’re referring to.

    Can you explain what I might be doing wrong here?

    Thanks!

    Don

    Here’s the code I pasted at: “Add code to the (good for tracking codes such as google analytics)”

    (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_US/sdk.js#xfbml=1&appId=686147434837240&version=v2.0”;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, ‘script’, ‘facebook-jssdk’));

    And the code I pasted here: “Add code to the bottom of your posts, before the comments”

  17. Is there anyway to make the Facebook comments appear only under the post that the comments are referring to?

    According to your instructions on Step 2 and pasting code into the section that says “Add code to the bottom of your posts, before the comments”. This results in ALL the comments showing on ALL the Posts.

      • Don:

        I also noticed several others asking about the same thing and no one has replied to any of the messages. I opened a support ticket with Elegant Themes and included a link to the article you posted about using the WordPress function the_permalink() which allows us to dynamically assign the correct URL for every post.

        Hopefully someone will take a look at get back to us with an answer on how to make the FB comments separate for each Post!

        Seems to be the only problem with this FB Integration blog post.

        As soon as I hear something, I will update this blog post.

  18. I really just want to by the Monarch plugin alone. Is that not possible?

  19. Great read!

    The comment settings URL is no longer working: developers.facebook.com/tools/comments

    I’m trying to find where I can adjust the admin/moderator settings. Thanks!

  20. Hi all

    Im trying to add Facebook login to my website but im finding it hard, basically iv got my username/password bar at the top right but id like to be able add the facebook logo on their so people can just click it and login but I cannot seem to do it.
    only way I can access the facebook login is via clicking login which takes me to the wordpress login page which has the facebook icon their

  21. Sweet, this helped a lot. I also included the like and share buttons which are found in the same place. In fact these were easier to do.

    I use the Genesis Framework, and the easiest way for me to add the code after the BODY tags was to use the Genesis Simple Hooks plugin.

    Cheers for this tut

    Neil

  22. I’ve tried this several dozen times. No luck. No matter what I do, it will NOT post to Facebook. I’ve also tried several other tutorials which have the same steps. Followed each step precisely. It just doesn’t work. I don’t get it. This isn’t as easy for me as everyone else is making it out to be.

  23. I’ve tried this several dozen times. No luck. No matter what I do, it will NOT post to Facebook. I’ve also tried several other tutorials which have the same steps. Followed each step precisely. It just doesn’t work. I don’t get it. This isn’t as easy for me as everyone else is making it out to be

  24. How to show comments on the home page for each post,
    i try to add in index page before while this i use DIVI theme

  25. The cost of Ultimate Facebook appears to have changed substantially since this article was published. It’s now $19/month.

  26. Really helpful tutorial. I’m developing a wordpress blog as a project for my university and it would be great if I could add facebook comment form in it

  27. I am not sure if it is just me or what, all images are not visible so cannot confirm what I see vs. what I should see. Also I believe this would allow me to integrate facebook page as a widget in DIVI. if not then please suggest how?

401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest