Como funciona Google +1

Para entender el funcionamiento de Google +1 se ha preparado un video el cual explica al detalle la forma en que funciona y se integra con nuestro web:

Como Implementar el botón Google +1

Para implementar el Google +1 es nuestra web primero hay que ir Add +1 to your pages to help your site stand out en donde podremos seleccionar el tamaño del botón a utilizar el idioma del botón y algunas opciones avanzadas.

Luego de ello debemos copiar un primer bloque de código en el header de nuestro HTML (Ubicar el código justo antes del tag </head>):

1
2
3

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'es'}
</script>

Luego debes colocar el siguiente código en el lugar donde deseas se muestre el botón Google +1.

1

<g:plusone size="medium"></g:plusone>

Listo, esto es todo y ya tendremos el botón habilitado mediante el cual nuestros usuarios podrán compartir de manera sencilla el contenido de nuestra web con todos sus contactos.

Tweet

El theme es muy completo y tiene opciones para configurar desde el panel de administración como tu cuenta de twitter, el URL de tu feed, tu código de Google Analytics, además tiene la opción para incluir tu código de Google Adsense y de esa forma monetizar tu blog.

Mas Información

• Demo : Kubrick on Crack
• Download : Kubrick on Crack

Tweet

Insertar Tweet Button

Utilizar Tweet Button es muy sencillo, para ello tienes que editar el código html de la página donde deseas mostrar el botón e insertar las siguientes líneas.

1
2

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>

Con lo cual obtendremos el siguiente resultado:

Tweet

Utilizar el Generador de Tweet Button

Tweet Button tiene parámetros adicionales que te permitirán adaptarlo a tus necesidades, para ello Twitter ha creado Tweet Button Goodies Page, un Generador que te permite configurar todos los parámetros disponibles y al final generará el código necesario para copiar y pegar en tu web.

Utilizar WP-TweetButton Plus para insertarlo en WordPress

WP-TweetButton Plus es plugin para WordPress que te permitirá incluir Tweet Button en los posts de tu blog sin necesidad de editar tu template, además cuenta con un panel de configuración muy útil para configurar el botón y adaptarlo a tus necesidades.

Tweet

Pero la mayoría de usuarios les gustaba la interfaz anterior la cual además de ser mas sencilla de utilizar cargaba mucho más rápido y al carecer de efectos. Si quieres seguir utilizando la interfaz anterior puedes agregar un parámetro adicional &sout=1.

Entonces si estamos buscando una imagen, tendríamos el URL del tipo:

1

http://www.google.com/images?source=imghp&q=iphone+4

Entonces para ver la interfaz, le agregamos el parámetro &sout=1.

1

http://www.google.com/images?source=imghp&q=iphone+4&sout=1

Asi que ahora podrán seguir utilizando la versión antigua de Google Images y con una pequeña línea.

Tweet

MicroPoll

MicroPoll es un servicio online gratuito que te permitirá crear encuestas rápidamente e integrarlo en tu página con pocas complicaciones. Además de ello ofrece una cuenta donde podemos administrar nuestras encuestas así como ver reportes por ubicación de los visitantes y por IPs de acceso.

Crear una Encuesta

Con WebPoll crear nuestras encuesta es muy sencillo con cuatro pasos que describimos a continuación:

1. Ingresa el titulo de tu encuesta.
2. Ingresa las alternativas a tu pregunta (separados por saltos de línea).
3. Escribe tu dirección de email que servirá para administrar tus encuestas.
4. Copia el código generado en tu página web.

En mi caso he creado una encuesta de ejemplo la cual pueden visualizar al inicio de este post, el código generado y que es necesario copiar es:

1
2
3
4
5
6
7
8
9
10

<script language="JavaScript" src="http://www.micropoll.com/akira/MicroPoll?id=266816">
</script><noscript><div><a href="http://www.micropoll.com/akira/mpview/986579-266816">
Click Here for Poll</a><a href="http://www.questionpro.com" title="online survey">
Online Survey</a><BR><a href="http://www.surveyanalytics.com/conjoint" 
title="Conjoint Analysis">Conjoint Analysis</a><BR> | <a href="http://www.micropoll.com"
title="Polls">Polls</a><BR> | <a href="http://www.contactpro.com"
title="email marketing">Email Marketing</a><BR><BR> | <a href="http://www.ideascale.com/"
title="crowdsourcing software">Crowdsourcing Software</a><BR>
<a href="http://www.micropoll.com/akira/MicroPoll?mode=html&id=266816">
View MicroPoll</A></div></noscript><!-- END MICROPOLL JAVASCRIPT CODE -->

