Intercept People: Comentários do Facebook no Blogger

Tenha a caixa de comentários do Facebook em seu blog e facilite os comentários dos leitores.
Se você também quer ter esse complemento e facilitar os comentários para os leitores de seu blog, veja a seguir como é fácil de implementar.

Recomendo que faça um backup antes de começar

Tutorial

>> Para começarmos, acesse seu Blogger, vá em "Modelo" e "Editar HTML".

>> Clique no código de seu template, pressione "CTRL+F" e pesquise por <body>

ou caso não encontre procure por:

<body expr:class='"loading" + data:blog.mobileClass'>

>> Abaixo do trecho encontrado cole o seguinte código:

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

<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";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

>> Em seguida, pesquise por:

</b:includable><b:includable id='status-message'>

>> Logo ACIMA do trecho encontrado cole o seguinte código:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

<div id='comentariosFacebook'><div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'/></div>

</b:if>

* Veja na imagem o local certo de colocar o código:

* Com esse processo a caixa de comentários do Facebook aparecerá acima do formulário de comentário padrão do Blogger. Caso desejar colocar abaixo, ao invés do trecho anterior faça o seguinte:

>> Pesquise pelo trecho de código seguinte:

</div><b:if cond='data:post.includeAd'>

>> Como no processo anterior, cole o código seguinte ACIMA do trecho encontrado:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

<div id='comentariosFacebook'><div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'/></div>

</b:if>

Dentro do código que adicionamos, teremos estes parâmetros. Altere para combinar com seu blog.

data-num-posts='5' ( Número de comentários a serem exibidos )

data-width='500' ( Largura do formulário )

data-colorscheme='light' ( Cor do formulário. Caso desejar outro, troque o light por dark )

Já temos o CommentBox Facebook pronto, mas se quiser personalizá-lo siga os passos:

>> Pesquise no código por ]]></b:skin>

>> ACIMA, da tag encontrada cole o código seguinte:

#comentariosFacebook {

background:#F2F2F2; /* Cor de fundo*/

width:520px; /* largura */

padding:10px;

margin-top:0px; /* Mude para -180px, se você colocou abaixo dos comentários do Blogger */

}

>> Altere de acordo com os comentários feitos no código:
>> Salve o Modelo.
>> Vá em seu blog e veja como ficou.

Veja Como Ficou neste Blog

Fonte: prodeveloper