Web Divertida

São raras as pessoas que ainda não procuraram um novo sistema de comentário para aplicarem em seu blog pelo simples fato de estarem cansadas do padrão do blogger, ou até mesmo querendo dar um upgrade no gerenciamento de comentários.
Escolher o sistema de comentário do facebook pode ser uma boa opção, até mesmo de ganhar mais comentários sendo que o facebook possui uma grande audiência, mas também de divulgar suas postagens. Isso deve ao fato de que quando alguém comenta no seu blog através do sistema do facebook, ele publica uma atualização automaticamente em seu perfil.

Neste tutorial não vou ensinar como substituir a caixa do blogger, até porque já ensinei aqui no cblogger.

Substituir caixa de comentário do blogger pelo do facebook

Mas sim mostrar como utilizar os dois sistemas no blog, dando dupla opção para o usuário estar comentando em seu blog, porém, com o efeito accordion no do facebook.
Dado a introdução, vamos trabalhar!
1. Primeiramente acesse o HTML do seu blogger, clique em “Expandir modelos de widgets” e procure por </head>.
2. Acima dessa tag cole código abaixo.

<script type='text/javascript'>
$(document).ready(function(){
$(".toggle_wraper").hide();
$('.twitter').toggleClass("active").next().slideToggle("slow");
$(".headings").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>

3. Agora procure por ]]></b:skin> e acima dela cole o código abaixo.

:focus {
outline: 0;
}
.toggle_wraper{ padding:0px; margin:0px;}
div#container {
margin: 50px auto 0px auto; /* centered */
width: 400px;
}
.bg {
clear: both;
margin: 0px auto;
width: 590px;
background: #fff;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.headings {
background: #59B;
height: 40px;
width: 590px;
position: relative;
padding-top:5px;
border: 0px #A2A2A2 solid;
-webkit-border-radius: 10px;
top: 0px;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
z-index: 100;
}
.headings h2 {
font-size: 30px;
cursor:pointer;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
margin-top: 0px;
}
.detail img{ float:left; margin:15px 15px 7px 32px;}
.detail {
padding: 0px 5px 35px 5px;
}
.detail h2 {
font-size: 20px;
}
.detail p {
padding-top: 19px;
font-size: 14px;
}
.detail p a {
color: #5599bb;
text-decoration: none;
}
.detail p a:hover {
text-decoration: underline;
}

4. Feito isso procure por:

<div class='comments' id='comments'>

5. Abaixo dessa linha cole o seguinte código:

<div class='bg'>
<div class='headings'><h2>Comentar Pelo Facebook</h2></div>
<div class='toggle_wraper'>
<div class='detail'>
Se não carregar, atualize a página
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'APPID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/pt_BR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:comments/>
</b:if>
</div>
</div>
</div>

6. Substitua a parte em vermelho pelo seu APPID. Se você não sabe o que é isso, trata-se da ID do seu aplicativo criando no facebook, se você não tem, clique aqui e veja como fazer um e pegar o APP ID. Leia o tópico “Criando aplicativo”.
7. Só pra finalizar, pesquise por <head> e baixo dela cole as linhas abaixo.

<meta content='NOME DE USUÁRIO DO FACEBOOK' property='fb:admins'/>
<meta content='APPID' property='fb:app_id'/>

8. Agora é só trocar as partes destacadas pelo o que se pede. Feito isso, salve.
Agora entre em uma de suas postagens e veja como ficou, o facebook com efeito accordion e o do blogger abaixo incorporado. Lembrando que só aparece nas páginas de postagem.
E esse foi mais um de nossos tutoriais. Se gostou, dê um +1 e curta no facebook diretamente pelo sistema de comentários abaixo da postagem. Não se esqueça de comentar!

Web Divertida

sábado, março 16, 2013

teste