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.
Thanks!
Plug-in: https://developers.facebook.com/docs/reference/plugins/comments/
My website Code:
<!DOCTYPE HTML>
<html>
<head>
<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>
<![endif]-->
<!--[if !IE 7]>
<style type="text/css">
#wrapper-div {display:table;height:100%}
</style>
<![endif]-->
<script type="text/javascript">
$(document).ready(function() {
//Execute the slideShow
slideShow();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#main-slider-id").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
</head>
<body>
<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">
<ul>
<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>
</ul>
<form method="get" action="http://busca.globo.com/Busca/gnt/" id="search-form" class="search">
<fieldset>
<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">
</fieldset>
</form>
<!-- <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>
</ul>
<!-- 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>
</div>
</div>
<!-- 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>
</div>
</div>
</div>
</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>
</div>
</aside> <!-- "sec-content-aside" end -->
</div> <!-- "main-wrapper-div" end -->
<footer id="footer-id">
</footer> <!-- "footer-id" end -->
</div> <!-- "wrapper-div" end -->
</body>
</html>
Try putting the following on the page somewhere (FB says to put just inside the <body> tag):