Cargando...
Menu Ver sumario
¿Te gustó lo que viste?
Recomiéndanos

Post aleatorio






Nuevo diseñador. Usar una imagen de fondo propia

31/07/2010
Hace poco vimos como manipular el endiablado código de las plantillas generadas con el nuevo diseñador de idem de Blogger, con el fin de cambiar la imagen de fondo principal. Sin embargo, tal y como comentaba también días atrás, Blogger parece que está decidido a ir realizando mejoras a un ritmo mayor del que nos tiene acostumbrados y así ha sido en esta ocasión.

Lo último, fresquito, fresquito, de ayer mismo, ha sido la incorporación de un botón para poder subir la imagen que queramos para el fondo, de manera que no tengamos que depender del extenso, pero a fin de cuentas limitado, repertorio de iStockPhoto, el almacen de imágenes de dónde proceden los nuevos fondos.

Actualmente está sólo disponible desde Blogger en borrador (Blogger in Draft), pero supongo que como no dará muchos problemas, pronto estará también para usarlo desde Blogger normal.

Pero en fin, tanto para los valientes como para los que prefieran esperar, el acceso es tan simple como ir a Diseño > Diseñador de Plantillas > Fondo > Imagen de fondo. Pinchando allí, se abrirá una ventana con las carpetas que clasifican los fondos por temas. En la parte superior, dónde antes aparecía "Sin imagen" ahora está el nuevo "Subir imagen".


En Examinar abrimos nuestro explorador, seleccionamos nuestra imagen y finalizamos.

Están soportados los formatos jpg, gif y png, recomendando un tamaño para el caso de una sola imagen sin repetición con la que queramos cubrir todo el fondo, de 1800x1600 pixels. En cuanto al peso, aunque se pueden subir imágenes de hasta 300KB, hay que intentar que sea inferior a 200KB para que la página demore la carga lo mínimo posible.

Todavía nos queda un pequeño paso y es seleccionar la alineación y la repetición del fondo. La primera responde al esquema gráfico del desplegable al efecto. En cuanto a la repetición, las distintas opciones coinciden respectivamente con las propiedades CSS no-repeat, repeat, repeat-x y repeat-y.


Vía: Blogger in Draft.


Utilidades para capturas web

29/07/2010
Singenio BlogAlguna que otra vez, principalmente para inscribirnos en algún directorio o similar, nos solicitan una captura de nuestra web para ilustrar nuestra ficha. No es que sea difícil pulsar la tecla Impr Pant para luego pegar en nuestro editor de imágenes habitual y montar una captura perfecta, pero si nos facilitan la tarea ¿por qué no aprovecharnos? Sobre todo cuando queremos una captura de la página completa, en cuyo caso el anterior método nos obliga a cortar, recortar y pegar repetidas veces, con una cierta dosis de habilidad que quizás no todos tenemos.

Hay varias utilidades online como WebshotsPro o Capture Full Page, que nos pueden servir para esto, pero tras probar varias, me quedo por su rapidez, sencillez y resultados con Superscreen Shot, con la cual obtuve en pocos segundos la captura de la derecha, sin hacer nada más que teclear la URL del blog.

En esta página se puede seleccionar si queremos capturar toda la pantalla o sólo la parte superior, el tamaño de la captura y el formato de la imagen de salida (jpg o png).

Como segunda opción con opciones parecidas, tenemos Thumbalizr para el caso de que algún día falle la anterior, pero lo dejo sólo para el día en que no funcione bien la anterior, ya que Thumbalizr ya está en esas y no logré que me capturara la pantalla completa tras varios intentos.

Por último, además de estas utilidades específicas para capturas, también podemos echar mano de las que están pensadas para comprobar cómo se ve una web en distintos navegadores. Como a fin de cuentas estas otras lo que nos ofrecen son una colección de capturas, bajarse una de ellas no cuesta más que pulsar nuestro botón derecho y descargar.


Empire avenue

