miércoles, 1 de junio de 2011

Agregar boton +1 de Google en tu blog

Hoy les traigo un tutorial para poder agregar el botón +1 (plus 1) de Google en su blog.
Lo primero que debemos hacer es configurar el tamaño y los detalles del botón en esta direccion, una ves configurado el detalle del botón copiamos la primera parte del código de abajo, para mi fue algo como esto:
<!-- Place this tag in your head or just before your close body tag --> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

<!-- Place this tag where you want the +1 button to render --> <g:plusone size="tall" href="http://goorge.blogspot.com/"></g:plusone>
Este pedazo de código lo debemos pegar directamente en el código html del blog, para entrar a esto en blooger debemos ir al tab "Diseño" luego a "Edición de HTML" y buscamos una parte donde diga algo así:
/* Header ----------------------------------------------- */
Y lo pegamos justo debajo de esa linea, debería quedarnos algo así:
/* Header ----------------------------------------------- */
<!-- Place this tag in your head or just before your close body tag --> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
Luego copiamos el siguiente pedazo de código, para mi fue este:
<!-- Place this tag where you want the +1 button to render --> <g:plusone size="tall" href="http://goorge.blogspot.com/"></g:plusone>
Este lo pegamos en donde queremos que salga el botón +1 (plus 1), yo lo pegue justo después de los widgets para que me salga al lado de los botoncitos de compartir de Facebook, Twitter y todo eso, para tenerlo así igual al mio debemos buscar esta linea de código:
/* Widgets ----------------------------------------------- */
Y pegarlo tal cual como en el anterior caso, deberíamos tener algo así:
/* Widgets ----------------------------------------------- */
<!-- Place this tag where you want the +1 button to render --> <g:plusone size="tall" href="http://goorge.blogspot.com/"></g:plusone>

Listo!, ya tenemos el botón de +1 de Google para nuestro blog, espero les sea de utilidad.
Una recomendación para los que no son muy entendidos de código HTML, hagan una copia de seguridad por si acaso surge cualquier eventualidad y dañen su plantilla del blog, es sencillo hacer la copia y restaurar la plantilla, esa opción la encuentran justo arriba del edito de HTML.

10 comentarios:

  1. Para hacer HTML a TEXTO PLANO y q no cuelges imagenes:
    http://no.at.ua/utilidades/HTML-a-texto-plano.html

    y si dices que hay q buscar la parte de la plantilla donde cice:

    /*header
    ---------------------------------------------*/

    pues te informo en buena onda que no todas las plantillas son iguales y estoy seguro que el 99% de las personas que lean este post no encontraran en sus plantillas esas lineas por que usamos todos plantillas diferentes.

    creo que debes de aprender antes de enseñar

    lo digo en buena onda he muy bueno que andes por aca en esto de los bloggers

    ResponderEliminar
  2. ¿Y para agregarlo en un site?

    ResponderEliminar
  3. Carlos, tienes razón con lo del texto plano, tuve que rehacer la entrada varias veces porque no salia el código y al final me decidí por hacerlo así porque estaba apurado, voy a tratar de arreglarlo lo antes posible, por otro lado lo que dices de las plantillas, todo código html de una pagina web están hechos con una estructura que generalmente son muy similares, todas poseen una área de cabecera que es a la que me refiero y bueno los widgets también es un poco obvio que son, aparte que esta pequeña guía es mas enfocada a personas que tienen un poco de conocimiento de html, de todas maneras agradezco mucho tu comentario y tu visita, por que la verdad prefiero un comentario constructivo como el tuyo que ningún comentario XD , Saludos!

    ResponderEliminar
  4. G A
    Primero tienes que tener permisos para editar el código de tu site, después puedes buscar dentro del código secciones similares a la que describo, casi todas las paginas web están bien comentadas indicando donde empiezan las diferentes secciones, el segundo pedazo de código lo pegas donde quieras que salga el botón "+1", Suerte!

    ResponderEliminar
  5. estoy intentando poner el bendito boton de +1 en mi blog... no hay forma, hice todo como esta explicado aqui pero no pasa nada. el boton no aparece...

    ResponderEliminar
  6. ¿Y esto se puede usar en páginas como about.me?

    ResponderEliminar
  7. ¡Buenas! Gracias por el posteo (sin él no sé si podía insertar el botón más uno en mi blog. Pero creo que te enredas demasiado. Era más sencillo decir que en "esta direccion" obtienes el código html o como se llame, lo insertas en alguna parte de tu blog y ya está. En fin. Gracias
    http://entodoslosmedios.blogspot.com/

    ResponderEliminar
  8. muchas gracias Jr, logre colocarlo.
    saludos

    ResponderEliminar
  9. Pues yo soy del pequeño tanto por ciento que si que encontro eso que decia, asi que gracias por compartir conocimiento, por pequeño que sea

    ResponderEliminar
  10. gracias me a sido de utilidad mucho!!!

    me gustaria intercambiar enlace o barnner de 125x125
    si estas de acuerdo avisame ok..
    saludos

    ResponderEliminar