domingo, 19 de diciembre de 2010

Versión móvil de Blogger para plantillas antiguas

Hace dos días, Pizcos avisaba de una nueva funcionalidad de Blogger: versión móvil de nuestros blogs. Y explicaba la manera de activar dicha funcionalidad desde Blogger in Draft. En su post lo podéis leer con más detalle.

Yo os voy a explicar cómo hacer una versión móvil para vuestro blog en Blogger, de manera muy fácil. Y sólo vamos a utilizar un poco de Javascript en la plantilla. Y es totalmente independiente de lo que explica Pizcos.

Este método lo he ideado a raíz de que los pasos a realizar en Blogger in Draft, explicados por Pizcos, a mi no me han dado resultado, y para no modificar excesivamente mi plantilla actual. Si es tu caso también, sigue leyendo.

Para empezar, necesitamos saber la URL de nuestro blog en versión móvil. Es muy fácil, sólo hay que añadir ?m=1 a la dirección de la página principal. Por ejemplo:

http://nombre_blog.blogspot.com/?m=1
En mi caso tengo dominio propio, y desde hace muy poco, pero se hace exactamente igual:

Una vez tenemos este dato, recurrimos a este pequeño script para forzar la redirección en el caso de que se abra la página en pantallas de menos de 400 píxeles de ancho:

<script type='text/javascript'>
//<![CDATA[
if(screen.width < 400){
location.replace('http://nombre_blog.blogspot.com?m=1')
}
//]]>
</script>
Cuanto más arriba en la plantilla, mejor, para que tarde menos en cargar. Yo lo he puesto justo a continuación de </b:skin>.

Por supuesto, hay que sustituir nombre_blog o nombre_blog.blogspot.com por tu dirección.

En cuanto al valor a poner en screen.width, con el valor de 400 he conseguido que se vea la versión móvil en un Nokia 5800 XpressMusic, pero se puede poner cualquier otro, pero si nos pasamos en el valor, en algunos mini portátiles se vería también la versión móvil directamente.

Otra buena alternativa, que descubrí visitando Blogtecnia con mi móvil, es BloggerTouch.

Script aprendido en Foros del Web (Raulmmmm) - Idea inspirada en el post de Pizcos citado más arriba.

Actualización del post y mejora del script


Me he dado cuenta de que, desde el móvil, al acceder a un post cualquiera desde un enlace directo, desde Twitter por ejemplo, el script redirige siempre a la página principal, así que he hecho un pequeño cambio para que siempre llegue la visita al destino correcto del link en el que hizo clic:
<script type='text/javascript'>
//<![CDATA[
if(screen.width < 400){
location.replace('?m=1')
}
//]]>
</script>

