Hola Amigos hoy vamos a aprender a poner una caja de comentarios de facebook, en las entradas de nuestro blog.. quedando algo asi como esto :
Instrucciones:
1.- Creamos una aplicacion en el sitio de Facebook Developers:
https://developers.facebook.com/
Los Dominios que deben agregar en la aplicacion son: blogspot.com y blogspot.com.au
_________________________________________________________________________________
_________________________________________________________________________________
xmlns:og='http://opengraphprotocol.org/schema/'>_________________________________________________________________________________
3.- Ahora buscamos la etiqueta </head> y justo arriba de esa etiqueta copiamos el siguiente codigo:
<!-- Inicio Open Graph metadata -->
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://i.imgur.com/tqreGYH.png' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<meta expr:content='"es_LA"' property='og:locale'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='YOUR_APP_ID' property='fb:app_id'/>
<!-- Final Open Graph metadata -->
_________________________________________________________________________________
Reemplazamos el texto en rojo http://i.imgur.com/tqreGYH.png, esto es la imagen en miniatura que se vera cuando alguien comparta una de nuestras entradas del blog, así que pueden poner una imagen a su gusto o dejarlo como esta. Aqui un Ejemplo:
Y Tambien reemplazamos esto YOUR_APP_ID con el app id que obtenemos de la pagina facebook developers.
_________________________________________________________________________________
4.- La siguiente etiqueta a buscar es <body puede aparecernos de esta manera <body expr:class='"loading" + data:blog.mobileClass'> eso dependera de su plantilla, bueno justo en la siguiente linea despues de body pegamos el siguiente codigo.
_________________________________________________________________________________
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(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_LA/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
_________________________________________________________________________________
Aqui tambien reempleazamos YOUR_APP_ID por el AppID que obtenemos de la pagina de facebook developers.
_________________________________________________________________________________
5.- Ahora vamos a buscar el texto shareButtons y bajamos hasta encontrar los dos div que se muestran en el video, ahi pegaremos el siguiente codigo.
_________________________________________________________________________________
<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>
_________________________________________________________________________________
_________________________________________________________________________________
Bueno amigos eso es todo.. cualquier duda no duden en preguntar.
PD: No vayan a Copiar las lineas azules!! no son parte del codigo.
