How to Integrate Facebook Comments Plugin

Submitted by: 
Language: 
Visitors have accessed this post 430 times.

Step 1:

Go to Facebook Developer Page for comments plugin.

Step 2:

Follow the step by step tutorial and input necessary field for the Comments Plugin Code Generator.

Step 3:

Fill up the form and click Get Code button.

facebook comment plugin generator

Step 4:

Take note of the codes given by the generator and the steps on how to integrate them to your app.

Example

This is the example integration of the codes given by the generator.

  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>How to Integrate Facebook Comments Plugin</title>
  4. <link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css">
  5. </head>
  6. (function(d, s, id) {
  7. var js, fjs = d.getElementsByTagName(s)[0];
  8. if (d.getElementById(id)) return;
  9. js = d.createElement(s); js.id = id;
  10. js.src = '<a href="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12';
  11. " rel="nofollow">https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12';
  12. </a> fjs.parentNode.insertBefore(js, fjs);
  13. }(document, 'script', 'facebook-jssdk'));
  14.  
  15. <div class="container">
  16. <h1 class="text-center" style="margin-top:30px;">How to Integrate Facebook Comments Plugin</h1>
  17. <hr>
  18. <div class="row justify-content-center">
  19. <div class="col-sm-6">
  20. <div class="fb-comments" data-href="<a href="http://localhost/facebook_comment/index.html"" rel="nofollow">http://localhost/facebook_comment/index.html"</a> data-numposts="10"></div>
  21. </div>
  22. </div>
  23. </div>
  24. </body>
  25. </html>

That ends this tutorial. Happy Coding :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.