Este verano vimos como usar juntos comentarios Blogger y Google plus sin ser necesario conectar el blog a Google plus y ahora aparte le he sumado también el de Facebook.
Ver tambien esta nueva entrada: Comentar con Blogger, Disquus, Google+ y Facebook
COMO HACERLO
Paso # 1: Copia de seguridad de la plantilla!
Paso # 2: Plantilla >> Editar HTML (* Pulse Dentro Editor * Presione CTRL + F para activar el cuadro de búsqueda) y buscar el siguiente código:
<b:include data='post' name='post'/>
Paso # 3:y debajo de ello agrega el siguiente código:
<b:if cond='data:blog.pageType == "item"'>
<div id='com-header'>
<div align='center' style='padding-top: 5px;font-size: 16px;'><b>Para Comentar Elige el Sistema de Comentario de tu Agrado:</b></div>
</div>
<div class='commentacon'>
<script language='javascript' type='text/javascript'>
function show(id) {
var oc = document.getElementById(id).style;
hide();
oc.display = "block";
}
function hide() {
document.getElementById('gpluscomments').style.display = "none";
document.getElementById('comments').style.display = "none";
document.getElementById('comentariosFacebook').style.display = "block";
}
</script>
<style type='text/css'>#gpluscomments{margin-left:10px}
#com-header {width: 550px;margin-left:10px;padding: 2px;float:left;margin-bottom: 10px;text-align: center; }
.commentacon {background:#edeaea;width: 550px;margin-left:10px; margin-top: 5px; } #comments, #gpluscomments {display:none;}#goog{margin-left:65px;display:block;}#blog{margin-left:210px;margin-top:-45px;} #face{margin-left:355px;margin-top:-45px;}#comentariosFacebook{margin-left:15px;margin-top:10px;}</style>
<div id='goog'>
<a class='googl' href='javascript:show('gpluscomments')'><img alt='comentarios google' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh95HiJK-PQkiTxmeSW7regEaszFaVSEHzbClGQjebmRL5CJnpirbcaMN9Fv1qiqBH-3pBhJyR3Y_jcabbBCmOk-1ooS65enzRybqqrGjTdb1pwGxAl-3DubWzVoKnMAs88NmZVtJ__DUU/s1600/comentarios-google.gif'/></a></div>
<div id='blog'>
<a class='blogg' href='javascript:show('comments')'><img alt='comentarios blogger' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir5J_KurYIXKKnEVY84_rpuQ6fGv4px7qk8Jtevvfn0p9W_QdSMO8OxU68bGp7toD071umOtf8TJEuQLFOhwfhw3eZ2LUTGjht1WkJPAbK2z1U-hQLW0bDsZFTbtAjHuVDrsBXN2lnO3w/s1600/comentarios-blogger.gif'/></a></div>
<div id='face'>
<a class='faceb' href='javascript:show('comentariosFacebook')'><img alt='comentarios facebook' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoEcyIe8BxhmTudRywnMSinn4ONIlpNgT_2RsHcsQyRaWQUnZx4s0NERDfmR2LiGeLsmTqe4G-MpzQifJTcFq4VcPFMQOubQfACAn851eqdzsJvZe3A2IUboHkzhn2Ubaf_ljrLytFFfQ/s1600/comentarios-facebook.gif'/></a></div>
</div>
<div class='comentarios' id='gpluscomments'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='550' expr:data-href='data:post.url'/>
</div>
</b:if>
Paso # 4: Acontinuación veremos estas líneas:
Paso # 5: Ahora para que funcione la caja comentarios de facebook hay que localizar la etiqueta<body y justo debajo insertar el siguiente código:
**Importante** Si deseas administrar los comentarios de Facebook, edita la plantilla HTML y escribe bajo el <head> las siguientes metas:
En id perfil facebook e id pagina facebook debes meter tu número identificativo de Perfíl y Página.
Para encontrarlo es tan sencillo como entrar en ¿Cual es mi ID? e introducir tu nombre de perfíl y página.
El ancho de la caja de Facebook lo marca: data-width='540' , procuradad colocar siempre 10px menos que en el resto.
Paso # 6: Ahora presione el botón "GUARDAR PLANTILLA" y ya está todo hecho. Enhorabuena
**Si esto no funciona ...
Puede que no tenga las bibliotecas jQuery instalados en su plantilla. Para agregarlos Copia / pega el siguiente código y agregarlo a la plantilla justo antes de </head>
Imprimir artículo
<b:if cond='data:blog.pageType == "static_page"'>Trás ellas, colocamos la caja de facebook:
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='comentarios' id='comentariosFacebook'>
<div class='fb-comments' data-colorscheme='light' data-num-posts='1' data-width='540' expr:href='data:post.url'/></div> </b:if>
Paso # 5: Ahora para que funcione la caja comentarios de facebook hay que localizar la etiqueta<body y justo debajo insertar el siguiente 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/es_ES/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
***Si este código ya lo tenías añadido con anterioridad, no es necesario que vuelvas a colocarlo.***
**Importante** Si deseas administrar los comentarios de Facebook, edita la plantilla HTML y escribe bajo el <head> las siguientes metas:
<meta content='id perfil facebook' property='fb:admins'/>
<meta content='id pagina facebook' property='fb:page_id'/>
En id perfil facebook e id pagina facebook debes meter tu número identificativo de Perfíl y Página.
Para encontrarlo es tan sencillo como entrar en ¿Cual es mi ID? e introducir tu nombre de perfíl y página.
Configurar ancho de la caja:
En el código podéis observar en rojo el ancho de la caja (por defecto va a 550px), si no se adapta a vuestras necesidades, con aumentar o disminuir lo solucionáis.El ancho de la caja de Facebook lo marca: data-width='540' , procuradad colocar siempre 10px menos que en el resto.
Paso # 6: Ahora presione el botón "GUARDAR PLANTILLA" y ya está todo hecho. Enhorabuena
**Si esto no funciona ...
Puede que no tenga las bibliotecas jQuery instalados en su plantilla. Para agregarlos Copia / pega el siguiente código y agregarlo a la plantilla justo antes de </head>
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
***Si este código ya lo tenías añadido con anterioridad, no es necesario que vuelvas a colocarlo.***
No hay comentarios:
Publicar un comentario