Facebook Social Plugin Comment Help

Hello everyone,

Im trying to implement this plugin on my website but i cant make it work, ive foloweed all the instructions but without success, does anyone here have used it?

By the way im trying the html 5 implementation.


Plug-in: https://developers.facebook.com/docs/reference/plugins/comments/

My website Code:

<meta charset="utf-8">
<title>Dicas do Itaim</title>

<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/reset.css" rel="stylesheet" type="text/css">

<script src="js/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" ></script>
<script src="js/slider.js"></script>

<script>(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/pt_BR/all.js#xfbml=1&appId=228558043904650";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<!--[if !IE 7]>
	<style type="text/css">
		#wrapper-div {display:table;height:100%}

<script type="text/javascript">

$(document).ready(function() {		
	//Execute the slideShow



<script type="text/javascript">

           $("#main-slider-id").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);




	<div id="wrapper-div">
		<div id="main-wrapper-div" class="clearfix">

    				<header id="main-header">

            			<h1 id="logo-div"></h1>  <!-- "logo-div" end  -->

                        <section id="header-slider-section">

                   			<div id="gallery">

                        		<img src="img/header/gallery/photo01.jpg" alt="foto01" class="show">

                          	  	<img src="img/header/gallery/photo02.jpg" alt="foto02">

                       		</div> <!-- "gallery-div" end  -->

                        </section> <!-- "slider-section" end  -->

                		<nav id="main-nav">


                                	<li> <a href="#" Opção 01> opção </a> </li>

									<li> <a href="#" Opção 01> opção </a> </li>

                                    <li> <a href="#" Opção 01> opção </a> </li>

                                    <li> <a href="#" Opção 01> opção </a> </li>

                                    <li> <a href="#" Opção 01> opção </a> </li>


                                <form method="get" action="http://busca.globo.com/Busca/gnt/" id="search-form" class="search">
        								<legend for="palavras-chave"></legend>
        									<label id="palavras-chave-label"></label>
        										<input type="text" name="query" class="field" id="palavras-chave">
        										<input type="submit" class="button" value="" name="Buscar">

                               <!-- <div id="nav-border-left"></div>     -->
                              <!--  <div id="nav-border-right"></div>    -->

             	   	 	</nav>  <!-- "main-nav" end  -->

           		   </header>  <!-- "main-header" end  -->

					<section id="main-content-section">

                    	<div id="main-slider-id" >
  							  <ul class="ui-tabs-nav">

								<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="img/main_sec/slider/photo_small_01.jpg" alt=""/></a></li>

        						<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="img/main_sec/slider/photo_small_02.jpg" alt="" /></a></li>
    <!-- First Content -->
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="img/main_sec/slider/photo_big_01.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >TESTE UM</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
    <!-- Second Content -->
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="img/main_sec/slider/photo_big_02.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >TESTE DOIS</a></h2>
        <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>


            	    </section> <!-- "main-content-section" end  -->

					<aside id="sec-content-aside">

                    		<div id="facebook">

                            	<div class="fb-comments" data-num-posts="2" data-width="250"></div>


            	    </aside> <!-- "sec-content-aside" end  -->

         </div>  <!-- "main-wrapper-div" end  -->

       <footer id="footer-id">

       </footer> <!-- "footer-id" end  -->

     </div>  <!-- "wrapper-div" end  -->



Hi Riner,

If you want to implement a Facebook comment plugin on your website you can use another plugin as there are lots of plugin for this.


You’re missing some stuff, so you should read the instructions FB provides a little more carefully. :slight_smile: Try putting the following on the page somewhere (FB says to put just inside the <body> tag):

<div id="fb-root"></div>

That element needs to be in the page for the FB comments script to work.

Also, you’re missing the data-href attribute in the fb-comments div:

<div id="facebook">
  <div class="fb-comments" data-num-posts="2" data-width="250"></div>

Should be the following (replace the URL with that of your page):

<div id="facebook">
  <div class="fb-comments" data-href="http://yoursite.com/yourpage.html" data-num-posts="2" data-width="250"></div>

See if that fixes it…

Oh i didnt know that, i will check for some other options! Thank you

Hey thanks for the reply, actually the code i pasted in this thread is a little messed, i´ve tried all the options you mentioned, after some research and testing i solved the problem:

<script>(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/pt_BR/all.js#xfbml=1&appId=228558043904650”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

js.src = “//connect.facebook.net/pt_BR/all.js#xfbml=1&appId=228558043904650”;

Must be: js.src = “https://connect.facebook.net/pt_BR/all.js#xfbml=1&appId=228558043904650”;

Otherway he wouldnt link the library, idk why i know it worked!

@raw10 thank you for the tips!

D’oh. I should have caught that. I just kinda skimmed that part of the code because I assumed that it was a direct copy/paste from the FB embed code.

Glad you figured it out.


Actually it was copy/paste from FB! well FB fails…