26/07/2010
Empire Avenue (Avenida Imperio) es una nueva red social con apariencia de juego. Bueno, más bien es un simulador de bolsa en que las marcas personales son las que cotizan. No. Es un divertimento con tintes sociales, como un Monopoly pero con nicks en lugar de calles. Tampoco... Hmmm... ¡Ahora! Es una página dónde la actividad en la Red es medida como cotizaciones bursátiles y todos pueden comprar y ser comprados... No me gusta eso. Vale, pasamos a la explicación oficial y si no os enterais, luego seguimos.


Empire Avenue es una revolucionaria bolsa virtual combinada con una plataforma de publicidad sobre contenidos, donde lo que cotiza es la infuencia y que permite a individuos y organizaciones convertir su actividad en Internet en beneficios.

Explicándolo de manera un poco más práctica, se trata de un mercado bursátil simulado dónde cualquiera puede cotizar. Los criterios de valoración están relacionados en su mayor parte con tu actividad en redes sociales y el juego en sí, constituye una nueva red social con entidad propia.

Cada uno conecta su ticker (su abreviatura bursátil) con los servicios propios que quiere y de esta manera, tus actualizaciones las ven automáticamente todos los que accedan a tu perfil, los que tengan acciones tuyas y los que te tengan en algunas de las diferentes listas. Por un lado como red social, esto te da mayor visibilidad y en cuanto al juego, a mayor actividad, mayor cotización... ¡sin olvidar que también ocurre lo contrario!

Al registrarte empiezas con 1.500 (EAVE's) para tus gastos y una cotización inicial de 10,00 eaves (ojo con los puntos y las comas, porque todo va en notación americana). Como decía, que suba o baje el valor de tus propias acciones, depende fundamentalmente de tu actividad en blogs (RSS), Twitter, Facebook o Flickr, aunque no sería raro que en el futuro se incorporen otras redes sociales.

Evidentemente, puedes comprar y vender acciones de otros sin más limitación que la pasta que tengas disponible en el banco. Los eaves se ganan/pierden dependiendo del acierto con que hagas tus inversiones. Comprar y vender es la vía más rápida de mover tu dinero virtual, pero también puedes invertir en acciones que tengan un buen dividendo diario. Este dividendo también está relacionado con la actividad del valor en cuestión.

Por otra parte están las recompensas (achievement) en forma de eaves, que el juego te va dando a medida que vas cubriendo objetivos: completar tu perfil, conseguir seguidores, realizar compras, votar, publicar... Al principio recibes pasta por casi todo, pero a medida que vas avanzando, los requisitos para obtener achievements son cada vez mayores. Por ejemplo, la primera recompensa por agregar tus intereses te la dan con 15 palabras clave, pero para la siguiente, ya necesitas 50.


Una breve relación de lo que hace subir tu valor. Por orden de mayor a menor relevancia:
  1. Conseguir "colocar" tus acciones. Que otros compren tus acciones hará que su cotización suba. Si no logras vender tus acciones o el número de inversores en tí decrece, la cotización hará lo propio.
  2. Conectar tus blogs y actualizar. Para que un RSS suba a la categoría de Blog, debe ser aprobado por otros 5 jugadores. Cada post publicado hace subir tu valor.
  3. Añade el gadget de Empire Avenue a tu blog.
  4. Conectar tus cuentas de Flickr, Facebook y Twitter y ser activo en ellas. Aunque menos que una entrada en un blog, cada tweet, cada fotografía subida... cada seguidor cuenta.
  5. Actividad en Empire Avenue. Los Shot Outs!, las actualizaciones de estado, los anuncios (de pago) también suman.
  6. Evita la resta. Tras varios días sin actualizar nada, el algoritmo de mercado hace que tu cotización caiga en la misma medida.
Si teniendo actividad no ves movimiento en tu cotización, no te preocupes. Sólo ser comprado o vendido tiene una repercusión inmediata, todo lo demás actualiza tu valor al día siguiente.

Aunque en el blog oficial indicaban que el 20 de Julio se podría empezar a acceder sin invitación, lo cierto es que al día de hoy, todavía son necesarias para ingresar. Así que si te animas a probarlo, sólo tienes que enviarme un correo o indicar tu dirección en un comentario y te enviaré una para que pruebes el invento... hasta final de existencias ;)

