25 jun 2013

Introduce los comentarios de Facebook en Blogger

Incrementar las prestaciones de nuestro Blog permitiendo nuevas formas de acceso a las redes sociales para nuestros usuarios siempre puede resultar provechoso.

La página de Referencia de Facebook Developers es un auténtico arsenal de gadgets que pueden servirnos para mejorar nuestras posibilidades sociales.

El problema es también saber incorporarlos sin afectar al rendimiento general de nuestro sitio web. Vamos a aprender a poner los comentarios del Blog con Facebook de manera que conectemos nuestro mundo Blogger con el mundo de una de las redes sociales más utilizadas en todo el planeta.

Vamos a incorporar en nuestro Blog la caja de comentarios de Facebook para que los usuarios puedan comentar en el muro las dudas, observaciones y recomendaciones que consideren. El resto de usuarios podrá "seguir" o pulsar en "Me gusta" con los comentarios que otras personas introduzcan en las entradas del Blog.


Conceptos Iniciales, ¿Qué vamos a hacer?:


Vamos a proceder a incorporar un "widget" o componente de aplicación externa de Facebook mediante el cual nuestros usuarios podrán comentar todo lo que sucede en las entradas de nuesto blog, además se podrán marcar los comentarios más relevantes. Los usuarios podrán pulsar "Publicar en Facebook" para mostrar su comentario en el perfil social. Otros usuarios que lo lean podrán así mismo contestar a esos comentarios y podrán verse directamente en tu Blog. Se trata de un "plugin social" que te permitirá llegar a nuevos usuarios a través de los comentarios de tus seguidores.

Ejemplo visual de cómo quedan los comentarios de Facebook en el Blog.

Recomendaciones:


Es importante hacer la reseña de rendimiento, la incorporación de "scripts" de aplicaciones externas a nuestro Blog pueden implicar un sobrecoste para el rendimiento del mismo. Es necesario que cada vez que incorporemos esta clase de elementos en él, midamos el rendimiento del sitio con Page Speed para evaluar si estamos perdiendo velocidad de ejecución y más que suponer una ventaja, suponga un inconveniente.

Los comentarios de Facebook no se almacenan en tu cuenta de Google+ o Blogger, se almacenan en Facebook. Para utilizar los comentarios de Blogger te recomiendo la entrada: Aprende a configurar los comentarios en tu Blog

Paso a paso:


1) Nos conectamos a la URL de Facebook Developers, a la página para el "widget" de comentarios: http://developers.facebook.com/docs/reference/plugins/comments/

Página de configuración del "Widget" para comentarios de Face Book


  • Introduce los datos en la sección de configuración del widget de la página de Facebook:
  • Introduce en "URL to comment" la dirección de tu Blog.
  • En Width pon el ancho que desees establecer para el widget. Puedes cambiarlo después tranquilamente cuando lo insertes en tu Blog.
  • Selecciona en "Color Scheme" el esquema de color  que deseas darle. Si tu Blog es claro puedes seleccionar "Light" si es oscuro te recomiendo "dark".
  •  A continuación pulsa sobre el botón "Get code" para obtener el código fuente que debes poner en tu sitio web. Tendrás dos divisiones, una con el código que debes introducir en el <body> de tu blog y otra con el código que introducirás en el Gadget HTML/Javascript donde residirá finalmente el Widget de comentarios de Facebook.


2) Ahora sólo queda insertar el código extraído de Facebook en tu Blog. Dentro de Blogger dirígete al menú de la izquierda, a la opción Diseño.

  • En primer lugar realiza una copia de seguridad de tu sitio. Aunque es realmente sencillo lo que vamos a hacer, recomiendo que previamente tengamos a buen recaudo nuestro código original, de manera que siempre podamos "volver atrás" ante cualquier error. No dejes de realizar esta guía paso a paso para salvaguardar tu blog.
  • En Blogger, en el menú de la izquierda, dirígete a la opción "Plantilla" y pulsa "Editar HTML". Localiza la etiqueta "<body" (no pongas la etiqueta de cierre de body) y justo debajo inserta el código que extraiste de Facebook correspondiente al apartado del "<body>".
Pantalla de edición de la plantilla HTML. pulsa CONTROL + F y busca la etiqueta "<body"
<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>

NOTA: Debido a la última actualización que Facebook ha introducido en sus scripts, si te da errores en la plantilla al tratar de salvar el código anterior, utiliza este que a continuación te muestro.
<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 = &quot;//connect.facebook.net/es_ES/sdk.js#xfbml=1&amp;version=v2.0&quot;;  fjs.parentNode.insertBefore(js, fjs);}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Si este código ya lo tenías añadido con anterioridad por tener alguna funcionalidad de Facebook incorporada ya al Blog, no es necesario que vuelvas a meterlo y puedes pasar al siguiente punto.
Ahora continúa con las dos formas de añadirlo a tu Blog. 


DOS OPCIONES PARA AÑADIR LOS COMENTARIOS DE FACEBOOK EN BLOGGER: 


Comentarios de Facebook en un Gadget HTML:

  • 1) Dentro de Blogger ve a la opción de menú diseño (está seleccionada en el pantallazo inferior, te aparecerá una pantalla como la que se muestra a continuación).


  • 2) En la zona donde desees que aparezcan los comentarios (por ejemplo debajo del bloque llamado "Entradas del Blog") pulsa "Añadir gadget" y selecciona el de tipo HTML/Javascript

  • 3) Copia el código que extraíste de Facebook para la caja de comentarios configurada para tu Blog:
<div class="fb-comments" data-href="http://NOMBRE_DE_TU_BLOG" data-numposts="5" data-colorscheme="light"></div>
¡Ya tienes los comentarios de Facebook a nivel de Blog como un gadget más en tu página principal!.

Comentarios de Facebook en tu plantilla para que aparezca sólo a nivel de entrada 

  • 1) Ahora, de nuevo pulsando CONTROL+F busca la siguiente línea de código:
shareButtons
  • 2) Encontrarás esa palabra clave con el siguiente código:
 <b:include data='post' name='postQuickEdit'/>
      </span> <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name=
'shareButtons'/>
        </b:if>
      </div> </div>
  • 3) Justo debajo del doble cierre de div: </div> </div> introduce el código que recuperaste de la página de Facebook Developers para añadir los comentarios de Facebook junto con una línea condicional que hará que sólo salgan cuando el usuario acceda al detalle de una entrada:
<b:include data='post' name='postQuickEdit'/>
      </span> <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div> </div>