Ahora, si somos un poco observadores, podemos notar la etiqueta noscript que se visualiza si el navegador no tiene activada el Javascript. Entonces podemos quitar este código sin problemas con lo cual el código para mostrar la encuesta quedaría de la forma:

1
2

<script language="JavaScript" src="http://www.micropoll.com/akira/MicroPoll?id=266816">
</script>

Listo ya tenemos nuestra encuesta la cual podemos publicar en nuestra página web, en nuestro blog de wordpress o incluso en Blogger.

Tweet

Características Necesarias

Hay que tener en cuenta varias características en un hosting, dependiendo de nuestras necesidades escogeremos el hosting que se adecue a nuestros requerimientos.

• Espacio en Disco Duro es la cantidad de espacio que tendrás disponible para alojar tus archivos. Ten en cuenta que este espacio se utiliza en los archivos que vas a publicar, los datos de las cuentas de correo y el espacio utilizado por la base de datos.
• Ancho de banda es la cantidad de datos que te permite transferir. Se cuenta la cantidad de datos que se suben y descargan (HTTP, FTP, SMTP).
• Plataforma dependiendo de tus necesidades hay hosting que ofrecen: PHP y MySQL o también ASP.NET con SQL Server.
• Servicios Adicionales hay que conocer si ofrecen cuantas de email, cuentas de ftp, canidad de bases de datos, etc.
• Soporte también es importante conocer el soporte al cliente que ofrecen: por email, por teléfono, mediante un formulario y si ofrecen soporte en tu idioma

Consejos

Una vez que has definido tus necesidades y elegido los posibles servicios de hosting, puedes hacer una selección teniendo en cuenta los siguientes consejos:

• Revisa el diseño de su pagina web, un buen hosting desarrolla su web con diseño profesional, formularios personalizados y sistema de soporte personalizado.
• Averigua la reputación del hosting, para ello puedes buscar en Google y encontrarás la opinión de los clientes en foros y blogs.
• Evita los revendedores, estos incrementan el precio del hosting y no ofrecen soporte. Normalmente las empresas principales aceptan pago online y tienen muchas referencias en interntet.

Mi Recomendación

Por experiencia propia y de amigos que han contratado hosting para diversos proyectos les puedo recomendar Dreamhost que tiene excelente características a buen precio y con buen soporte.

Dreamhost ofrece ancho de banda sin limite, alojar múltiples dominios con cuentas de ftp y email ilimitadas, puedes crear base de datos sin limites y todo esto a un excelente precio de $8.95 al mes.

Tweet

Entre las características mas interesantes de este tema podemos mencionar:

• Menu animado con jQuery
• Enlaces para compartir en redes sociales (Digg, Facebook, Technorati, etc).
• Soporte para integrar las imágenes de Flickr
• Soporte para suscripción con FeedBurner.
• Bloques para publicidad (125×125, 120×600, 300×250)
• Soporte para widgets.
• Gratis para uso comercial y no-comercial.

Con todas estas cualidades rápidamente puedes tener un blog con excelente diseño y con las opciones para que los usuarios puedan compartir el contenido en las principales redes sociales.

Mas Información

• Mas Información
• Demo
• Descarga

Tweet

WP-SWFObject

WP-SWFObject es un plugin para wordpress que te permitirá publicar archivos flash en WordPress de manera rápida y sin complicaciones sin necesidad de conocer HTML. Este plugin cuenta con un panel de configuración muy completo el cual permite definir el comportamiento de los SWFs en tu blog.

Instalar WP-SWFObject

Las instalación es muy sencilla, para ello en tu panel de administración de wordpress accedes al menú Plugins > Add New . Luego en la busqueda de plugins escribes wp-swfobject, luego seleccionar Install Now para WP-SWFObject. Listo ya tienes instalado el plugin.