Y un primer consejo particular: escoge bien tu ticker porque cambiarlo posteriormente cuesta 1000 eaves. Esto es real como la vida misma: casi todo cuesta dinero.

Actualización 14 Agosto: Tras unos días de pardillo y de que mi cotización bajara sin parar, mis acciones ya cotizan a algo más del doble de su valor inicial (10 Eaves). Primer mandamiento: ofrecer buenos dividendos. Otro día, si tengo ganas, más tips ;)


Nuevo diseñador del demonio

22/07/2010
No hace mucho que Blogger anunció su nuevo diseñador de plantillas operativo desde Blogger Draft y mucho menos desde que lo habilitó para que estuviera operativo desde Blogger "normal".

Pues bien, en este poco más de un mes desde que dejó de estar en beta, me he dedicado esporádicamente a trastear una plantilla que construí para hacer pruebas y realmente me está resultando muy complicado entender cómo diablos funciona.

HECHOS
La cuestión empieza con que ahora hay muchísimas más variables que con las anteriores plantillas. Esto es normal y necesario para realizar tantos cambios en el estilo y en la estructura (columnas) como ahora es posible, desde el diseñador. Hasta aquí no hay demasiados problemas, porque poco a poco, podemos averiguar para qué sirve cada variable (ahora incluso están en grupos) y con no mucho trabajo, modificar los valores. De esta manera, metiéndonos en el código podemos escaparnos un poco de los valores que nos da el diseñador y poner los nuestros propios. Esto por ejemplo es lo que podemos hacer con los fondos, limitados en un principio, pero que podemos cambiar.

...
<Group description="Backgrounds" selector=".main-inner">
<Variable name="body.background.color" description="Outer Background" type="color" default="#c0a154" value="#a73d3d"/>
<Variable name="footer.background.color" description="Footer Background" type="color" default="transparent" value="#000000"/>
</Group>
...

Pero ahora empieza lo complicado. Nos encontramos en la plantilla con dos apartados distintos de código CSS. Uno es el de siempre, el que se encuentra entre <b:skin><![CDATA[/* y su correspondiente cierre. Pero hete aquí que a continuación, viene una etiqueta Blogger de nuevo cuño (ni esta ni la anterior son etiquetas estándar) que también incluye la palabra SKIN y que efectivamente contiene CSS, pero de aquella manera: <b:template-skin>

Dentro tenemos -otra vez- más etiquetas nuevas con unas variables y el segundo CSS que comentaba. Un verdadero embrollo porque no sé que es lo que manda sobre qué. Ya decía en el título que en esta obra, Belcebú está de por medio.

Parece que la finalidad de esta parte es aplicar los datos referentes a la estructura de columnas, seleccionados desde el diseñador, mediante las mencionadas variables y sus correspondientes selectores.

...
<b:template-skin>
<b:variable default='930px' name='content.width' type='length' value='1000px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='160px'/>
<b:variable default='360px' name='main.column.right.width' type='length' value='300px'/>

<![CDATA[
body {
min-width: $(content.width);
}
...


Y para rematar la faena llega el BODY, con una ingente cantidad de capas, subcapas, subsubcapas, retrosubsubcapas.... que van formando la estructura principal del blog con selectores de nueva denominación ininteligibles en su mayoría: fauxborder-left main-fauxborder-left, fauxborder-right main-fauxborder-right, region-inner main-inner, columns fauxcolumns, fauxcolumn-outer fauxcolumn-center-outer, cap-top... y un sinfín de columns y más columns del demonio.

Aquí es dónde más me pierdo, porque por muchas cosas que modifico en los selectores e identificadores que parecen los adecuados y por muchos !important que utilice, los resultados son los que Dios Blogger quiere.

Y es que aquí aparecen de nuevo códigos misteriosos Blogger: macro:include, macro:param, macro:if, mexpr... y que tienen una pinta de que no podemos manejar que tiran de espaldas.


Finalmente, incluso respetando el código y haciendo los cambios desde el diseñador, os puede pasar como a mí y encontraros con que parte del blog se descuadra dependiendo del navegador que se utilice. Un desbarajuste leve -eso sí- pero molesto por cuanto no supe como enmendallo. Para colmo fue con Chrome = Google = Blogger!!!


OPINION
El nuevo diseñador es casi perfecto para dar estilo a los elementos del blog y maquetar su estructura sin tener ni idea de HTML ni CSS, pero luego es infernal para incorporar cambios en dicha estructura... al menos hasta que alguien descubra cómo funciona todo lo anterior.

ADENDUM
Ni se os ocurra preguntar aquí por problemas relacionados con cambios estructurales de plantillas hechas con el diseñador si no quereis que siga quemándome.


Semi-vacaciones

19/07/2010
on-off


BPT. Configurar perfil Twitter.

18/07/2010
Buenas tardes. Tengo una cuenta de Twitter y desearía poner en ella un enlace para que mis contactos puedan acceder a mi blog. ¿Cómo lo haría?


La forma de configurar nuestro perfil de Twitter es sencilla. Lo primero es acceder a nuestra cuenta (twitter.com/nick) y hacer login. Arriba a la derecha veremos una barra de menú como la siguiente. Ahí hay que pinchar en Configuración.

menu twitter

Aparece una especie de formulario con distintas opciones para completar. La primera es para poner/cambiar una Imagen o avatar personalizado que acompañará a nuestros tweets. En Nombre podrías poner otro idem distinto del usuario de Twitter que tengas. Supón que te llamas Paco Porras, que ese usuario estaba pillado y no has tenido más remedio que registrarte como pacops. Aquí podrías poner tu nombre "real" para que te encuentren más fácilmente.

Configurar Twitter

Siguiendo con el formulario puedes indicar tu Ubicación si es que quieres facilitar este dato. Hay ocasiones en que se buscan twitteros del propio ámbito geográfico, por lo que puede ser útil grabar este campo para que gente de tu misma localidad te encuentre.

En Web es dónde puedes poner la dirección de tu espacio personal o cualquier otro que administres y que te interese indicar como referencia tuya. Aunque no recuerdo si es necesario, por si las flies, yo pondría la URL completa (con http://). Interesante el enlace justo debajo de esto, que te lleva a los gadgets Twitter para insertar este servicio en tu página mediante distintos cacharritos.

Por último, un campo en el que puedes introducir un texto libre, que aparecerá en la cabecera de la barra lateral de tu perfil junto con los anteriores datos que facilitaste.

Desde este mismo sitio y a través de nuevo del menú superior principal, puedes también ir a Diseño para cambiar los fondos y colores de tu timeline o dar un repaso a tus Conexiones, que son las aplicaciones a las que diste permiso para que interactuaran con tu cuenta Twitter. Echale un vistazo de cuando en cuando para revocar el acceso a aquellas que ya no utilices.


Frases aleatorias en cualquier sitio

15/07/2010
La última vez que propuse un script para mostrar frases o citas aleatorias, mis conocimientos de JavaScript eran todavía menores de lo que son ahora (que ya es decir), así que no pensé en usar aquella función en un sitio distinto que en un gadget de la sidebar o similar. Sin embargo el otro día, a Seba77 le interesó conocer cómo montar este mismo código para sustituir el típico "Haga su comentario" que por defecto lleva Blogger justo antes del formulario correspondiente.

Para poder hacer eso tanto en el sitio que nos preguntaban como en cualquier otro, la solución consiste en utilizar el mismo código de entonces, pero formando parte de una función. Después, a diferencia también de entonces, tendremos que hacer una llamada al script dónde nos interese. Verbigracia:

<!-- FUNCION FRASES -->
<script type='text/javascript'>
function frasesaleatorias (){
frases = new Array()
frases[0] = &quot;Comenta, que es gratis.&quot;
frases[1] = &quot;Por cada comentario regalo un abrazo virtual.&quot;
frases[2] = &quot;Comenta que algo queda.&quot;
frases[3] = &quot;No por mucho comentar, amanece más tarde.&quot;
frases[4] = &quot;Tienes dos opciones: Opinar aquí o callar. Tú eliges.&quot;
aleatorio = Math.random() * (frases.length)
aleatorio = Math.floor(aleatorio)
document.write(frases[aleatorio])
}
</script>
<!-- FUNCION FRASES -->


Está función habría que grabarla antes de </head> que es el lugar habitual para este tipo de códigos. Una vez que la tengamos ya sólo tenemos que poner esto otro, allí dónde queramos que aparezca la frase...

<script type='text/javascript'>frasesaleatorias();</script>


Para el ejemplo mencionado del texto antes del formulario de comentarios Blogger, la cosa quedaría así:

<h4 id='comment-post-message'><data:postCommentMsg/><script type='text/javascript'>frasesaleatorias();</script></h4>


Lo tachado es la variable con el texto estándar, que para que no aparezca, hay que borrarla del código.



De la misma manera, una vez grabado el script en la plantilla, la llamada al mismo se puede colocar en cualquier parte.


SimpleCart. Simultanear PayPal y EMail

12/07/2010
Y bueno, ya que estamos, vamos a hacer las cosas un poco mejor para no tener que elegir (si no lo necesitamos) entre un pago por PayPal o una comunicación de pedido por e-mail, incluyendo ambos sistemas a la vez.

La cosa es simple. Se habilita la función de e-mail con su correspondiente PHP (tal y como vimos en el último post), dejamos la opción por defecto de PayPal y por último, añadimos un boton que vaya directamente a la nueva función incorporada. De esta manera el botón Checkout por defecto irá a PayPal y el nuevo botón enviará un correo con los datos del pedido.

De la misma manera que creábamos el primero (y el de vaciar carro), este botón de e-mail será incorporado a la tienda, incorporando un div con una clase que tendremos que configurar. Pero a diferencia del anterior, incluiremos un evento onclick para que vaya directo a la función simpleCart.emailCheckout().

<a class="simpleCart_empty" href="javascript:void();">VACIAR CARRO</a> <a class="simpleCart_checkoutemail" onclick="simpleCart.emailCheckout();" href="javascript:void();">EMAIL</a> <a class="simpleCart_checkout" href="javascript:void();">CHECKOUT</a>


Para que quede mono, monísimo, sólo nos falta incorporar el estilo de boton. De paso, os doy el estilo de los otros dos, el Checkout por defecto y el de Vaciar Carro, ajustados para incorporar los tres a la vez. En verde el nuevo.

.simpleCart_empty{
clear:left;
float:right;
color:#999 !important;
font-size:11px;
text-decoration:none;
margin-right:10px;
position:relative;
top:25px;
padding:5px;
border:1px dashed #999;
background:#fff;
}
.simpleCart_empty:hover {
color:#666 !important;
}

.simpleCart_checkout{
float:right;
background:url(http://img146.imageshack.us/img146/2469/btncheckout.png) 0px 0px;
width:87px;
height:24px;
text-indent:-9999px;
overflow:hidden;
position:relative;
top:27px;
}
.simpleCart_checkout:hover {
background:url(http://img146.imageshack.us/img146/2469/btncheckout.png) -87px 0px;
}
.simpleCart_checkoutemail{
float:right;
background:url(http://img340.imageshack.us/img340/4472/btncheckoutemail.png) 0px 0px;
width:87px;
height:24px;
text-indent:-9999px;
overflow:hidden;
position:relative;
top:27px;
}
.simpleCart_checkoutemail:hover {
background:url(http://img340.imageshack.us/img340/4472/btncheckoutemail.png) -87px 0px;
}


Resumen. Últimas novedades Blogger.

09/07/2010
Para los más despistados y porque parece que en Blogger últimamente se están poniendo las pilas...


ESTADISTICAS EN TIEMPO REAL.

De momento sólo disponible desde Blogger in Draft, accediendo a tu escritorio y pinchando en el nuevo acceso. No hay que suscribirse o marcar algo en algún sitio. Podrás seguir las estadísticas de tu blog, hora a hora (datos desde 1 de Julio de 2010). Inferior a Google Analytics, pero con una información bastante útil.

Más info: Gem@ Blog, El escaparate.



BOTONES PARA COMPARTIR EN REDES SOCIALES.

Un simple click en un gadget que viene "de serie" y automáticamente se añade en cada entrada, una pequeña colección de botones para promociar tus posts.

Más info: Ciudad Blogger, El Escaparate, Blog and Web, Vagabundia. Blogger Buzz.



DISEÑADOR DE PLANTILLAS.


Una aplicación para personalizar nuestros blogs sin tener ni puñetera idea de HTML, CSS ni nada parecido. Multitud de opciones para cambiar la estructura general, colores, fondos, fuentes... Vista previa en tiempo real en la misma pantalla. Ojo con las modificaciones que haya previamente en vuestro blog porque desaparecerán. No olvideis hacer una copia antes de nada.

Más info: Gem@ Blog, BdeBloggers, Vagabundia. Blogger Buzz.



PAGINAS ESTATICAS.

Ya no hay que utilizar truquillos para que ciertas páginas tengan un aspecto distinto a las entradas normales. Si quieres una página para tu perfil, una lista de cualquier tipo, un índice, un aviso legal, etc. ahora tienes hasta 10. Crea páginas con facilidad y luego configura el menú correspondiente.

Más info: Blog and Web, El Escaparate, Ciudad Blogger, Gem@ Blog. Blogger Buzz.



NUEVOS DISEÑOS Y COMPARTIR PARA LA NAVBAR

La aburrida barra de navegación de Blogger, ahora incorpora un enlace para poder enviar la entrada que se está visualizando a Twitter, Facebook, Google Buzz o al lector Google Reader. Para que no te entren las ganas de eliminarla.


Más info: Vida Blogger, El Escaparate. Blogger Buzz.



NUBE DE ETIQUETAS.

Una nube de etiquetas (casi) como Dios manda y como alternativa a la sosa lista de categorías. El nuevo gadget permite también seleccionar qué etiquetas deseamos mostrar y cuáles no. Posibilidad de configuración mediante CSS.

Más info: Blog and Web, El Escaparate. Blogger Buzz.


Quizás algún día hasta nos ofrezcan hosting para todo tipo de ficheros (JS, PHP, SWF...) Quién sabe.


SimpleCart. Opción enviar por e-mail

07/07/2010
Hace un tiempo vimos un sistema para instalar una tienda online, mediante el script SimpleCart. El sistema, aunque sencillo, sigue funcionando estupendamente, pero le faltaba una opción que era la de enviar los datos del pedido por correo, en lugar de acceder directamente a Paypal. Esto es útil, por ejemplo, cuando se trata de envíos contra-reembolso u otras opciones similares.

En un principio debería ser suficiente con modificar un parámetro para que esto funcionara bien. De los que hay al final de la parte de estilo, sería simpleCart.checkoutTo.

<script type="text/javascript">
simpleCart.email = "tupaypal@dominio.com";
simpleCart.checkoutTo = Email;
simpleCart.currency = EUR;
simpleCart.cartHeaders = [ "name", "thumb_image" , "Quantity_input" , "increment", "decrement", "Total" ];
</script>

En teoría bastaría con cambiar PayPal por Email (ojo con las mayúsculas/minúsculas), tal como veis arriba, y el script se tendría que encargar de hacer el pedido por dicha vía, pero por razones que desconozco, la función que debería hacer esto (simpleCart.emailCheckout();) está sin construir. Esto ocurre tanto en el script original como en el adaptado que propuse en su momento.

Visto esto, si queremos que funcione para el correo, tendremos que redactar dicha función además de cambiar el parámetro mencionado. Así, emailCheckout recuperará los datos necesarios y los pasará a un pequeño fichero PHP que realmentes es el que envía los datos por e-mail. Si teneis hosting propio, alojar el PHP no debería ser ningún problema. Sin embargo, para los que sólo tenemos Blogger, habrá que recurrir a algún servicio como Byethost, que Vagabundia ya nos descubrió hace un tiempo.

Y ahora vamos a la parte práctica.

Como se ha dicho, lo primero es cambiar el valor del parámetro y pasarlo de PayPal a Email. A continuación, redactamos el contenido de la función editando el script allá dónde lo tengamos alojado y sustituimos la función vacía que tiene este aspecto...

this.emailCheckout = function() {
return;
};


... por...

this.emailCheckout = function() {
var remite = prompt("Introduzca correo de contacto: ");
itemsString = "";
esubtotal = 0;
etotal = 0;
for( var current in this.items ){
var item = this.items[current];
esubtotal = item.quantity * item.price;
itemsString += item.name + " " + item.quantity + " x " + item.price + "EUR = " + String(esubtotal) + "EUR" + "\n";
etotal+=esubtotal;
};
itemsString +="Total: " + String(etotal) + "EUR" + "\n" + "Remite: " + remite;
var form = document.createElement("form");
form.style.display = "none";
form.method = "POST";
form.action = "http://elsereno100.byethost15.com/php/email.php";
form.acceptCharset = "utf-8";
form.appendChild(this.createHiddenElement("jcitems", itemsString));
form.appendChild(this.createHiddenElement("jcremite", remite));

document.body.appendChild(form);
form.submit();
document.body.removeChild(form);

return;
};

Por Paypal, el propio usuario se identifica ante el sistema, pero con esta opción no. Así que he introducido un prompt que solicita la dirección de correo del comprador, para poder luego incluirla en el mensaje que recibamos. De otra manera nos sería imposible saber quién hizo el pedido.

Nos queda generar y alojar el fichero PHP. La URL que he puesto en la anterior función está operativa para que podais hacer pruebas. Pero cuidado... está programado de manera algo distinta para que envíe el correo a la dirección que se introduzca como de remite y que así podais ver el resultado. Si lo enviara al administrador (yo) como ocurre en el PHP de más abajo (el que teneis que usar cuando lo hagais en real) no lo veríais. Tarda un poco en que lo recibais, pero debe ser cosa del hosting gratuito.

Aquí, en la demo original, podeis ver ahora un nuevo enlace abajo a la izquierda botón con la palabra EMAIL, que es precisamente para este nuevo sistema.

Una vez que comprobeis que funciona, teneis que crear y alojar vuestro propio fichero con vuestra propia dirección, para que podais recibir los avisos. Luego sustituis en el código de antes la URL de prueba por la vuestra. El código es este:

<?php
$to = 'correo-vendedor@dominio.com';
$remite = $_POST['jcremite'];
$subject = 'Aviso de pedido';
$jcitems = $_POST['jcitems'];
$headers = 'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $jcitems, $headers);
echo 'Su pedido ha sido enviado.<br/> Nos pondremos en contacto con Vd. mediante el correo facilitado: ';
echo $remite;
?>


Una mejora en este último fichero sería sustituir los dos últimos echo por un reenvío a una página construida por nosotros con un contenido más amigable:

Header('Location: http://pagina_recepcion.htm');

¿Se podría hacer sin PHP? Sí, utilizando JavaScript. Pero entonces el envío no sería tan directo como pulsar un botón. El script abriría el programa de correo del usuario con tu dirección (por otra parte, más visible para spammers), el asunto y el contenido, pero luego habría que enviar el correo. Un proceso más largo y menos elegante.

Si vais a utilizar este sistema, no olvideis cambiar la imagen de fondo del selector .simpleCart_checkout que forma el botón PAYPAL, por otro más adecuado ;)

Actualización. El script completo incluyendo ya la modificación: SimpleCartEmail.txt
No olvidad haced las personalizaciones correspondientes: moneda, forma de pago (PayPal/Email), dirección PayPal y dirección fichero email.php.


Botones Facebook. Compartir - Me gusta

05/07/2010
Si bien en Blogger tenemos ya una utilidad para incorporar automáticamente unos botones para varias redes sociales, entre ellas Facebook, lo que pretende esta entrada es explicar cómo instalar sólo los de Facebook y de paso, recordar que hay dos tipos de botones disponibles. ¿Dos? Sí dos.


Uno de ellos hace exactamente lo mismo que el que incorpora Blogger, que es enviar un enlace al perfil de Facebook del usuario que lo pulse y que tendrá el aspecto de la imagen de arriba. El script publicará la URL de la página en la que se esté en el momento de pulsar el botón: inicio, navegación o post individual. A los amigos autorizados les saldrá también en su muro esta anotación. Este es el sistema denominado COMPARTIR.

El código para incorporarlo a tu blog en cada entrada, es el que viene a continuación y también lo podeis encontrar en el propio FB (enlace anterior). Allí también tendreis la posibilidad de cambiar un poco su aspecto, aunque el que aquí se presenta parece bastante majo, ya que incluye un contador.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Compartir</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</b:if>

Actualización: He incluido un condicional, porque si no el gadget se ve en todo tipo de páginas, enviando URL's que no correponden a posts individuales (item).

El lugar donde querais colocar el gadget depende de vosotros, pero lo habitual será copiar este código en alguna de las tres lineas post-footer-line que normalmente hay en las plantillas Blogger o bien dentro de post-header-line.

La segunda opción es el botón ME GUSTA. Siendo muy similar al anterior, en este caso tanto el enlace como el botón, son más simples. El enlace se publicará también en el perfil del pulsante y de sus amigos, pero a diferencia del anterior, será algo menos visible, tal y como podeis ver debajo.


El sitio dónde colocarlo, al igual que antes, es dónde prefirais, siempre que estemos dentro del cuerpo del post y el código, el siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=true&width=100&action=like&font=arial&colorscheme=light"' scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:16px;"></iframe>
</b:if>


Más botones para Facebook en Social Plugins: recomendaciones, login, comentarios, actividad del feed...


Saber algo más sobre Oloman

02/07/2010
Pocas veces hablo de cosas personales y los que seguís esto con cierta frecuencia, creo que ya lo sabeis. De hecho, sólo lo hago cuando no tengo más remedio y esta ha sido una de esas ocasiones.

Carlos Soler de Blogtecnia me pidió una entrevista y aunque es una cosa que no me luce demasiado, uno no puede ser un anacoreta virtual por mucho que lo pretenda y máxime teniendo un espacio público. Así que por una vez (realmente ya son más de una) y sin que sirva de precedente, en la imagen de la derecha teneis un enlace dónde me podeis conocer un poquito más, a través lo que Carlos ha tenido a bien publicar en su blog.

Gracias Blogtecnia. Gracias Carlos.


Botones sociales en Blogger.

01/07/2010
Actualmente es fácil incorporar para Blogger unos sencillos pero eficaces botones, para poder enviar el post visitado por correo, publicarlo directamente en otro blog o compartir mediante Twitter, Facebook, Twitter o Buzz.

Para instalarlos, simplemente hay que ir a Diseño > Elementos de Página > Entradas del Blog > Editar y en la ventana emergente que sale, enseguida vereis la casilla de verificación que permite activarlos.

El asunto ya ha sido tratado por El Escaparate y posteriormente ampliado por Vagabundia, este último en cuanto a distintas posiblidades para su modificación. Así que para más detalles sólo teneis que acudir a cualquiera de los dos.

Suscribirse a: Entradas (Atom)
Recibe por correo las últimas publicaciones.
Teclea tu dirección.


No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.

El botón que
no hace nada El botón que no hace nada

Ir Arriba