<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> 
  • <b:if cond='data:blog.url != data:blog.homepageUrl'></b:if> : El "if cond" y su cierre al final en rojo expresan que sólo se mostrará lo que entre sus etiquetas se encuentre, cuando el usuario acceda al detalle de una entrada (cuando pulse "Más información").
  • <div id='comentariosFacebook'><div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'/></div>Es el código que extraiste de Facebook Developers para colocar la edición de comentarios de la citada red social. Podrás modificar el "widht" (ancho) con respecto al ancho en píxeles de tus entradas.data-num-posts='10' :indica el número máximo de comentarios por página. Presta especial atención al uso de data:post.canonicalUrl que permitirá que el comentario quede exclusivamente vinculado a la entrada donde se ha realizado.
  • Pulsa "Guardar Plantilla" y ¡eso es todo!, ya tienes por fin comunicados ambos mundos: la parte Blogger con la parte Facebook.
3) Opcionalmente, Si deseas administrar los comentarios que se introduzcan, para eliminar o impedir que los usuarios escriban contenido irrelevante o abusivo, de nuevo edita la plantilla HTML y escribe en el <head>:

<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>
  • En YOUR_FACEBOOK_USER_ID debes meter tu número identificativo de Aplicación Facebook. Para encontrarlo es tan sencillo como ponerte encima de la foto de tu perfil en tu página de facebook y copiar la URL que contiene (NO la imagen sino el perfil):
https://www.facebook.com/photo.php?fbid=xxxxxxxxxxxxxxxxx&set=a.xxxxxxxxxxxxxx.xxxxxxxx.xxxxxxx&type=1&source=11
El número de 17 posiciones a la derecha de "fbid=" es el que debes poner en APP ID.

Solución de problemas con ejemplo código descargable de plantilla básica en Blogger con los comentarios de Facebook incrustados a nivel de entrada:

Esto es un ejemplo descargable de una plantilla básica de Blogger con el código fuente que utilizamos en la guía para que pueda servirte para entender cómo y dónde tienes que colocar el código:

Descarga plantilla de ejemplo

También puedes guardarlo directamente en tu cuenta Drive para luego verlo desde donde quieras:



NOTA: NO utilices este código directamente en tu plantilla o machacará tu presentación, es sólo un ejemplo descargable para que entiendas cómo queda y puedas solucionar problemas.


Localizarás las dos partes del código que informa la guía:

1) La parte que sigue al Body:


2) la parte que sigue a los Share Buttons:



Cualquier duda, dispones de los comentarios para preguntarla.

Por Miguel García Sánchez-Colomer.

Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

