domingo, 6 de octubre de 2013

¿Cómo poner las fotos de los fans de Facebook en el blog?

En este artículo, vamos a ver cómo poner el típico cuadro donde se muestra los rostros de las personas (fans) que siguen el blog a través de Facebook. Es lo que se denomina un "Like Box"...
Como sabes, la gente de Facebook tiene una página especialmente dedicada a desarrolladores, que permite habilitar elementos sociales en tu blog o página web. Es altamente recomendable conocerlos aunque no lo usemos inicialmente. Te resumo los diferentes elementos que podemos encontrar:

  • Like Button: Es el botón que hemos puesto en cada entrada del blog
  • Activity Feed. Muestra una caja con la actividad del muro
  • Recommendations. Muestra una caja con aquellas publicaciones del muro con votos
  • Like box. Es el ejemplo que estamos haciendo en este momento. 
  • Login Box. Es un botón de inicio de sesión de la cuenta de Facebook
  • Registration. Permite crear el registro de usuarios desde tu propia Web (combinado luego con el Login Box)
  • Comments. Es una caja para escribir comentarios desde tu web o blog, estos se publican en el muro
  • Live stream. Ideal para eventos en vivo y en directo, permite la participación activa de usuarios. Una especie de chat donde vas viendo lo que van escribiendo otros usuarios. Ejemplo retransmisión de un evento deportivo donde tienes por ejemplo el video de un partido de fútbol a la derecha tienes este Live Stream que permite comentarios en tiempo real. ¡penalty!, ¡penalty!, jejeje.

Sigue estos pasos para ver un caja con las fotos de tus fans en el blog o web:

  1. Abre en otra pestaña del navegador tu página de fans
  2. Copia la dirección web (URL) de la barra de navegación del propio navegador
  3. Conecta con esta página
  4. Donde pone "Facebook Page URL" deberás pegar la dirección de tu página en Facebook
  5. Configura los diferentes parámetros
  6. Presiona el botón Get Code, cópialo (es un iframe)
  7. Ve a Diseño 
  8. Agrega un Gadget del tipo HTML/Java Script al menú de la derecha. 
  9. Pega el código en el Gadget
  10. Presiona el botón Guardar y visualiza tu blog

Aquí tienes mi ejemplo:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=urldelapaginadefacebook&amp;width=210&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false&amp;height=230" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:210px; height:230px;" allowtransparency="true"></iframe>

Puedes verlo funcionando a la derecha, en el menú vertical, ajusta los parámetros de width (ancho) y height (alto) hasta ajustarlo e integrarlo en tu sitio.

Si te ha gustado esta entrada y eres usuario de Facebook presiona el botón de "Me gusta" y hazte fan de iniciaBlog, la foto de tu perfil saldrá entonces en este blog. ¡¡¡Gracias por seguirme!!!

Gracias a Rodrigo y Doris...los dos primeros fans de iniciaBlog!!!

Nota: Solo funciona con Páginas de Fans (FanPages) no con un perfil personal. Si tu marca en Facebook es un perfil te recomiendo primero leer "Una empresa no tiene Amigos, tiene Fans" y luego "Cómo convertir un perfil en una página de Fans.

Como poner juegos en Blogger

En el vídeo  explico cómo poner juegos en nuestro blog de forma fácil y gratis.Si teneis alguna duda o sugerencia para próximos blogs no dudes en comentar.
Espero que sirva, que le deis a me gusta.



Aqui le dejo la pagina donde obtuve los codigos......


http://es.games68.com/games-for-website-list.php/" target="_blank">

Como crear tu propio blog en blogger

Como hacer un botón automático para que enlacen tu Blog.

El siguiente código es para hacer un botón automático para enlazar el blog mediante una imágen, así como lo tengo configurado en este mismo blog, de manera que quien quiera enlazarte solo deberá pinchar el botón y seguir los pasos de manera muy fácil.

Que te enlacen desde otras página puede ser beneficioso para tu blog, ya que de esta manera logras entre otras cosas que conozcan tu blog, traer mas visitas, promocionar el sitio y aumentar tu valoración por parte de Google.


Para ello lo primero que necesitas es tener una imágen representativa de tu Blog, el Banner que utilizarás para este propósito, el mío es el siguiente:
 
Una vez lo tengas listo, deberás subirlo a algún hosting de imágenes, en este caso yo lo he subido a Picassa pero puede ser a cualquier otro de tu elección.
El segundo paso es tener la URL de la imágen, en Google Chrome basta con pinchar la imágen con el botón derecho y  escoger copiar URL de la imagen. 
Teniendo esto listo procedemos a añadir un gadget y escoger la opción HTML/Javascript y copiaremos el siguiente código: 
<center>
<img src="URL-de-tu-imagen" border="0" alt="#" />
<form action="http://beta.blogger.com/add-widget" method="post">
<input value="Blog Recomendado" name="widget.title" type="hidden" />
<textarea style="display:none;" name="widget.content">
<a href="URL-de-tu-blog" target="blank">
<img src="URL-de-tu-imagen" border="0" alt="#" /></a>
</textarea>
<input value="http://buzz.blogger.com" name="infoUrl" type="hidden" />
<input value="http://www.blogger.com/favicon.ico" name="logoUrl" type="hidden" />
<input value="Enlázame" name="go" type="submit" /> </form>
</center>
URL de la imagen con color rojo, pondrás la dirección de la imagen que copiarás como te dije anteriormente, fijate bién que debe ser dos veces.
alt="#"  aquí pondrás dentro de las comillas y sustituyendo el signo # un texto descriptivo de la imágen, por ejemplo en mi caso Creando Blogs.
URL de tu blog en azul, la dirección de tu blog que se muestra en el navegador.
Blog Recomendado es el titulo de gadget que saldrá a quien te enlace, puedes sustituirlo por cualquier otro texto, un ejemplo sería visita este blog.
Enlázame es el texto que saldrá en el botón y que también puedes sustituir por otro texto, tal como agregame.
Una vez que tengas configurados estos parámetros procedes a guardar la configuración y ya está listo, fíjate bién que todo esté correcto para que quienes quieran enlazarte no tengan problemas.