Como colocar comentários do facebook no blogger
Autor: Priscila | Publicado: 2013-05-25T09:01:00-03:00






Nesse tutorial&nbsp;&nbsp;vamos&nbsp;&nbsp;adicionar&nbsp;&nbsp;no&nbsp;&nbsp;blogger&nbsp;&nbsp;um&nbsp;sistema que permite ter dois estilos de&nbsp;&nbsp;comentários no blogger o do&nbsp;&nbsp;face book e do&nbsp;&nbsp;próprio blogspot de&nbsp;uma&nbsp;&nbsp;forma&nbsp;&nbsp;bem&nbsp;&nbsp;organizada,&nbsp;&nbsp;se&nbsp;&nbsp;você&nbsp;&nbsp;quer&nbsp;&nbsp;&nbsp;dar&nbsp;&nbsp;&nbsp;a&nbsp;possibilidade de&nbsp;&nbsp;&nbsp;seus&nbsp;&nbsp;visitantes&nbsp;&nbsp;terem mais opções&nbsp;na&nbsp;&nbsp;hora&nbsp;&nbsp;&nbsp;de comentar&nbsp;&nbsp;nas&nbsp;&nbsp;suas&nbsp;&nbsp;postagens.&nbsp;



Para que os&nbsp;&nbsp;sistema funcione você&nbsp;&nbsp;vai precisar&nbsp;&nbsp;criar&nbsp;&nbsp;um&nbsp;&nbsp;aplicativo&nbsp;&nbsp;no&nbsp;&nbsp;facebook&nbsp;&nbsp;e&nbsp;&nbsp;pegar&nbsp;&nbsp;o&nbsp;numero&nbsp;&nbsp;"ID" para adicionar&nbsp;&nbsp;no código. 2

Veja aqui :&nbsp;Como criar um aplicativo no facebook







Com o aplicativo pronto, agora vá em&nbsp;&nbsp;editar&nbsp;&nbsp;HTML expandir&nbsp;&nbsp;modelos&nbsp;&nbsp;de widgets



&nbsp;Passo 1: Copie&nbsp;&nbsp;o código abaixo e cole acima&nbsp;&nbsp;de&nbsp;]]&gt;&lt;/b:skin&gt;




.comments-page {background-color: #f2f2f2;}

#blogger-comments-page {padding: 0px 5px;display: none;}

.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}

.comments-tab-icon { height: 14px;width: auto;margin-right: 3px;}

.comments-tab:hover { background-color: #eeeeee;}

.inactive-select-tab { background-color: #d1d1d1;}



Passo: 2 Copie&nbsp;&nbsp;o código abaixo e cole abaixo&nbsp;&nbsp;de&nbsp;&lt;/head&gt;&nbsp;E adicione&nbsp;&nbsp;seu&nbsp;&nbsp;ID&nbsp;do&nbsp;&nbsp;aplicativo facebook.




&lt;script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/&gt;

&lt;script src='http://code.jquery.com/jquery-latest.js'/&gt;

&lt;meta content='Adicione-o-código-aqui' property='fb:admins'/&gt;

&lt;script type='text/javascript'&gt;

function commentToggle(selectTab) {

$(".comments-tab").addClass("inactive-select-tab");

$(selectTab).removeClass("inactive-select-tab");

$(".comments-page").hide();

$(selectTab + "-page").show();

}

&lt;/script&gt;





No lugar do &nbsp;"Adicione-o-código-aqui"&nbsp;coloque&nbsp;o numero do&nbsp;&nbsp;seu&nbsp;aplicativo.






Passo 3: Copie&nbsp;&nbsp;o código abaixo e cole abaixo&nbsp;&nbsp;de&nbsp;&lt;div class='comments' id='comments'&gt;&nbsp;




&lt;div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comentários no Facebook'&gt;

&lt;img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/&gt;

&lt;fb:comments-count expr:href='data:post.url'/&gt; Comentários

&lt;/div&gt;

&lt;div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comentários no Blogger'&gt;

&lt;img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/&gt; &lt;data:post.numComments/&gt; Comentários

&lt;/div&gt;

&lt;div class='clear'/&gt;

&lt;/div&gt;

&lt;div class='comments-page' id='fb-comments-page'&gt;

&lt;b:if cond='data:blog.pageType == "item"'&gt;

&lt;div id='fb-root'/&gt;

&lt;fb:comments expr:href='data:post.url' num_posts='3' width='450'/&gt;

&lt;/b:if&gt;

&lt;/div&gt;

&lt;div class='comments comments-page' id='blogger-comments-page'&gt;








Observação:&nbsp;&nbsp;num_posts='3'&nbsp;referisse a o&nbsp;&nbsp;numero&nbsp;&nbsp;de&nbsp;&nbsp;comentários visíveis na&nbsp;&nbsp;pagina altere como&nbsp;quiser&nbsp;&nbsp;o numero 4,5,7... de um&nbsp;CTRL+F&nbsp;para facilitar as buscas. Se quiser aumentar ou diminuir a largura troque o número em frente a width, no caso está 450.
Obs: se o sistema de comentários ficar desalinhado, coloque o primeiro código dentro do código abaixo e cole dentro&nbsp;&nbsp;de&nbsp;&nbsp;um gadget java script,em&nbsp;&nbsp;qualquer&nbsp;&nbsp;local.



&lt;style&gt;

Primeiro código aqui dentro !

&lt;/style&gt;&nbsp;
Agora&nbsp;&nbsp;vá em&nbsp;configurações,&nbsp;&nbsp;postagens,&nbsp;&nbsp;e&nbsp;comentários,&nbsp;&nbsp;local&nbsp;&nbsp;do&nbsp;&nbsp;comentário,&nbsp; escolha&nbsp;&nbsp;a&nbsp;&nbsp;opção&nbsp; pagina&nbsp;&nbsp;inteira e salve.&nbsp;