126comentarios:

  1. Disculpa. Por más que busco solo encuentro esta etiqueta < barra body > pero no la de apertura. No lo entiendo. He repasado la plantilla de arriba a abajo mil veces con el buscador y aparece "body" pero no como etiqueta aislada. el único <body que me aparece es este:
    <body expr:class='"loading" + data:blog.mobileClass' y cierre

    -Lo escribo así porque en el comentario no me deja publicar la fórmula html correcta-


    ¿qué hago mal?
    saludos

    ResponderEliminar
    Respuestas
    1. Hola Javier,
      ¡Esa es!, justo debajo de esa línea metes el script de Facebook (el que pongo que va al Body) y luego ya pones el que va debajo de los "share-buttons".

      Cualquier cosa aquí me tienes, mantenme informado si lo logras.

      Un saludo!,

      Eliminar
  2. Muchas gracias Miguel. Tienes un blog superinteresante. Tus explicaciones son superclaras -el que no me aclaraba era yo-. Ya lo he colocado en el blog -www.siempredepaso.es- y lo estoy probando, pero veo que queda muy raro que los comentarios que hagas al final de un post aparezcan en todos los demás del blog. No sé, creo que no me acaba de convencer... Saludos

    ResponderEliminar
    Respuestas
    1. ¿Y quito la dirección de mi blog?

      Eliminar
    2. Sí, en el href pones lo de data:post.url. Prueba a ver si con eso sirve.

      Eliminar
    3. Efectivamente, ya lo he hecho y los comentarios se circunscriben al post donde los pongo pero... me aparece un mensaje de error (ahora no recuerdo, pero era algo así como "no se localiza la url")...

      Gracias, Miguel. Si no se puede, voy a dejar la caja de comentarios de facebook en la columna lateral para que sea común a todo el blog.

      saludos

      Eliminar
    4. Eso es que no hay permisos entre Facebook y el Blog. Voy a estudiarlo y te digo. De todas formas, ponerlo a nivel de Blog es buena idea. Saludos!,

      Eliminar
    5. ¡Ya está arreglado Javier!, ahora los comentarios a nivel de entrada sólo. Saludos!

      Eliminar
  3. Hola, Miguel. Muy bueno tu post. Sin embargo, presento el mismo inconveniente de Javier. Debería haber una forma -sin errores- de que cada comentario esté sujeto a su respectiva entrada. Por ejemplo, me he fijado en esta página:

    http://cochinopop.com/noticias/interesante/las-nuevas-y-bestiales-figuras-de-accion-de-daft-punk-fotos/

    Quizás te ayude y con ello nos ayude a todos. Saludos.

    ResponderEliminar
    Respuestas
    1. Hola tengo que probarlo con tiempo, pero creo que el href bastará con poner data:sourceUrl. NO he podido probarlo.

      El problema es que Facebook está guardando los mensajes y al guardarlos los pone todos en la misma URL (la principal de tu Blog).

      Otra opción que tengo que probar aún es:

      1) crear una función javascript para recuperar la URL de la entrada

      2) Llamar a la función que recupera la URL en el href del div de Facebook, de manera que Facebook recupere esa url

      Lo pruebo y os digo.

      Eliminar
    2. Le Corvo Mécanique,
      arreglado... no lo he hecho como está en la web de cochinopop. He investigado utilizando una variable del propio blog para asociar el comentario por URL.Está por fin solucionado.

      Gracias por insistir e informar del problema. Espero que te guste y venga bien. Un saludo!.

      Eliminar
    3. ¡Qué bueno, Miguel! Me ha funcionado perfectamente. Muchísimas gracias. Tu trabajo aquí ya está recomendado.

      Eliminar
  4. Hola Miguel,
    en tu ultimo comentario dices que lo sulocionastes utilizando uan variable del propio blog...pero no veo la solucion. Me la podrias comunicar porfavor. Esque me encuentro enfrentado con el mismo problema que Le Corvo.
    Muchisimas gracias y tus tutoriales son estupendos

    ResponderEliminar
    Respuestas
    1. En el penúltimo paso antes del paso 3). Fíjate que al href de Facebook ahora se le pasa data:post.canonicalUrl. Con eso te funcionará.

      Cualquier cosa aquí me tienes.

      Eliminar
    2. Lo acabo de resolver. Pero ahora mismo tengo el siguiente problema: la etiquetas o labels aparecen bastante mas debajo de los comentarios del facebook. como puedo hacer para subirlo un poco mas?

      Eliminar
    3. Mándame la URL y te lo miro para que lo dejemos arreglado. No te preocupes, al principio puede ser un poco lío pero sale.

      Lo dicho, pásame la URL y veo lo que indicas, es que contado es difícil de entenderlo del todo.

      Un saludo!.

      Eliminar
    4. Muchas gracias de de nuevo Miguel por tomarte el tiempo. te mande por correo tambien la html aunque supongo que no te hara falta. Pero por si las moscas. Aqui la url: http://www.marysol.eu

      aparte me di cuenta de una cosa nueva. Si me meto con un tablet o con un movil usando el navegador (chrom) por ejemplo, me sale la caja de comentarios bastante larga, osea que alarga el post un monton aunque no haya comentarios.

      un saludos y muchas gracias de nuevo Miguel

      Eliminar
    5. Este comentario ha sido eliminado por el autor.

      Eliminar
  5. Hola, primeramente muchas gracias por todo el apoyo que das haciendo este trabajo que para algunos de nosotros es bastante complicado.

    Mi duda es: bueno, ya logré añadir la caja de comentarios. El asunto es que otras personas comentan en mi blog y no logro ver lo que ellas ponen aunque ellas si ven mis publicaciones.

    Por otro lado no llegan las notificaciones a facebook de los comentarios.

    Creo que el principal propósito de esta caja es para estar al tanto de los comentarios, qué puedo hacer? me ha fallado algo?

    Blog: http://unaseriedeconsejos.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Estéticamente tu Blog es muy bonito y tiene buen rendimiento, te felicito.

      Revisa de nuevo el código que he puesto en el paso 2), aegúrate que lo tienes así para descartar errores. Si lo tienes así, vuelve a escribirme para conectarme y ver qué puede estar sucediendo.

      Por otro lado, los comentarios sólo los verán los usuarios que marquen la opción de publicar en el muro.

      No hay notificaciones directas como sí sucede con los comentarios de Blogger. Supongo que en la configuración de Facebook sí se podrá variar el nivel de notificación para cuando alguien realemente publique el comentario.

      Un saludo!,

      Eliminar
    2. Otra cosa, si quieres que te lleguen las notificaciones de nuevo comentario, puedes hacerlo creando una aplicación en Facebook a tal efecto.

      1) Entra en Facebook Developers y pulsa "Crear nueva aplicación"

      2) En la siguiente pantalla mete el nombre de tu sitio web. Cópiate el número de APP ID que te ponen.

      3)Luego antes del cierre del head mete un meta content con el nombre de tu usuario con property='fb:admins' y otro igual pero con con el APP ID que te pusieron en el paso 2 con property='fb:app_id'.

      4) Te saldrá la caja de comentarios con un icono de configuración en el extremo derecho (una rueda dentada), hazle clic y en la pantalla que te sale en "Moderadores" añade tu nombre. Así recibirás las notificaciones.

      Un saludo!

      Eliminar
    3. Hola, gracias!!!

      Precisamente en esa parte es donde estoy "atorado". He intentado ya 3 veces el asunto de Developers y he creado 2 veces la aplicación. he copiado el código que me da y el id de mi face lo he agregado también. La box sigue apareciendo, pero no me da la opción del engranaje para ADMIN. Lo he intentado con mi face de perfil y con una fan page de facebook. No tengo idea donde ando mal

      Eliminar
    4. otra cosa, he hecho comentarios desde diversas cuentas y los comentarios de cuentas ajenas a lamia miran mis comentarios, pero yo no miro los comentarios nuevos de personas ajenas :/

      Eliminar
    5. bueno, creo que he avanzado. ya tengo acceso a la opción de administrador. Pero siguen habiendo 2 cosas que no me satisfacen.

      1.- no me llegan notificaciones, tengo que accesar manualmente a las entradas para ver los comentarios y
      2.- tengo que moderar cada comentario sea público o no para que pueda aparecer en el blog. Cuando lo que me gustaría es que hubiera libertad de publicación.

      Me puedes ayudar en eso?

      gracias!

      Eliminar
    6. Bien, tras pensarlo un tiempo reconsideré que será más fácil quedarme con los comments de Blog. Esto me ha resultado complicado y lo que quiero es sencillez, especialmente para los visitantes. Trataré de no usar los comments de Google+ sino los clásicos.

      Igual te agradezco tu tiempo y te felicito por tan excelente Blog y por tan tremenda paciencia y dedicación en este mundo de los tutoriales.

      Eliminar
    7. Un placer ayudar. Yo prefiero también los comentarios de Blogger, al final lo otro es un añadido y es más difícil de controlar. Pero para gustos los colores, si tienes presencia en Facebook sí es muy interesante.

      Para cualquier cosa aquí me tienes.

      Eliminar
  6. Hola! que tal tengo un problema ya que en mi plantilla no me aparece el shareButtons y no puedo agregar la barra de coments a cada post... solo al blog en general hay alguna otra forma?

    ResponderEliminar
    Respuestas
    1. No hay problema, seguro que tiene solución. Ponme la URL y veo por dónde se pueden poner. Es cuestión de ver los componentes que tengas agregados al final de página y buscar dónde puede encajar. Ve haciendo copia de seguridad por si hay problemas --> http://diariosdelanube.blogspot.com.es/2013/04/realizar-una-copia-de-seguridad-de-tu.html

      Eliminar
  7. Hola! En mi pagina tampoco aparece sharebuttons
    esta es mi web : antesdearrancar.blogspot.com

    ResponderEliminar
  8. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. Es que estoy sin ordenador ahora... Busca el cierre de los sharebuttons y justo debajo metes el código. HAZ COPIA DE SEGURIDAD. Cualquier cosa me dices.

      Eliminar
  9. Excelente muchas gracias por compartirlo :D

    ResponderEliminar
    Respuestas
    1. Gracias a ti Ricardo, aquí estoy pata ayudar. Te invito a leer otros tutoriales que puedan servirte. Cualquier cosa aquí estoy. Un saludo!

      Eliminar
  10. VARIOS INTENTOS PERO NO MAS NADA QUE FEO NO PODRAS HACERME UN BLOG CON ESE WIGETD INSTALADO JEJEJJEJE

    ResponderEliminar
    Respuestas
    1. Hola Our Friend... No puedo hacerlo aunque quisiera... ¿Dónde te atascados?, a ver si te puedo ayudar.

      Eliminar
  11. Hola, tengo un grave problema, ya tenia instalado los comentarios de facebook en mi blog y ahora desaparecieron, hace poco me di cuenta de eso, asi que no se hace cuanto tiempo no estan mas. Podrias darme una mano por favor? Mi blog es desdeelcosmos.blogspot.com
    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. ¿Has realizado cambios en la plantilla?. Si no tienes copia de seguridad, intenta repetir los pasos, pon especial atención en el del final y con la parte de canonical puede que los recuperes. Paciencia, inténtalo. Un saludo y suerte!

      Eliminar
  12. Hola! sabes que tengo dos blog y al primero que tengo desde el año pasado si me resulto colocar la caja de comentarios pero en el blog nuevo (que hice hoy) no me resulta y seguí los mismos pasos ¿será porque es nuevo?

    ResponderEliminar
  13. No debería fallar por ser blog nuevo... Pasame la dirección y lo veo. A ver si encuentro algo. Un saludo!

    ResponderEliminar
  14. Tengo un problema al poner la caja de comentarios,cuando publican su comentario deberia ir el enlace y comentario que hizo el visitante en su muro de facebook pero; cada vez q lo pruebo me pide confirmar para publicar el comentario ._.

    ResponderEliminar
    Respuestas
    1. ¿Me pones un enlace para verlo?, es que así explicado te he entendido regular. Así probándolo supongo que me será más fácil verlo. Un saludo.

      Eliminar
    2. tublog101.blogspot.com < al entrar a una entrada publicada aparece abajo pero al comentar necesitar dar a publicar el enlace en el muro, he visto yo otros webs q cuando publicas automaticamente aparece ya en el muro del que comento..

      Eliminar
    3. Hola Juancho. Una pasada el Blog, te ha quedado muy bien.

      He entrado y he comentado y no he tenido problemas. Ahora el nuevo API de Facebook pregunta si quieres publicar en el muro el comentario antes de hacerlo, si el usuario le da al "check" se publicará en el muro (sale un mensaje que pone: "Este comentario aún no ha sido publicado en Facebook. Publish Comment", le das a "Publish" y listo). He hecho la prueba en tu blog, en la entrada de Naruto y veo en mi muro el comentario con tu entrada.

      Un saludo!

      Eliminar
  15. ¡MUCHAS GRACIAS MIGUEL! :D

    Me ha funcionado a la primera, y es justo lo que quería... Las letras no se distinguían porque el fondo de mi blog es oscuro, jajaja
    Pero le metí un div style="background-color:#EDEFF4" el mismo color que los bloques de comentarios en Facebook y ahora se ve perfecto, jajajaa
    Este es mi blog, llevo 3 días con él, soy informático, pero no dimos blogs sino Joomla. Blog es mucho más cómodo.

    http://klaus-net.blogspot.com.es/

    Y aquí como metí el código, me gusta estructurar las cosas con comentarios :3
    http://imageshack.us/a/img585/2443/w3zj.png

    Y queda genial:
    http://imageshack.us/a/img28/5810/4e2n.png

    Muchas gracias, y muy buenos tutoriales en tu blog, respondes a todos los comentarios, eres genial XD

    Saludos

    ResponderEliminar
    Respuestas
    1. Gracias a tí Klaus, gente como tú hace que esto tenga sentido. Un placer haber ayudado.

      Eliminar
  16. Naaa, me di cuenta de algunos errores, pero ya ya lo solucioné todo y sí está perfecto. Comento y me respondo yo solo... Saludos! XD

    ResponderEliminar
    Respuestas
    1. Por cierto usé el mismo código del expr:href='data:post.canonicalUrl'/> para los likes, muchas gracias de verdad, este artículo me ha dado claves y trucos interesantes y que ya tengo apuntadas para no olvidar :D

      Eliminar
    2. Genial, esto me ayuda en serio, parece una tontería pero se agradece el feedback y más aún cuando es positivo. gracias a tí. Aquí estoy para lo que necesites Klaus. Por cierto, te ha quedado genial el Blog. Ahora a posicionarlo!. Disfruta!.

      Eliminar
  17. Hola tu blog me ha servido de mucho , todo me va bien pero no encuentro la palabra sharebutton , lo intento con el contro f pero igual no lo encuentro . Porfa ayudame te lo agradeceria muchisimo encerio

    ResponderEliminar
    Respuestas
    1. Hola!,
      mándame la plantilla a miguelcolomer@gmail.com y te los busco... ¡no desesperes que te va a funcionar!. Un saludo!

      Eliminar
  18. Que tal ... jejeje encontre todas la palabras todo ... pero no me sale ... ingrese los codigos en cada parte pero es extraño no sale :P

    ResponderEliminar
  19. Hola Miguel, gracias por este artículo, en serio lo necesitaba. Quisiera preguntarte: Existe alguna forma de tener comentarios es la página principal del blog y a la vez para cada entrada? Un saludo

    ResponderEliminar
    Respuestas
    1. Hola Dedstrock, encantado que te sirviera. Puedes poner el mismo código que utilizas en las entradas en cualquier parte de la plantilla, lo que no necesitarás poner esta vez es el "if cond" para que sólo salga por la entrada.

      Un saludo y muchas gracias por comentar!

      Eliminar
    2. Siento molestarte de nuevo, he cambiado de plantilla y me es un poco dificil seguir las explicaciones, tengo unas dudas:

      1- La parte de "data:post.canonicalUrl" es obligatoria? Porque no me apareció en el código que me dió Facebook.
      2- Por si no se entendió mi duda, es posible tener comentarios en la página principal y a la vez cada entrada individualmente? Es decir, que no se "mezclen" los comentarios de todas la entradas, sino que cada entrada tenga sus comentarios por separado y también la página principal, oséa que cuando yo acceda a la entrada, esta tenga sus propios comentarios. (Estoy dudando sobre poner comentarios de Facebook en el inicio, que dices?)
      3- Está bien ubicado el código?
      http://2.bp.blogspot.com/-EiBAryTxHVc/Utt6vtl08FI/AAAAAAAAAGs/wkpCN1SdOxQ/s1600/Duda+blog.jpg
      4- Los comentarios de Facebook irán antes de los del blog?

      Este es mi blog http://www.zonadedstrock.blogspot.com.ar todavía no he publicado ninguna entrada porque quiero tener listo el blog, debería publicar algo para hacer pruebas?

      Disculpa las molestias, no tengo problema para esperar una respuesta, un saludo.

      Eliminar
    3. No hay problema,

      1) El canonical te permite que el comentario quede asociado a la URL donde se encuentre. Debes ponerlo para comentar por entrada.
      2) Si quieres tenerlo bien para que se comente a nivel de blog y nivel de entrada, mi consejo es que pruebes esto:

      a) que los comentarios de las entradas tengan el CANONICAL que hemos comentado en el punto 1) y que tengan el IF COND que viene en el tutorial para que sólo se muestren cuando el usuario haga "clic" para acceder al detalle de la entrada.

      b) Que los comentarios a nivel de Blog lleven el código separado del de nivel de entrada (sin el if cond) y esté colocado en la página principal donde prefieras. Que no utilice CANONICAL sino la propia dirección principal del Blog.

      3) Lo puedes poner donde prefieras. Seguido de los Sharebuttons y tal como comento en la guía es lo mejor.

      4) Si los pones seguidos de los Sharebuttons irán antes de los del Blog.

      5) Es necesario que publiques entradas para que se ven los comentarios de dentro de las entradas (una vez hagas una prueba a comentar con la caja de los de facebook). Si has puesto código para poder comentar a nivel de Blog, éste debería de poder verse ya.

      No es ninguna molestia ayudar, a mí me encanta hacerlo. Espero que te funcione, si no, aquí me tienes.

      Un saludo Dedstrock!.

      Eliminar
    4. Gracias por responder. Estoy comenzando con esto del blog y aún no entiendo algunas partes, veo que tienes una página muy buena, me verás preguntar por aquí muy seguido JAJA. Un saludo.

      Eliminar
    5. Aquí estaré Dedstrock, lo que necesites. Un saludo!

      Eliminar
    6. Siento molestarte (o tal vez no te molestas), me podrías dar un ejemplo de lo que dices en 2b? Sería así como me lo da Facebook? (perdona si no pude poner texto, no quieren aceptar mi HTML u__u)

      http://1.bp.blogspot.com/-Hjbw4gtdXR0/UuDZ3wdPeDI/AAAAAAAAAKg/IRFwH4u6DAI/s1600/Duda+blog+2.jpg

      Lo pongo seguido del código de los comentarios al nivel de entrada?


      Eliminar
    7. Hola Dedstrock,
      no sé si te funcionó con la reparación de plantilla que te hice. Lo puedes colocar después de los comentarios pero mejor pon el código del punto 2) del data:post.canonicalUrl.

      Un saludo!

      Eliminar
    8. Hola Miguel.
      Primero que nada, gracias por responderme de nuevo, lo estuve pensando un poco y viendo tus posts sobre el rendimiento de las páginas web con muchos enlaces externos, decidí no poner comentarios en la página principal, sino en las entradas, así no tarda en cargar tanto mi página. Gracias por esos posts.

      Un saludo.

      Eliminar
    9. Hola Dedstrock,
      has hecho bien. La entrada principal no conviene "saturarla" para que la sensación de velocidad y fluidez de navegación sea mayor.

      Gracias a ti por los ánimos.

      Un saludo!

      Eliminar
    10. Ya te he añadido la descarga de un ejemplo en código. Un saludo!!!. OJO, no utilizar como tu plantilla, es sólo un ejemplo.

      Eliminar
  20. Hola, sabes que hemos tenido muchos problemas con la plantilla del blog. Lamentablemente ya hicimos todo en torno a ella pero los famosos "sharebuttons" aparecen tras el titulo y tags de cada entrada, no al final de cada una, entonces sigo las instrucciones de aquí y la caja de facebook me queda siempre antes del texto de cada entrada. He tratado de mover los share buttons al final con la herramienta de diseño pero siempre aparecen al principio, y en el HTML me aparecen "al final" como

    ...

    (los ... es el expandible)

    y trato de poner la comment box de face ahi pero me tira a error de plantilla pues esto sería un widget. Me estoy partiendo la cabeza. Si me pudieras ayudar, ya sea a bajar los share buttons tan solo, sería genial

    ResponderEliminar
    Respuestas
    1. < b : includable id = ' shareButtons ' var = 'post' > ... < / b : includable >

      eso, no sale

      Eliminar
    2. Hola, eso es porque tu plantilla los tiene así colocados, así es complicado. Manda la plantilla a miguelcolomer@gmail.com y lo miro. El problema que tengo bastantes acumuladas, ten paciencia y terminaré analizando tu caso.

      Un saludo!,

      Eliminar
    3. Si quieres mándame la plantilla a miguelcolomer@gmail.com a ver si se puede hacer algo para solucionarlo.

      Un saludo!,

      Eliminar
  21. hola gracias por tu ayuda ya hice todo pero los comentarios me salen arriba del la entrada y desearia colocarla en la parte final que deberia hacer...gracias...este es mi blog http://consulvial-ecuador.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Consulvial, un placer ayudar.

      Si quieres envía tu plantilla a miguelcolomer@gmail.com y te lo pongo donde es. Lo ideal es hacerlo después de los "shareButtons", de esa manera saldrá justo debajo de la entrada. No obstante, si no lo logras pásamela y en cuanto tenga un momento lo miro... pero dame tiempo que ando apurado estos días.

      Un saludo!

      Eliminar
  22. Oye Miguel, puedes hacer un tutorial de como poner el texto paralelo a la imagen? (Como está al principio del post.) He visto algunos pero no son muy útiles al trabajar con blogger.

    Un saludo!

    ResponderEliminar
  23. Hola Destrock, no entiendo bien a qué te refieres. ¿En paralelo a qué te refieres?, es para poder hacerlo, si no lo entiendo bien no puedo hacerlo.

    Lo que me digas, un saludo.

    ResponderEliminar
    Respuestas
    1. Me refiero a esto, me gustaría que explicaras como lo hiciste ^u^:

      http://4.bp.blogspot.com/-L-nu63oP2PM/UwipeokLpUI/AAAAAAAAAQA/3zIm3K1Z6Cs/s1600/Duda%2B3.jpg

      Eliminar
    2. Ah!, ok. Es fácil, en el editor de entradas la imagen que pongas la alineas a la izquierda. El texto si te queda debajo de la imagen, ponte en la parte derecha de la imagen y le das a surpimir. Si así no hay forma, otra manera de lograrlo es escribir el texto y pones la imagen justo debajo de ese texto pero con alineación izquierda. Después mantienes pulsado el botón izquierdo del ratón y "arrastra" la imagen a la parte izquierda del texto con el que quieres que se alinee hasta que quede como quieres.

      Es ir ajustando hasta que queda como deseas.

      Un saludo!

      Eliminar
  24. Hola Miguel,

    Tengo problemas a la hora de meter la segunda parte del código. El Share Buttons lo tengo diferente (creo) y no encuentro el doble cierre por ningún lado. Podrías ayudarme de alguna manera?

    Muchas gracias.

    Mi blog es blog.elephantandcastle.es (Si cuando entres ves que ya lo he conseguido meter es que mi constancia ha salido victoriosa) jeje.

    Un abrazo

    ResponderEliminar
    Respuestas
    1. Hola Sergio,
      es que hay plantillas que no lo tienen así, es normal. Si quieres, mándame a Miguelcolomer@gmail.com tu plantilla y en cuanto pueda (eso sí espera con paciencia que ando con mucho trabajo) te lo miro y te digo dónde podemos ponerlo.

      Un saludo!

      Eliminar
  25. Hola Miguel,
    Desde hace un tiempo que intento poner la caja de comentarios de Facebook por post y no puedo ya que no encuentro la sección de ShareButtons, por ahí leí que solo lo puedo encontrar según el template que uso. Te agradecería un montón si me pudieras decir donde podría colocar los códigos. Mi blog es stylewarblog.blogspot.com y el template que uso es Sencillo.

    Gracias y muy buen post!

    ResponderEliminar
    Respuestas
    1. Mándame tu plantilla a miguelcolomer@gmail.com y trato de buscarlo... pero ten paciencia porque tengo mucha gente a la espera ;) tarde o temprano te lo busco, escribe ahí.

      Un saludo!

      Eliminar
  26. Hola Miguel:
    Hace casi un mes que abrí mi blog (gracias a ti), después de configurarlo cuanto pude y hacer las pruebas necesarias. Mi problema es el siguiente: ¿Por qué me aparecen los comentarios de Facebook debajo de la previsualización de las entradas en la parte de "Entradas antiguas"? Te dejo el enlace.

    http://zonadedstrock.blogspot.com.ar/search?updated-max=2014-04-28T06:00:00-03:00&max-results=6

    Espero tu respuesta.
    Un saludo :D

    ResponderEliminar
  27. Hola amigo Dedstrock,
    te está quedando genial el Blog. Pues creo que te sucede porque te falte el b:if cond='data:blog.url != data:blog.homepageUrl' que sirve para indicar que sólo se visualice el cuadro en el detalle de una entrada (dentro al pulsar leer más). De todas maneras, si en los demás casos no se ve, es posible que haya que cambiar ese if (y lo cambiaría igualmente en el tutorial) por este otro: b:if cond='data:blog.pageType == "item"' (añade a principio y fin de la línea el < y > que ya sabes que desde los comentarios no puedo ponerlo.

    Ya me comentas. Y reitero mis felicitaciones por el Blog porque te está quedando genial. Un abrazo.

    ResponderEliminar
    Respuestas
    1. Hola Miguel:
      Gracias por responder de nuevo, a la plantilla que uso (que por cierto no me deja cambiarle muchas cosas), le añadí el gadget de AddThis antes de los comentarios de Facebook, el código que uso actualmente es este:
      http://gyazo.com/c7b32266c7e8a6c1ec2fedb91be118c0
      No soy muy bueno editando HTML (de hecho, hubo una ocasión en la que mi plantilla directamente no servía, pero lo pude arreglar con una copia de seguridad), así que te pediria que pusieses un enlace a un documento en Google Docs donde el código esté bien colocado.

      Un saludo y gracias de nuevo :D

      Eliminar
    2. Me apunto añadir un documento drive que ya tenga una plantilla modelo de ejemplo que sea descargable para bajarse ese código puesto de ejemplo. ¡Buena idea Dedstrock!. Dame un tiempo que tengo mucho trabajo y lo actualizo.

      Por cierto que actualicé esta guía también para mejorar su facilidad de uso.

      un saludo y muchas gracias a ti.

      Eliminar
    3. Gracias amigo yo tambien tenia ese problema, lo cambie por lo que pusiste y todo perfecto gracias en verdad me funciono el nuevo codigo.

      Eliminar
    4. Me alegro mucho Jorge XD, todo un placer y una alegría que te haya servido. Agradezco igualmente tu feedback. Cualquier cosa aquí me tienes. Un saludo!

      Eliminar
  28. Disculpen, sé que alguien ya preguntó lo mismo que yo voy a preguntar, porque lo encontré en e buscador, pero no puedo precisar dónde está, para ver qué le respondieron.
    Así que ni modo, ahí voy.
    Tengo varias dudas:
    1) El código que propones introducir en el body no es igual al que me proporciona FB cuando creo el cuadro de comentarios. Tu código sólo dice: "//connect.facebook.net/es_LA/sdk.js#xfbml=1" hasta ahí, y el código que me da a mí viene después "1&appId=XXXXXXXXXXXXXXX&version=v2.0" donde las X es la AppID de mi aplicación.
    2) En tu explicación no viene este segundo código "", sino lo que se pone después de ShareButtons.
    3) Al poner todos los códigos tal cual tú los explicas, puedo ver la caja de comentarios. El único problema es que la letra es negra, y mi blog es oscuro, así que no se ve nada. Y no sé cómo configurar el color de la letra.
    4) Cuando intento poner el código que me proporcionó facebook, me aparece esta línea de error "Error al analizar XML, línea 1234, columna 62: The reference to entity "appId" must end with the ';' delimiter." Y no entiendo por qué, pues sólo selecciono y pego; ¿es que acaso el código de FB tiene un error???

    ResponderEliminar
    Respuestas
    1. Hola!,
      intento responder a cada pregunta, no sin antes recomendarte esta otra guía más detallada para esto: http://www.diariosdelanube.com/2013/06/mete-la-caja-de-comentarios-de-facebok.html

      1) El código que debes utilizar en el Blog se divide en dos partes. Un javascript que va en el Body y otro que es el que sirve para mostrar "la caja" que va en los shareButtons.

      2) El código de fbid=xxxxxxx es para administrar los mensajes (poder borrar o dar por buenos lo que te parezcan adecuados).

      3) Cuando selecciones la caja en la página de Facebook developers mira que en "color scheme" se pueda poner el de tipo oscuro (dark). El de por defecto, el blanco quizás no se adapte a los colores de tu página.

      4) Olvida el paso 1, lo mejor es que hagas el 2 entero y en el código de la caja pongas el que tiene:

      div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl' y donde pone 'light' pongas 'dark'.

      La otra guía está más optimizada, de todas formas esta la tengo que actualizar para hacerla más simplificada.

      Un saludo y cualquier cosa pregunta!!!

      Eliminar
    2. la solucion que encontré en una pagina en ingles es que hay que reemplazar los "&" por "&".

      lo hice y santo remedio. si quieren leer la explicacion pero esta en ingles es esta

      http://htmlhelp.com/tools/validator/problems.html.en#amp

      saludos
      Alicia

      pd: excelente el blog no lo conocia y voy a volver a entrar habitualmente

      Eliminar
    3. yo de nuevo. por alguna razon en el comentario no se escribio correctamente (debe ser por cuestiones de html)

      en ve de & debe ir & seguido de amp y seguido de ;

      (pero todo junto sin espacios, lo escribi asi para que blogger no lo omita)

      Eliminar
    4. Hola Alicia, eso es justo lo que pongo en el paso 2 en NOTA. Si no se pone & seguido de amp dará error en la validación en Blogger.

      Un saludo amiga, cualquier duda aquí estoy.

      Eliminar
  29. Perdón, no supe poner el segundo código de modo que se pudiera ver :(
    "< div class="fb-comments" data-href="http://creciendoenvictoria.blogspot.mx" data-width="600" data-numposts="5" data-colorscheme="dark"> y luego otro div (a ver si así sí se publica...

    ResponderEliminar
    Respuestas
    1. Hola!,
      eso es!, eso es lo que tienes que poner. Pero ojo, si pones http://creciendoenvictoria.blogspot.mx, los comentarios irán a nivel de todo el blog. Si pones (quito < y > para que me permita grabarte el comentario):

      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

      La diferencia, el data:post.canonicalUr hará que el comentario de facebook quede vinculado a la entrada donde se realice y no a todo el Blog.

      Cualquier cosa pregunta, verás que es sencillo.

      Eliminar
  30. Hola Miguel,

    Soy Ana, de La Sana Motivación . He intentado hacer esto y la verdad es que aunque en principio no me parecía algo complicado, estoy teniendo problemas.

    Si realizo los dos pasos:

    1) Poner el código de FB developers debajo de la etiqueta <body me aperece un error que dice Error al analizar XML, línea 893, columna 64: The reference to entity "version" must end with the ';' delimiter.

    He buscado entre los comentarios a este post, y he visto que le aconsejas a alguien con el mismo problema, saltarse el paso 1 y hacer el 2 directamente. Pues yo he intentado eso y lo que me ocurre es que se visualiza en el blog, justo debajo de los posts, el código del segundo paso.

    2) El código que meto en el paso 2 justo debajo de la etiqueta sharebuttons es este:

    b:if cond='data:blog.url != data:blog.homepageUrl'
    div id='comentariosFacebook' div class='fb-comments' data-colorscheme='light' data-num-posts='8' data-width='1380' expr:href='data:post.canonicalUrl'/ /div
    /b:if

    ¿Es correcto el código?

    Mil gracias Miguel! Y lo que yo te diga...al final me pongo con la parte técnica y no escribo posts! Jajajajaja

    ResponderEliminar
    Respuestas
    1. ¡Hola Ana!,
      busca sólo body con su "<" delante. Justo debajo de toda la línea de body es donde debes pegar el código del paso 2) div id=fb-root... si por cualquier razón pones el código en otro sitio o hay algo que puedas meter d euna línea anterior te pueden salir errores de esa clase.

      El código que has puesto en tu pregunta 2) es correcto.

      Voy a hacer una cosa que me pidió un usuario, voy a publicar un ejemplo descargable es una plantilla de pruebas para que puedas ver cómo debe quedar. Ahora te escribo para avisarte.

      Un saludo!!!

      Eliminar
    2. Ana, ya tienes al final de la guía un ejemplo de plantilla descargable con el código de Facebook. Es sólo orientativa, no la utilices como tuya propia porque machacaría a la que tienes, es para que veas dónde y cómo puede ponerse.

      Un saludo!!!!

      Eliminar
  31. Mil gracias, Miguel! En cuanto lo pruebe te digo qué tal. :)

    ResponderEliminar
  32. Pues que va, Miguel. Sigue dando problemas. Para intentar ver dónde está el error he creado incluso un blog de prueba y he intentado hacerlo. Si uso tus códigos, sale bien en el blog de prueba, pero cuando uso el código que me provee Facebook, sigue saliendo el dichoso error "The reference to entity "version" must end with the ';' delimiter."

    Le he dado 500 vueltas. Tuneado el código, comparado con el tuyo pero no doy con el error. :(

    ResponderEliminar
    Respuestas
    1. Ya lo he visto, el problema es el nuevo "&" que ha metido Facebook en el último código javascript que proporciona para después del BODY:

      - Como siempre para que me admita Blogger código en los comentarios he quitado < y >.
      - El &version debe ser sustituído por &version=v2.0"; (El XHTML necesita el añadido amp para no confundir el &).

      Quedaría así poniendo & y colocando correctamente los < y >

      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/sdk.js#xfbml=1&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));/script

      Un saludo!!!

      Eliminar
    2. Hola me sucede el mismo problema y este es el codigo que me crea Facebook para el plugin social tipo caja (Like box):

      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_LA/sdk.js#xfbml=1&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk')); /script

      Cuando lo inserto, blogger me dice que hay un error en el apartado de versión diciendo que hay que colocar un delimitador y por lo que veo es el mismo código que le mencionas a la compañera por aquí ¿Algún consejo para solucionar esto?

      Eliminar
    3. Si, te viene en la guía, es mejor que la leas poquito a poco, es que Blogger no admite el & de &versión directamente, debes ponerlo así: &version=v2.0 y todo lo demás dejarlo igual. Fíjate en la guía donde pone (quito el < y > para que se pueda crear el comentario), fíjate que pone &version=v2.0:

      NOTA: Debido a la última actualización que Facebook ha introducido en sus scripts, si te da errores en la plantilla al tratar de salvar el código anterior, utiliza este que a continuación te muestro.
      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/es_ES/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));/script

      Con esto te funcionará seguro.

      Un saludo!

      Eliminar
  33. Ooooh!! Graaaacias! En cuanto tenga un hueco lo vuelvo a probar! Creo que no hubiera dado con la solución en la vida!

    ResponderEliminar
  34. Muy buena explicación, ¡muchas gracias! Es la única página que explica el error que tira Blogger (error producido por los programadores de Facebook) pues al código embed que provee Facebook le falta un ";" (punto y coma) al final de la "Versión" y esto me tiraba un error de XML, pero tu explicación clara de cómo solucionarlo me ayudó mucho a encontrarlo. Un saludoy muy agradecido.

    ResponderEliminar
    Respuestas
    1. Hola Ruben, muchas gracias a ti. Si, yo lo padecí también ;) al final con &amp lo sacas.

      Un saludo.

      Eliminar
  35. http://educacionaduanera.blogspot.com.ar/ esa es la direccion de mi blog para que lo entiendas mejor... tambien no se como sacar otro box que cree anteriormente .. donde estara ese codigo para eliminarlo ..

    ResponderEliminar
    Respuestas
    1. Hola,
      ¿te refieres a que aparece dos veces?, ¿como una dentro de la página principal y otra por fuera?. Eso es porque pusiste el código tanto dentro como fuera de la zona donde tienes las entradas. Es posible que hicieras la primera parte que es para poner los comentarios a nivel de todo el Blog y la segunda que es para que queden sólo a nivel de entrada.

      Si es este el caso, deshaz la que desees o la primera o la segunda.

      Ya me dices lo que necesites.

      Un saludo,

      Eliminar
  36. Hola Miguel, tengo este problema: intento agregar una caja de comentario del facebook en blogger. Copio todo el código que me facilita el facebook pero al pegarlo en el código html del blogger me sale el siguiente error:

    https://drive.google.com/file/d/0Bw7WMds2TGYDdGYxWHNaZlZaeUE/view?usp=sharing

    Gracias por la respuesta

    ResponderEliminar
    Respuestas
    1. Hola TV,
      lo explico dentro de la guía. Es que con los cambios en el código ahora tienes que incluir lo que pongo en el paso 2) donde pone "NOTA". En el código de Facebook que pegaste debes añadir al carácter "&" el "&" para que Blogger te deje añadirlo a la plantilla.

      Con eso solucionado seguro ;)

      Un saludo!!!

      Eliminar
  37. Hola me podrias ayudar con algo, te cuento la caja de me gusta no me aparece en una pagina de mi blog tengo 4 pestañas con distintas paginas pero en la 3 pagina no me aparece la caja de me gusta me podrias ayudar con esto.

    ResponderEliminar
    Respuestas
    1. Para la caja de "me gusta" y otros componentes facebook, te recomiendo esta lectura: http://www.diariosdelanube.com/2013/10/facebook-5-componentes-que-puedes.html

      Eliminar
  38. Hola, me podrían decir si existe alguna diferencia entre las plantillas viejas y las de ahora en cuanto a la ubicación del sharebuttons, cuando trato de buscarlo en la plantilla CINEMA FREE VERSION de SORA TEMPLATES http://cinema-soratemplates.blogspot.com/ solo me aparece ubicado en el siderbar, o sea que cuando entro la caja de facebook esta me aparece en el sidebar. Cuando trato de aplicarle las instrucciones para entrarla en cada post la plantilla me da error y no me deja salvar diciendo que no puede terminar en div b:if, la unica forma que me acepta es solo poniendo el codigo de Facebook, de otra manera no lo salva.

    ResponderEliminar
    Respuestas
    1. Hola Dalia, en las plantillas básicas de Blogger, la parte inferior donde se ponen los botones para compartir en redes sociales es en los share-buttons. El tema está en que las plantilla predefinidas que desarollan webs como las que indidcas puede colocar dichos botones en otros sitios.

      Las plantillas de webs como las que indicas no son desbloqueables o editables hasta que se paga por ellas. Si no pagas por ellas y te dan la versión desbloqueada, esa plantilla no se alterará con los cambios que metas.

      Un saludo!

      Eliminar
  39. Hola, Miguel.

    Muchas gracias por este magnífico tutorial. He seguido los pasos y no he tenido ningún problema. Lo que pasa es que la caja de comentarios me sale al principio de cada entrada en lugar de al final.
    ¿Qué podría hacer para solucionarlo?

    Muchas gracias y un saludo :)

    ResponderEliminar
    Respuestas
    1. Hola Eleanor,
      debes colocarlo bajo el código:

      <div class='post-share-buttons goog-inline-block'
      <b:if cond='data:post.sharePostUrl'
      <b:include data='post' name='shareButtons'/
      </b:if
      </div

      Descárgate mi plantilla de ejemplo y ves dónde está puesto exactamente porque dentro del código hay un sitio donde pone "<!-- AQUÍ EL CÓDIGO QUE DIBUJARÁ LA CAJA DE FACEBOOK JUSTO DEBAJO DE LA ENTRADA Y SÓLO A NIVEL DE ENTRADA PARA LOS COMENTARIOS
      <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
      <!-- FIN DEL CÓDIGO QUE DIBUJARÁ LA CAJA DE FACEBOOK JUSTO DEBAJO DE LA ENTRADA Y SÓLO A NIVEL DE ENTRADA PARA LOS COMENTARIOS --

      Un saludo!

      Eliminar
    2. Hola, Migue:

      Sí, he hecho tal como indican tus pasos. Lo que pasa es que no me sale exactamente ese código. Te dejo aquí una captura: http://s7.postimg.org/gcusr970b/buttons.jpg

      Además, no sé si puede deberse a que situé los botones sociales bajo el título de cada entrada y no al final de las mismas. Te dejo mi blog para que veas mejor lo que te comento http://eterarnial.blogspot.com/

      Muchas gracias por tu tiempo :)

      Eliminar
    3. Hola Eleanor, es que en tu plantilla tienes puestos los "sharebuttons" justo debajo del título. Prueba a ponerlo debajo del "post-footer-line post-footer-line-3".

      Un saludo!

      Eliminar
    4. Funcionó :)
      Muchísimas gracias, Miguel ^^

      Eliminar
    5. Me alegro mucho Eleanor, para cualquier cosa aquí me tienes. Un saludo y gracias por participar.

      Eliminar
    6. Hola, Miguel.
      Recientemente he cambiado la plantilla de mi Blogger y, aunque he intentado encontrar los elementos que dices, no están.
      ¿Cómo podría meter la caja de comentarios -en cada entrada- de FB en este caso?
      Éste es el blog
      http://eterarnial.blogspot.com/

      Muchas gracias por tu tiempo y ayuda :)

      Eliminar
    7. Hola, es que no es una plantilla de las estándar de Blogger. En mi web tienes un buscador para encontrar ayuda para personalizar las hojas de estilo de tu web que puedes utilizar para localizar dónde añadir el código.

      Es que, fuera de las plantillas estándar de Blogger, cada una es distinta de la otra.

      Un saludo!

      Eliminar
  40. Muchísimas gracias! Me solucionó un reverendo lío!
    :D

    ResponderEliminar
    Respuestas
    1. Me alegro mucho!, cualquier cosa aquí estoy.

      Muchas gracias por participar.

      Eliminar
  41. no me lo se 3. Cada amigo te dará un código. Introdúcelos a continuación: los codigos de esto y es mi facebook fracias

    ResponderEliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.