Para agregar de una forma más detallada y vistosa el botón "Me Gusta" a Blogger tendremos que:
1) Ir a http://www.facebook.com/developers
2) Click en + Crear nueva aplicación (se encuentra en la parte superior derecha de la página)
3) Escribir el nombre de la aplicación en "App Name:" (por ejemplo: NombredetuBlog Like) > seleccionar Continuar > click on Create Application
4) En la sección "Locale" buscamos y seleccionas la opción "Español"
5) Click en la casilla "I agree to the Facebook Terms." (si es que estás de acuerdo con los términos y condiciones, claro está)
6) Click en Continuar para finalizar con la creación.
A este punto podremos apreciar que ya tenemos el código de "App ID", podemos personalizar subiendo fotos y editar el icono, pero hay que continuar con el siguiente paso:
7) Debajo de "Información básica" damos click en la opción "Website", dentro de "Site URL" escribes la dirección de tu blog, por ejemplo, en mi caso es: http://yo-lo-veo-asi.blogspot.com/
Y dentro de "Site Domain" escribimos: blogspot.com
Finalizamos este paso haciendo click en "Guardar cambios"
8) Pasado unos minutos (entre 5 y 20) el servicio estará activo para utilizar desde Facebook.
Ahora continuamos con agregar el protocólo meta de Open Graph. Para ello buscamos el inicio de la etiqueta <head> y debajo de ella agregamos el siguiente código:
Continuamos editando el código del blog, regresamos y buscamos el tag <body>, y debajo de él agregamos el siguiente código:
Ya para finalizar sólo falta decidir en que lugar ubicar el botón de "Me gusta", si deseas que vaya por encima de las entradas de tu blog entonces agrégalo en:
Por el contrario si deseas que el botón se muestre en la parte baja de la entrada de tu blog agrégalo así:
Pero si deseas que el botón solamente se muestre dentro de cada entrada que ha sido publicada agrega el siguiente código:
Y para finalizar sólo queda dar click en "GUARDAR PLANTILLA"
7) Debajo de "Información básica" damos click en la opción "Website", dentro de "Site URL" escribes la dirección de tu blog, por ejemplo, en mi caso es: http://yo-lo-veo-asi.blogspot.com/
Y dentro de "Site Domain" escribimos: blogspot.com
Finalizamos este paso haciendo click en "Guardar cambios"
8) Pasado unos minutos (entre 5 y 20) el servicio estará activo para utilizar desde Facebook.
Inicia sesión en Blogger y vas a "Diseño" > "Edición HTML"
- Una vez ahí, marcar la casilla "Expandir plantillas de artilugios"
- Ahora agregaremos los atributos XMLNS de Facebook. Busca el inicio del código <html (usualmente ubicado en la línea 4 del código) y al final de ella agrega el código de a continuación (justo al finalizar ...2005/gml/expr')
<html expr:dir='data:blog.lan.........com/2005/gml/expr' xmlns:og='http://ogp.me/ns#' xmlns:fb='http://www.facebook.com/2008/fbml'>
Ahora continuamos con agregar el protocólo meta de Open Graph. Para ello buscamos el inicio de la etiqueta <head> y debajo de ella agregamos el siguiente código:
<head>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
</b:if>
<meta content='NOMBRE DE TU SITE' property='og:site_name'/>
<meta content='DESCRIPCIÓN DE TU SITE' property='og:description'/>
<meta content='http://i.imgur.com/YAfPx.jpg' property='og:image'/>
<meta content='TU APP ID' property='fb:app_id'/>
<meta content='ID DE TU PERFIL DE FACEBOOK' property='fb:admins'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
</b:if>
<meta content='NOMBRE DE TU SITE' property='og:site_name'/>
<meta content='DESCRIPCIÓN DE TU SITE' property='og:description'/>
<meta content='http://i.imgur.com/YAfPx.jpg' property='og:image'/>
<meta content='TU APP ID' property='fb:app_id'/>
<meta content='ID DE TU PERFIL DE FACEBOOK' property='fb:admins'/>
- Cambia NOMBRE DE TU SITE por el nombre que tiene tu página de blog.
- Cambia DESCRIPCIÓN DE TU SITE por la descripción que identifica a tu blog.
- Cambia http://i.imgur.com/YAfPx.jpg (o si no quieres no :P) por el logo de tu blog, una imagen que identifique a tu blog, o si deseas puedes borrar este tag si no quieres imagen alguna.
- Cambia TU APP ID con tu número propio de APP ID.
- Cambia ID DE TU PERFIL DE FACEBOOK con tu propio ID del perfil de facebook (esto lo puedes encontrar copiando los números de tu propio perfil http://www.facebook.com/profile.php?id=xxxxxxxxxx )
Si tienes problemas para ubicar el ID de tu perfil porque en lugar de números está tu propio nombre personlizado, anda a tu perfil de Facebook, da click derecho sobre la imagen de tu perfil y da click en "Copiar la ruta de la imagen" (en Firefox), obtendras un código, por ejemplo, el que yo obtengo es:
http://profile.ak.fbcdn.net/hprofile-ak-snc4/187026_xxxxxxxxx_7049659_n.jpg
Si es el código correcto verás tu propio perfil
http://profile.ak.fbcdn.net/hprofile-ak-snc4/187026_xxxxxxxxx_7049659_n.jpg
En donde están las X en rojo es un código que identifica a tu cuenta, cópialo y luego pruébalo poniéndolo en:
http://www.facebook.com/profile.php?id=xxxxxxxxxxxSi es el código correcto verás tu propio perfil
Continuamos editando el código del blog, regresamos y buscamos el tag <body>, y debajo de él agregamos el siguiente código:
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'TU APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/es_LA/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'TU APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/es_LA/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
- Cambia TU APP ID con tu número propio de APP ID.
- Fíjate en el detalle es_LA si lo dejas así, saldrá en español el script, pero si estás haciendo una web en inglés modifícalo por en_US y así obtendrás el script en idioma inglés.
Ya para finalizar sólo falta decidir en que lugar ubicar el botón de "Me gusta", si deseas que vaya por encima de las entradas de tu blog entonces agrégalo en:
<div class='post-header-line-1'/>
<div><fb:like expr:href='data:post.url'/><br/><br/></div>
<div><fb:like expr:href='data:post.url'/><br/><br/></div>
Por el contrario si deseas que el botón se muestre en la parte baja de la entrada de tu blog agrégalo así:
<data:post.body/>
<div><fb:like expr:href='data:post.url'/><br/><br/></div>
<div><fb:like expr:href='data:post.url'/><br/><br/></div>
Pero si deseas que el botón solamente se muestre dentro de cada entrada que ha sido publicada agrega el siguiente código:
<b:if cond='data:blog.pageType == "item"'><div><fb:like expr:href='data:post.url'/><br/><br/></div></b:if>
Y para finalizar sólo queda dar click en "GUARDAR PLANTILLA"
- Ejemplo del código aplicado:
Recuerda que puedes modificar el código de la manera que vimos en la forma Simple de agregar el botón me gusta.
El resultado que obtendremos cuando alguna persona da click en el botón "Me gusta" usando la forma Completa será así:
El resultado que obtendremos cuando alguna persona da click en el botón "Me gusta" usando la forma Completa será así:
