Alojar scripts para Blogger | Oloblogger Una antigua demanda de los usuarios de Blogger es poder alojar en este mismo servicio nuestros scr...

17 de mayo de 2010

Alojar scripts para Blogger

Una antigua demanda de los usuarios de Blogger es poder alojar en este mismo servicio nuestros scripts, así como otro tipo de ficheros ahora mismo vedados. Como esto ya colea tiempo y puede que aún quede un buen trecho para que se resuelva de manera óptima, a continuación veremos distintas alternativas para poder utilizar ficheros javascript en los blogs de esta plataforma.

1. SCRIPT DIRECTAMENTE EN LA PLANTILLA

Una primera opción es agregar el código del script que queremos utilizar, directamente en la plantilla.

Muchas veces nos facilitan una línea de codigo como la siguiente, que lo que hace es llamar al script desde su ubicación original. Es la forma más fácil de usarlo, pero la menos conveniente en cuanto que dependemos de que el fichero del script, se mantenga indefinidamente accesible y eso no depende más que del propietario. Para alojarlo nosotros mismos necesitamos abrir el fichero .js original y copiar su contenido. La dirección será lo que en la línea de abajo se ha marcado en verde:

<script src='URL_SCRIPT' type='text/javascript'></script>


Poniéndola en nuestro navegador, tendremos acceso a un fichero de texto que podremos copiar en el portapapeles y luego pegar en el lugar que a continuación se indica. La línea de código antes reproducida es una "llamada" al script que será innecesaria si usamos este sistema. Se podrá borrar después de copiar el código en nuestra plantilla. Justo antes de </head>...

<script type='text/javascript'>
//<![CDATA[
CONTENIDO DEL FICHERO .JS ORIGINAL
//]]>
</script>

Los caracteres que rodearán al contenido sirven para que el código "estricto" de Blogger, admita el script tal cual viene redactado.

Para añadir otro script adicional, repetir todos los pasos.


2. SCRIPT EN UN GADGET

Esta otra opción es útil cuando es script es demasiado largo, cuando queremos utilizar varios, o simplemente cuando no queremos utilizar la opción de la plantilla. Con el mismo sistema de antes, copiamos el código del fichero .js original. Ahora desde la edición de plantilla, justo después de <body> creamos una sección insertando esta línea:

<b:section class='contenedorscripts' id='contenedorscripts' />

En la parte CSS (antes de ]]></b:skin>) insertamos también unas propiedades para esa clase (contenedorscripts), para que los títulos que pongamos ahí no sean visibles. Esto es útil para poder identificar mediante el titulo, qué script está en cada gadget cuando vayamos a instalar varios, pero evitando que dichos títulos sean visibles en la vista normal del blog.

.contenedorscripts .widget h2 {display: none; visibility: hidden;}

Ahora vamos a Elementos de página y veremos arriba del todo un nuevo bloque para añadir gadgets. Simplemente añadimos uno tipo HTML/JavaScript y en él colocamos un título (no se verá en el blog si hicimos lo del estilo) y pegamos el contenido antes copiado entre etiquetas SCRIPT.

<script type="text/javascript">
CONTENIDO DEL FICHERO .JS ORIGINAL
</script>

Para añadir nuevos scripts, los dos primeros pasos no serán necesarios. Simplemente añadimos nuevos gadgets y copiamos en ellos el código JavaScript correspondiente.

Nota: Cuando los scripts así instalados no funcionen, una causa común es que los símbolos < y > que pudiera haber, no sean apertura/cierre de etiquetas, sino símbolos de menor/mayor. Para que se interpreten correctamente tenemos que insertar un espacio en blanco delante y detrás de cada uno de estos:

for(var i=0;i < a_rc;i++) {...



Hasta aquí los sistemas en los que controlamos 100% el script y ahora otros para usar alojamientos externos, dónde dependeremos de la saturación o la continuidad de estos. De entre ellos, primero los de Google, ya que Blogger depende de Google y malo sería que no funcionaran.

3. USAR LIBRERIAS API AJAX DE GOOGLE

Muchos de los scripts más comunes, están alojados en las API AJAX de Google y pueden ser utilizados utilizando este tipo de código, que deberá ser insertado antes de </head>:

<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;LIBRERIA 1&quot;, &quot;VERSION&quot;);
google.load(&quot;LIBRERIA 2&quot;, &quot;VERSION&quot;);
};

O bien con la dirección directa del fichero. Ejemplo del anterior (cargador) y de este sistema (dirección) para JQuery:

<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("jquery", "1.3.2");
};

.../...

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Son excluyentes. O se usa el primero o se usa el segundo. Nunca ambos a la vez.

4. USAR/ALOJAR EN GOOGLE CODE

En Google Code también hay mucho software libre y si encontramos la dirección de un script en concreto que nos interese, también podemos utilizarlo con este otro código, siempre teniendo en cuenta que el propietario podría borrarlo y quedarnos sin él más adelante.

En este caso el script se instalará simplemente poniendo antes de </head>...

<script src='URL_FICHERO' type='text/javascript'/>

Para que la cosa quede bajo nuestro propio control -opción más recomendable que depender de otros- también podemos copiar el código y alojarlo nosotros mismos en Google Code tal y como nos explicó Pizcos en una de sus entradas.

5. ALOJAR EN GOOGLE SITES

A pesar de que desapareciera Google Pages y se comentara que Google Sites iba detrás, lo cierto es que este último sigue estando operativo y permite alojar ficheros diversos, tal como vimos con el caso de los ficheros flash. De la misma manera que se explicó allí, se pueden alojar también ficheros JavaScript y luego hacer hotlinking utilizando el mismo código que se utilizó en el caso justo anterior a este y que es válido para todos los casos en que se aloje el script fuera de nuestra plantilla.

6. ALOJAR EN OTROS SITIOS

Esto es lo más fácil pero lo menos recomendable. Hay sitios que permiten alojar ficheros .js y en los que no, será suficiente con renombrar el fichero con la extensión .txt. Los scripts son básicamente ficheros de texto y por eso no habrá ningún problema cuando los renombremos. El código será como en los dos casos anteriores pero cambiando la extensión si ha sido necesario.


Referencias:
Solucionando scripts: Ultimos comentarios. Vagabundia.
Alojar scripts en Google. Pizcos Blog.
Buscando espacio para alojar los scripts. Banaka, Banaka.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

40 comentarios :

  1. Oloman, mis felicitaciones!! qué excelente tutorial para los que siempre andamos con la problemática de los scripts!
    Un abrazo

    ResponderEliminar
  2. un tutorial buenisimo :D en seguida lo copio en un documento y lo almaceno en la carptea archivosmiosextremadamentebuenos

    saludos! CHICKEN

    ResponderEliminar
  3. Espero que a partir de ahora podais decir eso de "no problemo" :D

    ResponderEliminar
  4. Echa un vistazo, quizá esta es otra forma:
    CLIC AQUI

    ResponderEliminar
  5. Keil. Probablemente esa sea una manera de evitar utilizar //<![CDATA[...etc., pero habría que valorar qué cuesta menos trabajo hacer. Gracias.

    ResponderEliminar
  6. Excelente! muy bueno ahora ya se donde alojar mi scripts! Gracias =)
    ----
    Oloman bastante tiempo sin acceder a tu ayuda ahora lo hago por que lo nesecito y me gustaria que me dijieras por que en mi elemento Estilos(HTML7) funciona expandir y contraer y en cambio en Link's Amigos(HTML8) no funciona? que puede ser? mira aqui va mi sitio http://eligor-siniestro.blogspot.com/

    ResponderEliminar
  7. Creo que ya encontraste el fallo Eligor!, porque ahora mismo funciona bien. Saludos.

    ResponderEliminar
  8. Asi es.. una pregunta te sabras el codigo para que por ejemplo un elemento HTML quiero que lo vea yo no mas NO los visitantes?

    ResponderEliminar
  9. Mételo dentro de un DIV o un SPAN con la clase
    class='item-control blog-admin'

    De esa manera lo verás tú sólo cuando estés logueado. Si no, no lo verás ni tú.

    ResponderEliminar
  10. Gracias es lo que buscava!

    ResponderEliminar
  11. Genial, sos el mejor, no se que haria si este blog.
    No me canso de agradecer
    Saludos!

    ResponderEliminar
  12. Salutes muy interesante leer tus consejos, y ponerlos en practica, los invito si no es molestia a ver mi pagina es http://www.joseluisacevedo.blogspot.com y si puedes dame algun consejo para aplicarlo a mi pagina te agradeceria Oloman

    ResponderEliminar
  13. Voy a guardar esta información para ir leyéndola mientras hago el intento de hacer un blog, no conozco del tema y pienso que es muy complicado, pero de todas maneras lo voy a intentar.

    ResponderEliminar
  14. ¿Consejos, Jose Luis? En gustos no hay nada escrito. No hay más que ver el engendro que tengo yo :D Si acaso, para que no parezca que me escaqueo, a mí se me ocurre que quizás podrías mostrar menos posts por página, para que la barra lateral y el cuerpo de entradas, ocupen más o menos la misma longitud. Pero lo dicho, es sólo un gusto personal.

    Internet marketing, está bastante claro que te estás quedando conmigo ;)

    ResponderEliminar
  15. pero si lo que quiero es copiar el codigo js dentro de un gadget y llamar a ese script desde otoro gadget o desde una entrada como hago???
    de todas formas gracias muy buena la entrada.

    ResponderEliminar
  16. Exactamente igual que si lo copias en la plantilla y luego lo llamas a continuación, desde otra parte de la plantilla, desde una entrada...

    ResponderEliminar
  17. pero las entradas no me aceptan javascript es lo que estoy viendo..... sabras algo???

    ResponderEliminar
  18. Las entradas si soportan javascript, lo que ocurre es que allí, la cosa es más delicada. Para empezar, el código debe ser redactado todo seguido, sin saltos de línea.

    A veces te da un error al intentar guardar. Si está bien, a pesar de ese error, te dejará publicar y se verá sin problemas, pero sólo una vez publicado. No podrás hacer Vista Previa.

    ResponderEliminar
  19. bueno porque lo que yo hago es agregar el script en un gadget y en otro gadget agrego el html para llamar al script. pero en la entrada cuando agrego el html para llamar al scritp no funciona.

    a y de una buena vez preguntarte si conoces algun servicio para alojar scritp??? dropbox es muy bueno pero noc si el bando de ancha es suficiente.
    lo conoces??? de todas formas gracias por tus respuestas.

    ResponderEliminar
  20. Eso que comentas no debería dar ningún problema, siempre que el código esté bien redactado, cosa que no sé ni puedo saber desde aquí.

    Y sobre dropbox, nunca lo he usado, pero creo que va bien. Otras opciones que sí me consta que funcionan bien, son Google Sites, Google Code y Fileden.

    ResponderEliminar
  21. hola yo soy nuevo, queria preguntar si me pueden ayudar con un truco que vi.
    resulta que para poder conseguir los links de descarga que tienen en un blog si o si tienes que dejar un comentario... como lo hacennnnn..... quiero ponerlo yo tambien asi por que me descargan mis cosas y ni si quiera agradecen. gracias

    ResponderEliminar
  22. Ivan no he visto nunca nada por el estilo, pero es que tampoco sabría cómo hacerlo. Lo siento.

    ResponderEliminar
  23. Hola oloman. Muy buen artículo.
    He estado probando varias de las alternativas de alojamiento que propones y la que me parece mejor es la de google code a pesar de que en el blog de pizcas que comentas la hayan tachado diciendo que es mejor google sites.
    Yo con google sites he encontrado problemas para ficheros javascript. Dicen que no se permiten pero luego sí funcionan realmente (renombrandolos como txt o no), pero tienen un comportamiento extraño y si se analiza su descarga (por ejemplo con firebug) se ve que lo rechaza inicialmente pero luego lo reintenta y sí se descarga. Pero a veces esto falla y no los descarga bien (por ejemplo si se usan desde blogs de blogger pasados a dominio personal) mientras que desde google code lo hace bien siempre a la primera.
    Como tengo mucos otros ficheros en sites ne gustaría no tener que usar code solo para los js. ¿sabes cual puede ser el motivo de estos comportamientos?

    ResponderEliminar
  24. Tomat los motivos, que es lo que preguntas, los desconozco. Aunque ambos sistemas están bajo la batuta de Google, son dos servicios independientes y supongo que de ahí sus diferencias.

    No sabía que Pizcos había decidido y publicado que Sites fuera mejor que Code para el alojamiento de ficheros, pero tiene su lógica. Google Code es principalmente para compartir y desarrollar rutinas y códigos de interés, en un espacio público, a modo de Wiki o web cooperativa.

    Google Sites es para la creación de un sitio web personal y si permite alojamiento de ficheros, es sólo porque resulta necesario para crear una web.

    Como se puede comprobar, ambos sirven para lo que necesitamos (alojamiento de ficheros 'especiales'), pero cada uno tiene una utilidad básica distinta de esa y en ambos casos, alejada del simple alojamiento.

    Puestos a elegir, parece más lógico alojar en un sitio que es para uno mismo (Sites) que en otro que se supone público (Code), pero no veo ninguna otra razón más para decantarme por uno o por otro. Utilizo principalmente Sites, pero la verdad es que aprovecho ambos. ¿Un lío tener ambos? Pues sí, un poco; pero si algún día casca uno, siempre me quedará el otro. Dicen que nunca se pongan todas los huevos en la misma cesta...

    ResponderEliminar
  25. Gracias en cualquier caso. Seguiré investigando a ver si consigo que funcionen los js desde sites para los blogs en dominio personalizado y si no lo consigo, los pasaré a google code.

    ResponderEliminar
  26. Hola

    Puedes explicar con un poco mas de detalles, la parte:

    1. SCRIPT DIRECTAMENTE EN LA PLANTILLA

    Teniendo en cuanta que lo que deseo hacer es lo que explicas en eta entrada: http://oloblogger.blogspot.com/2010/09/integrar-publicidad-con-texto-posts.html

    Saludos

    ResponderEliminar
  27. Haniel, en el post que citas se explica al final cómo insertar scripts de publicidad en la plantilla y es precisamente cómo se dice también en ese punto 1.

    Sólo es necesario meter unos caracteres especiales (los que ahí se indican) antes y después del código del servicio, pero te anticipo que no siempre es necesario. Sólo utilízalos si el código que te proporcionan no funciona a la primera.

    ResponderEliminar
  28. Hola, sabes porque no funcionan los javascript al pasar de blogspot a un dominio personal .com..., CASO: www.enfanceporlosninos.org

    Lo he revisado en distintas computadoras y e 3 Navegadores: Chrome, Mozilla y Safari, y no funciona en los útlimos 2

    Esta muy buena tu página y aprendes muy rápido a utilizar blogger!

    ResponderEliminar
  29. Armando, a mí no me ocurre eso. Tengo otro blog con dominio propio y los scripts siguen funcionando. Distinto es si además del dominio, también has cambiado el alojamiento. En ese caso, hay que reformular la dirección de los scripts.

    También pueden fallar cuando llevan incluidos los símbolos que se explican en 1, ya que estos sólo son para Blogger.

    Por último, otra causa puede ser el uso de comillas sencillas dónde debería haber dobles. En un script tienen que usarse las contrarias de las que se usen en el resto del código HTML.

    En cualquiera de estos casos, insisto en que sólo fallan si se cambia de alojamiento. El cambio de dominio per sé no da problemas de esta índole.

    ResponderEliminar
  30. una pregunta como hago para insertar un tabla dinamina que utiliza un script como la inserto en un post...

    ResponderEliminar
    Respuestas
    1. Pues en un principio, cualquier script se puede poner en una entrada si lo metes entre <script type="text/javascript"> y </script>
      Sólo tienes que tener cuidado de que las comillas que tenga el script sean sencillas ('). Si por casualidad dentro de alguna función hay que usar comillas dentro de comillas, estas segundas tendrías que indicarlas como &quot; para que Blogger no se lie.

      Eliminar
  31. Hola,
    Me he instalado en este blog: http://pistocatala.blogspot.com.es/ esta plantilla: http://www.allblogtools.com/blogger-templates/3-columns/extra-news/
    El problema es que para que funcione eso que hay al principio, de últimos posts, pues tienes que poner en un widget que te aparece al instalar esa plantilla llamado Random Posts un código que te indican en un .txt del .rar, para que te funcione.
    Al poner ese código en ese widget y abrir el blog, en Chrome se me bloquea el blog, y en Firefox y IE me dice que el Script tarda mucho o no está funcionando y que lo detenga. No se porque pasa esto porque en la Versión Demo que te dejan ver antes de descargarte la plantilla lo de últimas entradas funciona perfectamente.
    Qué puede estar pasando?
    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola. Lo que explicas parece indicar claramente que el script que hay en la demo y el que te pasan para instalar no es el mismo. He visto que la plantilla usa jquery-ui y puede que sea esa la utilidad que utiliza, aunque no se cómo se utiliza si fuera así. Quizás puedas preguntar en el sitio de dónde la descargaste.

      Eliminar
    2. Gracias por ayudarme, estoy intentando contactar con el creador de la plantilla.

      Eliminar
  32. Que tal, muy buenos aportes muchas gracias.
    Quiero alogar el scrip del índice (el del mandamiento xD) pero la vdd no entiendo mucho, podrías ayudarme por favor?

    ResponderEliminar
    Respuestas
    1. Hola Óscar. En esa entrada explico la manera más fácil de poner ese índice en el blog.

      Tienes que tomar el último trozo de código de esa entrada (el del "Aviso") y pegarlo directamente en una PAGINA. Nada más. Si lees las instrucciones verás que no hace falta ponerlo en la plantilla.

      Eliminar
  33. Hola, como sé para que sirve determinado script en mi plantilla?

    ResponderEliminar
    Respuestas
    1. Hola. Pues para eso has de saber interpretar JavaScript, pero si no conoces ese lenguaje de programación, lo más fácil es borrarlo (copiándolo previamente en otro sitio para poder reponerlo tras la prueba) y ver qué es lo que desaparece o se modifica en tu blog.

      Eliminar
  34. Oloman, tengo un problema, siempre que uso dominio propio en mis blogs se daña el javascript, no se muestra correctamente las páginas.

    Los script los tengo alojados en sites.google.com, https://sites.google.com/site/rinconbloguero/javascript, y la página trabaja perfecto cuando uso el dominio de blogger si lo personalizo se daña, ¿Me podría ayudar?

    ResponderEliminar
    Respuestas
    1. Hola. Para echar un vistazo necesitaría saber cuál es tu blog, con qué JS te surgen problemas y en qué sitio concreto lo estás aplicando para que pueda verlo funcionando.

      Eliminar