38 comentarios:

  1. Blogger Touch nunca me ha funcionado. Probaré con este truco a ver que tal. Saludos y felices fiestas ;)

    ResponderEliminar
  2. Querido José GDF eres un crack, viendo que Blogger, aunque sea con la versión borrador, ofrece el servicio móvil me puse a probarlo tal como lo vi en Pizcos, pero sorpresa para las viejas plantillas se ve que da problemas y no funciona, tu hack ha sido agua bendita, pues ahora todos mis blogs funcionan a la perfección con esta versión móvil, yo he puesto 500, ¿sabes la resolución del iPad? Un abrazo!

    ResponderEliminar
  3. Pues a mi Blogger Touch me fue bien durante unos días, Oloman. Y no me desagradaba del todo. Es más, se ve mejor que con la versión móvil nativa, aunque con demasiados textos en inglés. Ahora quiero ver si es posible manipular la hoja de estilos de esta versión para móviles de Blogger, porque en mi Nokia se ven las líneas de la fecha enormes y se montan.

    Tal vez sea por eso por lo que no me ha funcionado el método de Pizcos, Carlos, por ser una plantilla antigua y, además, modificada hasta la saciedad. Pero este hack no es tan bueno. Me he dado cuenta de que si haces clic en el enlace del pie de página "Ver versión web", si lo haces con un dispositivo móvil, siempre vas a parar a la versión móvil. Así que no deja de ser una solución temporal para quienes tenemos plantillas antiguas, o para quienes no les importe que se vea siempre la versión móvil desde un dispositivo de bolsillo.

    Ya he podido comprobar que Blogtecnia funciona bien con este hack. A ver qué nos cuenta Oloman ;)

    Por cierto, he hecho una pequeña corrección en el código que tal vez os interese. En el post está explicado por qué lo he hecho.

    Un saludo a los dos.

    ResponderEliminar
  4. Pues lo voy a probar con la modificación, gracias José GDF.

    ResponderEliminar
  5. Lo he probado entrando a una entrada desde twitter móvil y funciona a la perfección, fantástico!

    ResponderEliminar
  6. Funciona. Por lo menos en mi móvil. Como es de esos que al girarlos cambia la orientación de la pantalla a un formato más ancho que largo, he cambiado el valor del ancho de pantalla a 800. Creo que se puede arriesgar esa cifra para abarcar mayor número de tipos de móvil, ya que parece improbable hoy día que hay algún ordenador con menos de 800px de resolución.
    El inconveniente de no poder ver la versión web persiste, claro. Se me ocurrió que quizás con referrer se podía hacer algo pero no.

    ResponderEliminar
  7. Muy ingenioso el script José, con tu permiso lo llevo para mi blog y esperemos que el sistema mejore en estos días de prueba por Blogger in Draft.
    ¡Saludos y felices fiestas.!

    ResponderEliminar
  8. Hola de nuevo:

    Entre el trabajo y el niño he estado un poco liado estos días. Ahora tengo un hueco para poder responderos (aunque a duras penas, ¿eh? :S )

    Carlos, yo también lo pude comprobar con el Nokia en cuanto me lo dijiste, se puede entrar directamente a las entradas desde un link directo a una entrada.

    Se me pasó responderte a lo del iPad. La verdad es que no tengo ni idea. Tal vez lo más indicado sea lo que dice Oloman, establecer una resolución relativamente alta para cubrir el máximo posible de resoluciones posibles.

    Es posible hacerse una idea de lo más adecuado al blog de cada uno simplemente mirando las estadísticas, se pueden ver las visitas por resolución de pantalla, aunque es algo que yo todavía no he hecho.

    También lo he comprobado contigo, Oloman, y ya te he comentado respecto a lo de las resoluciones en la respuesta a Carlos.

    El inconveniente de que se quede siempre la versión web, tal vez se pueda resolver ampliando el script. Lanzar un cuadro de diálogo que pregunte si ver o no la versión móvil, y completarlo con la creación de una cookie para que no lo pregunte cada vez que se abre una página nueva. Pero ya sabes que eso se escapa a mis conocimientos :$

    Todo tuyo, Felipe. Lo mismo te digo que a Carlos y a Oloman, también puedo ver la versión móvil de tu blog sin problemas.

    Un saludo a todos y felices fiestas navideñas :H

    ResponderEliminar
  9. Gracias por tus respuestas José GDF, tienes razón las estadísticas del blog a veces sirven para algo más que el ego. Estas Navidades son especiales para tu familia ¡Soys uno más! Cuando crezca veréis su ilusión por los Reyes, y se disfruta como padres. Feliz Navidad!

    ResponderEliminar
  10. Gracias por la ayuda y este gran consejo. no he podido ver si este truco si funciona en mi blog , porque mis amigos con smartphone no estan =,( alguien puede verlo? es mi blog Nuclear... (bueno es el blog que aparece en mi perfil, hago esto para no cometer spam)

    ResponderEliminar
  11. Carlos, cuando el niño todavía es un bebé de mes y medio no se disfrutan las navidades... El año que viene supongo que sí.

    nEjO, te confirmo que con mi Nokia se ve la versión móvil de tu blog. :)

    Parece que has leído el texto que hay encima del formulario. Tranquilo que no hubieras "cometido" ningún delito :D En este caso se podía pasar, al tratarse de comprobar si la chapucilla esta funciona -hubiera sido un enlace de interés para la entrada-, que en tu caso ya te digo que así es. Me alegro que te haya salido bien. Un saludo.

    ResponderEliminar
  12. Muchísimas gracias por el aporte. He estado buscando esto por meses. De nuevo, gracias. :D

    ResponderEliminar
  13. No me hagas mucho caso, pero me parece que esta posibilidad en Blogger, de manera nativa, es decir, sin depender de servicios externos, no existía hasta hace pocas semanas, así es que es normal que no encontraras nada antes, Rafael.

    No hay de qué ;)

    ResponderEliminar
  14. Hola! Muchas gracias por este tutorial para los que tenemos plantillas viejas de Blogger. A mi me funcionó muy bien. Pero hé notado que pasa algo con el script: si entras a mi blog www.Amandysha.net en la versión móvil, e intentas acceder a la opción que dice: "ver la versión web" pues hace el intento de cargar la versión web estándar de mi blog, pero siempre vuelve a la versión móvil ¿ Alguien sabe por qué me pasa esto? ¿Es sólo a mí o a otros más les pasa? Gracias de antemano por la ayuda y las repuestas.

    ResponderEliminar
  15. Hola, Amandysha®:

    Ya lo he comentado más arriba, esta chapuza tiene justo ese inconveniente, no es posible ver la versión web de ninguna manera, siempre te redirigirá a la versión móvil.

    La única solución que le veo al problema sería el uso de cookies, pero no me llegan para tanto mis conocimientos de programación.

    Bueno... Hay otra, que es el uso de Blogger Touch, retirando antes este script de la plantilla. Al final de la entrada, justo antes de la actualización, tienes el enlace.

    Un saludo :)

    ResponderEliminar
  16. A mi si me funciono, muchas gracias y acá está la entrada donde anuncio la versión móvil Mi Ubuntu Latino en versión móvil

    ResponderEliminar
  17. Hola, Mi Ubuntu Latino:

    Lo has hecho tal como explico en la entrada, y he podido entrar con mi Nokia, pero me voy a la página principal, a pesar de que el enlace que me has puesto en tu comentario va directamente a tu post.

    Si haces la pequeña corrección que hay en la actualización de esta entrada, todas las visitas podrán entrar directamente a los posts a los que lleven sus enlaces.

    Un saludo y gracias por escribir :H

    ResponderEliminar
  18. Si funciona, y funciona aún mejor ya que puedes redireccionar a una página que hayas hecho tú optimizada para dispositivos móviles.
    Espero que puedas ayudarme con esta duda... En mi blog pongo muchos videos, es por eso que implementé Shadowbox. Pero cuando abro la versión móvil se ve sólo la imagen que utilizo para que al darle click se abra el video y si se le da click a la imagen te llva a la página del video en pantalla completa.

    Mi pregunta sería: Así como puedes redirecconar a otra página dependiendo de la resolución, ¿Es posible cambiar la etiqueta del enlace al video por una etiqueta iframe, dependiendo de la resolución del usuario?

    Te agradezco de antemano, y si no fui lo suficientemente claro sólo dime e intentaré hacerlo con más detalle.

    ResponderEliminar
  19. Hola, Asesino Cereal:

    Lo que planteas sería un pequeño script que sustituyera la cadena que abre ShadowBox por el código que necesites para que lo haga con la misma resolución con la que se abre la versión móvil. Tal vez se podría añadir esa instrucción en el mismo script de este post, pero no estoy seguro de que funcione.

    Estoy haciendo, a paso de caracol, una versión de esta plantilla con el código de una plantilla de las nuevas. Ahí creo que sería posible hacer lo que propones, porque parte de las plantillas nuevas es para la versión móvil y cargaría con ella en los navegadores. Pero tengo esa plantilla nueva muy verde todavía y no sé cuando me voy a poner a continuarla.

    En resumen, de momento no puedo responder con propiedad a tu pregunta, porque no puedo experimentar con códigos ahora mismo. Tengo el ordenador del estudio averiado y un trabajo musical que terminar que hay gente que lleva tiempo esperando escuchar :(

    Un saludo y siento no poder ayudarte como me hubiera gustado.

    ResponderEliminar
  20. TEngo problemas en mi direccion www.turankeo.com se muestra de una forma muy ancha y en www.turankeo.blogspot.com se muestra perfectamente si podrias darme una ayuda con esto.

    ResponderEliminar
  21. Hola, Kas-Tro:

    Por lo que veo en el código fuente de tu blog, la página principal con dominio tiene un marco o frame insertado con el mismo blog, con el dominio de Blogspot. De todas formas, parece que ya no usas el código para la versión móvil, así que no te puedo ayudar más.

    Siento no haberte podido responder antes, he estado muy liado estas últimas semanas y, encima, tuve una avería grave en mi ordenador.

    Saludos.

    ResponderEliminar
  22. Muchas gracias por el consejo. Yo utilizaba Bloggertouch sin problemas, pero de esta forma es más visual y menos dependiente de herramientas externas.


    gracias!!!!!

    ResponderEliminar
  23. Y además te funciona perfectamente, Davicine. He abierto No es Cine... en versión móvil con el Nokia sin problemas.

    Ten muy en cuenta el inconveniente que tiene de no poder dar a elegir a la visita entre una versión u otra cuando entra con un dispositivo cuya pantalla es igual o inferior a la que establezcas. Echa un vistazo a los comentarios anteriores para saber a qué me refiero para más información.

    Me alegro que te haya resultado útil. Un saludo y gracias a ti ;)

    ResponderEliminar
  24. ¿Sabes lo que ocurriria si lo abro desde el netbook de 10'?

    Seria un latazo ya que practicamente solo uso el aparattito, mis mujeres me han hecho migrar de los grandes, jejeje.

    Saludos.

    ResponderEliminar
  25. Depende de la resolución en pantalla que tenga, Carlos. Se me ha ocurrido una posible solución al problema. Pero tengo que probarla antes, ya sabes que no publico nada que no haya probado bien antes ;)

    ResponderEliminar
  26. He probado tu consejo y no me funciona. Lo he probado de mil maneras y no consigo que se vea la versión móvil. Supuestamente, debería verse al estar seleccionada la opción de blogger, pero con ella y sin ella, nada funciona.
    ¿Sabes porqué podría ser?

    Un saludo y gracias!

    ResponderEliminar
  27. ¿Hiciste la prueba con un dispositivo móvil cuya pantalla es superior a la que pone en el script, Indiyon? Si es así, prueba con un valor inferior, debería funcionar.

    Saludos.

    ResponderEliminar
  28. El Script funciona a medias, al menos a mi si que me detecta la version movil, pero respecto a redireccionar al post y no a la pagina principal, NO me funciona. garcias de todas maneras

    ResponderEliminar
  29. Perdona pero el Script primero (orignal) y el script segundo (con la correcion??), tu diras donde esta la diferencia ya que yo no la veo, son identicos. Un saludo

    ResponderEliminar
  30. PC, es extraño. ¿Usaste el código del final de la entrada o el primero que viste?

    Anónimo, la diferencia es que el primero redirecciona al a página principal en location.replace('http://nombre_blog.blogspot.com?m=1'), lo cual no es útil si la visita prentende ver un post en concreto, mientras que en la segunda versión del script la redirección lo único que hace es añadir a la URL actual lo necesario para ver la versión móvil: location.replace('?m=1').

    La diferencia salta incluso a la vista. En la primera versión, esa línea es bastante más larga que en la segunda.

    Gracias por comentar y disculpad el retraso en responder, he cerrado por vacaciones el blog durante casi un par de semanas.

    ResponderEliminar
  31. Hola, tu titulo indica que se trata para plantillas antiguas, y ¿como seria para las nuevas versiones?. Coloque ese script en la justo como decias a continuacion de en edicion html de mi blog, pero cuando doy guardar me sale error, q nose ha podido completar la solicitud. Lo intente varias veces y nada. Yo he creado un blog recien al año pasado, pero ni se si corresponde a version antigua o no, algo nuevo en estos temas.

    saludos

    ResponderEliminar
  32. Hola, casso3d:

    Efectivamente, esta entrada está dirigida a plantillas antiguas, de hace dos o más años.

    Para las nuevas versiones, lo mejor que puedes hacer es retirar el trozo de código que has tomado de aquí, guardar la plantilla sin él y abrir el panel de control de Blogger. Donde pone correo electrónico y móvil, marca la casilla que dice Sí, quiero mostrar la plantilla para móviles en dispositivos móviles y guarda.

    [Si estás usando la nueva interfaz del panel de Blogger, encontrarás esto mismo en la columna izquierda, donde pone Plantilla y luego pinchando en el icono con forma de rueda dentada que hay debajo del frame que pone Móvil encima. Si tienes problemas para que cargue esa página, como me está pasando a mi, entra por la interfaz antigua de Blogger (rueda dentada de arriba a la derecha, justo debajo de tu avatar y nombre de usuario) y sigue los pasos que te he dado en el párrafo de más arriba]

    Debería funcionarte, porque tienes una plantilla de las nuevas, con las clases necesarias para funcionar con dispositivos móviles.

    A ver si lo consigues con mis indicaciones. Tal vez hayan sido un tanto liosas, pero no he podido resumir más. Lo he estado mirando mientras te iba escribiendo esta respuesta. Un saludo.

    ResponderEliminar
  33. no te lo vas a creer pero llegué aquí buscando esto desde google!

    ResponderEliminar
  34. A ver si te funciona... Aunque ten en cuenta que la redirección por paises puede complicar el script. Cualquier problema, me comentas algo y si hace falta se actualiza la entrada.

    ¡Suerte!

    ResponderEliminar
  35.  Se agradece, no sabes como puedo hacer , para tener un URL personalizado a la version mobile de blogger...
    El tipico m.midomoinio.com

    ResponderEliminar
  36. Eso ya me parece que con Blogger no es posible. Quienes tienen versión móvil es porque tienen el blog alojado en un servidor propio (o alquilado) y su software de publicación y su proveedor de dominio se lo permite.


    La verdad es que no sé exactamente cómo va el tema, pero ese tipo de URL para Blogger, a día de hoy, y que yo sepa (estoy suscrito a varios blogs de ayuda y no se dice nada de eso) no se puede, al menos todavía.

    Gracias por tu comentario, yashirasu.

    ResponderEliminar
  37. Hack perfecto. Lo he utilizado justo a la inversa por utilizo una entrada como plantilla y borro todo el html de la plantilla original. El problema es que cuando entraba al blog desde el movil, por defecto establecia la version movil y al no haber entrada mostraba una pantalla de aviso de que no habia entrada y solo aparecia si elegias la version web. Con tu script y estableciendo la variable a cero, todo perfecto. Muchas gracias

    ResponderEliminar
    Respuestas
    1. El caso es que ahora mismo, con el auge de lo adaptativo o responsive, la plantilla móvil ya va dejando de tener la utilidad que tenía antes. Es más, la plantilla móvil oculta demasiadas cosas que la plantilla normal sí muestra. A día de hoy, recomendaría hacer una versión adaptable, lo más ligera posible, de tu actual diseño, ya que cada vez más gente se conecta con dispositivos móviles.

      Por tanto, dejé de usar hace escasos días la versión del móvil, porque he hecho una nueva, adaptable, a partir de una plantilla de Oloblogger, que compartió hace un tiempo.

      En uno o dos días publico nueva entrada al respecto. La tengo en borradores, sólo me falta subir unas capturas que tengo en el móvil.

      Aún así, me alegro de que aún resulte útil este truco a alguien. Gracias por comentar, Arroyo. Un saludo y no hay de qué :)

      Eliminar

No hay normas especiales para publicar comentarios en este blog. Sólo las básicas: respeta, no insultes, y no hagas SPAM descaradamente. Tampoco se admitirán comentarios que vulneren la Ley. Cualquier aportación, consulta y crítica es bienvenida, a condición de cumplir estas normas básicas.

Si lo que quieres es ponerte en contacto directamente conmigo, dispones para ello de un formulario de contacto.