Hoy les voy a enseñar a poner la caja de comentarios de facebook, ya había hecho una entrada que habla de los mismo ( puedes verlo aquí) pero surgieron comentarios que la caja sale fuera de las entradas publicadas en el blog, entonces hoy les traigo otro método aún mas fácil que el anterior y que nos permitirá poner la caja de comentarios donde nosotros así lo deseemos. Entonces manos a la obra amigos.
Lo resaltado en color rojo ahi debes poner la url de tu entrada en la que quieras visualizar tu caja de comentarios.
Lo resaltado en Azul es el ancho para que puedas modificarla a tu gusto.
Comments Box - Facebook Developers, ¿Que es?
Este pluggin nos permitirá agregar dicha caja, para entrar a la pagina oficial de Facebook Developers has clic AQUI, Nos mostrara la pagina en el lenguaje ingles pero no te preocupes no es difícil manejar la pagina solo tenemos que agregar unos cuantos parámetros para realizar el diseño de nuestra caja de comentarios. Sigue los siguientes pasos:
- Busca el cuadro de texto que te indica que debes introducir tu URL del sitio al cual quieres agregarle la caja de comentarios (URL to comment on) y escribe una URL DE EJEMPLO cualquier cosa que identifiques fácilmente por ejemplo en este caso yo le pondré: http://EJEMPLO.COM (mas adelante veras el porque de ese url)
- En ese mismo formulario nos pide llenar el Width que en español es el equivalente al ancho de la caja de comentarios entonces ahí obviamente varia el valor dependiendo de nuestra plantilla yo en este ejemplo usare un ancho de 500px
- El siguiente campo nos muestra (Number of post) cuantas entradas o comentarios deseamos mostrar por defecto nos pone una cantidad 10 de comentarios y les recomiendo que lo dejen asi para que no tarde en cargar o se haga muy extensa nuestra caja.
- En el ultimo campo (Color Scheme) nos muestra dos opciones y ahí elegiremos el diseño de nuestra preferencia, podemos elegir entre el diseño Dark ó Light.
NOTA: Para un mejor diseño (creo que ya los has de ver notado) guíate en la vista previa que te muestra abajo del formulario antes llenado. Así quedo llenado nuestro formulario:
Ahora solo debemos dar clic sobre el botón Get Code para generar nuestro código correspondiente. Se abrirá en una ventana emergente como la imagen siguiente:
Si notas en la parte superior nos muestra varias opciones de código como html5, xfbml y otros mas...
Tenemos que elegir la pestaña de HTML5 y seguimos los pasos que viene dentro de esa misma ventana.
- El primer paso es copiar la primera parte del código y pegarla justo después de la apertura de la etiqueta: <boby>. Así que nos vamos a Plantilla > Editar Html y damos clic dentro del código y presionamos la combinación de teclas "ctrl+f" y en el cuadro de búsqueda agregamos la etiqueta a buscar que en este caso es la de <body>.
- La segunda parte del código es la importante, ¿recuerdas que al asignar los parámetros de nuestra caja al inicio de la entrada pusimos una url como ejemplo? ( http://EJEMPLO.com ) si analizamos el código te darás cuenta que ese url se genero en esa parte del código (observa la imagen anterior) lo que debemos hacer es guardar muy bien ese pedazo de código en bloc de notas o un documento de word ya que lo utilizaras cada vez que quieras agregar una caja de comentarios en algún post.(TODO EL CODIGO)
Hasta ahora tenemos el pluggin instalado en nuestra plantilla pero nos falta mostrarla en las entradas de nuestro blog y aquí es donde necesitaras un poco de paciencia si es que en tu blog llevas muchas entradas ya que deberemos agregar la caja entrada por entrada. SI LO SÉ, ES ALGO TEDIOSO pero sin embargo no eh visto otra forma de hacerlo (si alguien sabe favor de compartirlo).
¿ Y como agrego la caja de comentarios en mi entrada?
- Es muy fácil solo debemos publicar nuestra entrada (si es nueva), si ya la tienes publicada solo debes contar con la url, por eso la importancia de ya tenerla publicada.
- Recuerdas que guardamos un código en el bloc de notas, ¿Adivina que? llego el momento de usarlo, abres tu bloc de notas y copias el código, después nos vamos a nuestra pagina de blogger en la sección de Entradas y editamos la entrada a la cual deseamos agregar la caja de comentarios.
- Teniendo abierta nuestra entrada nos iremos a la opción de editar en HTML
- Nos vamos al final de nuestro código y antes de pegar el código (copiando anteriormente) les daré un "tip" para separar la caja de comentarios con el resto del post. Si sabes código HTML sabrás que la etiqueta <br/> sirve para dar un espacio de linea ( un enter ) así que te recomiendo que agregues al menos dos de esas etiquetas para poder darle una separación a nuestra caja.
- Ahora si pegamos el código, pero nos falta agregar la url de la misma entrada, si observas detenidamente tu código aún tiene la url de ejemplo esa es la que debemos cambiar (sin quitar las comillas) el código terminado debió quedarte así:
<br/>
<br/>
<div class="fb-comments" data-href="urlpost" data-width="610"></div>
<br/>
<div class="fb-comments" data-href="urlpost" data-width="610"></div>
Lo resaltado en color rojo ahi debes poner la url de tu entrada en la que quieras visualizar tu caja de comentarios.
Lo resaltado en Azul es el ancho para que puedas modificarla a tu gusto.
- Ahora solo nos queda guardar de nueva cuenta nuestra entrada y LISTO! si hiciste todos los pasos bien se te mostrara una caja de comentarios como la que se muestra en esta misma entrada. justamente abajo. Si tienes alguna duda déjame un comentario.
NOTA: Recuerda que debes realizar el mismo procedimiento para cada una de las entradas en las cuales quieres colocar la caja de comentarios.
