Bazinga Ao Contrário: Colocando Sistema de Comentários do Facebook

Olá amigos, neste artigo venho mostrar como colocar o sistema de comentários do Facebook em seu blog do blogger. O tutorial é simples, mas requer um pouco de atenção.

Tutorial

( Para auxiliar, clique nas imagens para vê-las em tamanho maior )

OBS: Antes de qualquer alteração em sua template, salve um backup de segurança.

Modelo -> Fazer backup/Restaurar -> Fazer download do modelo completo e salve o arquivo em seu computador.

Criando um aplicativo

Para utilizar do sistema de comentários do facebook é necessário a criação de um aplicativo, você vai saber o porque no decorrer do tutorial.

1. Crie um App ( Aplicativo ) no Facebook, para isso acesse esse link:https://developers.facebook.com/apps

2. Agora na página Aplicativos clique em "+ Criar Novo Aplicativo" um botão no canto superior direito da página.

3. Vai abrir um box e nele coloque o nome do aplicativo, você pode colocar o nome de seu blog ou que quizer em 'App Name' e em 'Espaço de mome do aplicativo' coloque uma palavra qualquer que deseje ( sem espaços ) Depois clique em "Continuar"

4. Pronto seu aplicativo foi criado. Você pode o configurar, personalizar, isso é com você, nestetutorial iremos precisar somente do código 'App ID' de seu aplicatvo.

Não feche a página pois o código App ID é necessário.

Colocando sistema de comentários do facebook no blogger

1. Acesse o painel de seu blog.

2. Clique na guia "Modelo" e depois em "Editar HTML"

3. Marque a opção "Expandir modelos de widgets"

4. Procure por: ( Ctrl + F )

<body

5. ABAIXO da linha encontrada cole.

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

<script>

window.fbAsyncInit = function() {

FB.init({

appId : 'APPID', // App ID

channelUrl : '//www.seudominio.com/channel.html', // Channel File

status : true, // check login status

cookie : true, // enable cookies to allow the server to access the session

xfbml : true // parse XFBML

});

// Additional initialization code here

};

// Load the SDK Asynchronously

(function(d){

var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];

if (d.getElementById(id)) {return;}

js = d.createElement('script'); js.id = id; js.async = true;

js.src = "//connect.facebook.net/pt_BR/all.js";

ref.parentNode.insertBefore(js, ref);

}(document));

</script>

Substitua o "APPID" pelo código de seu aplicativo criado.

Substitua também "www.seudominio.com" pelo domínio de seu blog. EX:www.desenvolvendoblogs.com

6. Localize a tag abaixo: ( Ctrl + F )

<data:post.body/>

<div class=’post-footer-line post-footer-line-1‘/>

7. Abaixo dela, cole:

<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<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>
<div class='fb-comments' data-colorscheme='light' data-num-posts='3' data-width='420' expr:href='data:post.url'/> </b:if>

Fonte: desenvolvendoblogs

sábado, 2 de março de 2013

Colocando Sistema de Comentários do Facebook