Plugin do face

Qual é minha questão:
Não estou conseguindo colocar o plugin do facebook no meu fórum e gostari de coloca-lo com esta barra igual ao do mundo dos foruns 
exemplo na imagem :









Gostaria de colocar o plugin este https://developers.facebook.com/docs/plugins/facepile/  mais o codigo não funiona , porque será como criar corretamente o codigo lá .. 
codigo que estou usando 

Código:

<div class="fb-facepile" data-app-id="Display people who logged into a site using this app" data-href="https://www.facebook.com/pages/Criadores-de-P%C3%A1ssaros-Esp%C3%A9cies/709565049060790?ref=hl" data-action="A comma separated list of actions to show a Facepile for" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-max-rows="1" data-colorscheme="light" data-size="medium" data-show-count="true"></div>

muito obrigado


Endereço do meu fórum:
http://www.criadoresdepassaros.com

Versão do fórum:
PHPBB3

Olá,

Crie um Widget!

https://developers.facebook.com/docs/plugins/facepile/ -> Preencha e após isso selecione " Get Code"

Na aba selecione " iframe " copie esse código e cole em um novo wigdet personalizado! Não se esqueça de carregar em salvar.

Para colocar como na imagem crie um novo tópico, visto que é outra questão!

Ate mais!

Saudações
Aqui esta o codigo que fiz pra voce
Crie novo WIDGET

Código:

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/pages/Criadores-de-P%C3%A1ssaros-Esp%C3%A9cies/709565049060790&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:180px; height:287px;" allowTransparency="true"></iframe>

Até Mais...

Boa noite , falta  a aba que solicitei no inicio conforme esta exemplo na imagem de criação do tópico ! 

Obriagdo

Saudações EDUARDO MACHADO
Fiz um codigo pra voce mesmo:
Aqui esta , crie um widget com o seguinte codigo:

Código:

<style> img,a{border:0} #on{visibility:visible} #off{visibility:hidden} #facebook_div{width:196px;height:340px;overflow:hidden} #twitter_div{width:246px;height:353px;overflow:hidden} #google_plus_div{width:152px;height:97px;overflow:hidden;margin-top:10px;margin-left:-5px} #knfeedburner_div{width:300px;height:97px;overflow:hidden;margin-top:5px;margin-left:-4px} #kakinetwork_div{width:300px;height:97px;overflow:hidden} #facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px} #facebook_right img{position:absolute;top:-2px;left:-35px} #facebook_right iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px} #twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px} #twitter_right_img{position:absolute;top:-2px;left:-35px;border:0} #google_plus_right{z-index:10003;background-color:#F2F2F2;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-right:2px solid #0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px} #feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px} #kakinetwork_right img{position:absolute;top:-2px;left:-101px} #facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px} #facebook_left img{position:absolute;top:-2px;right:-35px} #facebook_left iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px} #twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px} #twitter_left_img{position:absolute;top:-2px;right:-35px;border:0} #google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-left:2px solid #0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px} #feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-left:2px solid #5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px} #kakinetwork_left img{position:absolute;top:-2px;right:-101px} .box-title1{border:1px solid #ddd;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:5px 5px 5px #CCC;-moz-box-shadow:5px 5px 5px #CCC;box-shadow:5px 5px 5px #CCC;margin:10px 0;padding:10px} .enteryouremail{background:#fff!important;border:1px solid #d2d2d2;color:#a19999;font-size:12px;height:25px;width:165px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0;padding:0 8px} .submitbutton{background:#F2F2F2;border:1px solid #F66303;-webkit-box-shadow:3px 3px 3px #666;box-shadow:3px 3px 3px #666;font:bold 12px Arial, sans-serif;color:#000;height:25px;-webkit-border-radius:5px;border-radius:5px;cursor:pointer;margin:0 0 0 5px;padding:0 12px} #google_plus_right_img,#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0} #kakinetwork_right,#kakinetwork_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed} #google_plus_left_img,#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0}; </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("#facebook_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#facebook_right").stop(true, false).animate({ right: -200 }, 500); }); jQuery("#twitter_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#twitter_right").stop(true, false).animate({ right: -250 }, 500); }); jQuery("#google_plus_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#google_plus_right").stop(true, false).animate({ right: -154 }, 500); }); jQuery("#feedburner_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#feedburner_right").stop(true, false).animate({ right: -303 }, 500); }); });</script> <div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div">
<img src="http://i.imgur.com/x0CZ66o.png" alt=""/> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/pages/Criadores-de-P%C3%A1ssaros-Esp%C3%A9cies/709565049060790&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true"> </iframe> </div>
</div>

Até Mais...

Ok , esta a funcionar , muito obrigado !!

Tópico Resolvido e Bloqueado
Motivo: Membro Satisfeito
Movido para: Arquivos