Si deseas puedes configurar las opciones para mostrar los SWFs en el menú Settings > WP-SWFObject.

Publicar SWF con WP-SWFObject

Para publicar los archivos flash, en el momento de escribir el post debes seleccionar el editor de código. Una vez hecho este cambio para publicar SWFs deben utilizar la siguiente sintaxis.

1

[swf]ruta-al-flash.swf, ancho, alto[/swf]

En donde se tienen tres parámetros.

• ruta-al-flash.swf es la ruta absoluta al archivo flash que deseas publicar.
• ancho es el ancho en pixels del SWF.
• alto es el alto en pixels del SWF a mostrar

Entonces si por ejemplo tenemos un archivo el cual subimos a nuestro servidor y se ubica en http://2webfacil.com/wp-content/uploads/2010/06/7762.swf, luego para publicar el archivo utilizamos el siguiente código:

1

[swf]http://2webfacil.com/wp-content/uploads/2010/06/7762.swf, 231, 132[/swf]

Con lo cual podemos obtener el siguiente resultado.

Publicar Videos de Youtube con WP-SWFObject

WP-SWFObject permite publicar vídeos de Youtube de manera sencilla, para ello puedes utilizar la misma sintaxis que se utiliza para publicar archivos SWFs pero en la ruta del swf deben colocar la ruta al vídeo. Por ejemplo para un vídeo de Youtube con ruta http://www.youtube.com/watch?v=8C7SxYzDNZk podríamos utilizar el siguiente código:

1

[swf]http://www.youtube.com/watch?v=8C7SxYzDNZk, 425, 350[/swf]

Con lo cual obtenemos el siguiente resultado:

Como pueden ver publicar archivos flash o publicar vídeos de Youtube es muy sencillo y sin necesidad de mayores conocimientos.

Tweet

Preloaders.net

preloaders.net es un servicio online gratuito que te permite generar precargadores personalizados para integrarlos rápidamente en tu web. Permite seleccionar en una gran variedad de estilos (3D, rectangular, circular, horizontal, zodiacales y religiosos).

Entre las opciones que podemos personalizar con preloaders.net tenemos las siguientes:

• Seleccionar el tipo de precargador.
• Seleccionar los colores de fondo y de relleno.
• Opción para hacer el fondo transparente.
• Definir la velocidad de la animación.
• Cambiar el tamaño de la imagen.
• Cambiar la animación en sentido contrario.

Una vez finalizado, podrás pre-visualizar la imagen de precarga y finalmente descargar en fomato GIF, listo para incluirlo en tu web.

Tweet

Activar Botones para Compartir

Si deseas activar los botones para compartir debes acceder a tu panel de Blogger, luego vas a editar el diseño de tu tema mediante: Diseño > Elementos de la página.

Seleccionas “Editar” las entradas del blog, en donde tendrás todas las opciones que se pueden habilitar para los posts, donde hay una opción llamada Mostrar botones para compartir.

Una vez habilitado esta opción se mostrarán 5 botones para compartir el contenido de blog:

• Enviar por correo electrónico
• Escribe un blog
• Compartir con Twitter
• Compartir con Facebook
• Compartir con Google Buzz

No aparecen los botones “Mostrar botones para compartir”?

Si estas utilizando un tema que no ha sido creado por Blogger, es probable que los botones no aparezcan, esto es por que estos temas no tienen incluido la etiqueta para mostrar estos botones. Para resolver este inconveniente debes editar el código de tu tema en Diseño > Edición de HTML.

En el código debes buscar el elemento includable que se encarga de mostrar el contenido del post:

1
2
3

<b:includable id='post' var='post'>
...
</b>

Dentro de este tag debes incluir el siguiente código, que es el encargado de mostrar los botones para compartir. Debes colocarlo en donde prefieras que se muestren los botones, generalmente luego del botón de edición.

1
2
3
4
5
6
7

<b:includable id='post' var='post'>
...
   <!-- share buttons -->
   <div class='post-share-buttons'>
      <b:include data='post' name='shareButtons'/>
   </div>
</b>

Pueden ver estos botones habilitados en nuestro blog de ejemplo: http://2webfacil.blogspot.com.

Mas Información

• Blogger Buzz: New Share Buttons
• Los botones para compartir de Blogger

Tweet