Personalizar el FanBox de Facebook

Hace unos d?as CebicheTV me dec?a que hab?a visto en Daddy Design un Fanbox personalizado que quer?a aplicar pero que no entend?a muy bien c?mo hacerlo.

La forma como lo presentan es un estilo minimalista que se adapta muy bien a plantillas de dise?os m?s simplistas, aunque a partir del c?digo CSS se puede modificar para hacer una readaptaci?n del mismo.

Como puedes ver se ha eliminado la cabecera del Fanbox, se han quitado los bordes, el bot?n 'Me gusta' se ha puesto debajo, y el n?mero de fans est? en otro color.

Para conseguir personalizar el FanBox de esta forma necesitaremos saber la ID de nuestra p?gina de Facebook.

Para saberla entra a tu p?gina de Facebook y haz click en el bot?n Editar la p?gina que se encuentra en el lado superior derecho.

En la barra de direcciones de tu navegador ver?s al final una serie de n?meros, esa es la ID.

https://www.facebook.com/pages/edit/?id=XXXXXXXXXXXXXXX

Ahora descarga este archivo, descompr?melo y sube el archivo a un hosting.
Luego entra en Dise?o | Elementos de la p?gina | A?adir gadget | HTML/Javascript y ah? pega este c?digo:

<script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script>
<fb:fan profile_id="XXXXXXXXXXXXXXX" stream="0" connections="8" logobar="0" width="240" css="URL del archivo CSS"></fb:fan>

Cambia las equis que est?n en rojo por la ID de tu p?gina de Facebook que conseguiste anteriormente. Y agrega la URL de tu archivo CSS que subiste al hosting. Con eso ser? suficiente para tener el FanBox con este estilo minimalista.
?Se puede personalizar m?s? Claro, si abres el archivo facebook.css te encontrar?s con este c?digo:

.fan_box a:hover{
text-decoration: none;
}
.fan_box .full_widget{
height: 200px; /* Altura del FanBox */
border: 0 !important; /* Eliminamos el borde */
background: #fff !important; /* Color de fondo del FanBox */
position: relative;
}
.fan_box .connect_top{
background: none !important;
padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
display: none; /* Con eso eliminamos la cabecera */
}
.fan_box .connect_action{
padding: 0 !important;
}
.fan_box .connections{
padding: 0 !important;
border: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
}
span.total{
color: #FF6600; /* Color de la fuente para el n?mero de fans */
font-weight: bold;
}
.fan_box .connections .connections_grid {
padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-weight: normal;
color: #666 !important; /* Color del nombre de los fans */
padding-top: 1px !important;
}
.fan_box .connect_widget{
position: absolute;
bottom: 0; /* Con eso colocamos abajo el bot?n 'Me gusta' */
right: 5px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}

En esas anotaciones color verde se indica cu?les son las ?reas que podemos modificar, como el color de fondo, el color del nombre de los fans, el color del n?mero de fans, etc.

Se recomienda no cambiar el tipo de letra para evitar desajustes con los espacios. Y si cambias la altura del gadget deber?s hacerlo tanto en el c?digo que va en el HTML/Javascript como en el archivo CSS, tomando en cuenta que la altura en negrita deber? tener aproximadamente 40px m?s que la altura establecida en el CSS.

Seguro podr?n hacerse modificaciones interesantes, pero as? como est? a m? me parece bastante lindo el dise?o :)

Mostrar una imagen diferente en los links rotos de las im?genes

Algunos tienen la mala costumbre de hacer hot-linking en su blog, es decir, andan navegando por la red, encuentran una imagen, consiguen su URL y la usan para mostrar dicha imagen en su blog. Es es el hot-linking, y lo ?nico que hace es que perjudiquemos el ancho de banda del sitio al que le hemos tomado la foto. Pero adem?s de eso corres el riesgo de que el due?o del sitio Web elimine la imagen y te quedes sin ella.

Cuando eso sucede obviamente la imagen ya no se mostrar? en el blog y en su lugar veremos el t?pico icono que representa que una el v?nculo de una imagen est? roto, o sea que el link de esa imagen no funciona.

Pero esa no es la unica raz?n por la que pueda aparecernos ese icono, a veces aun cuando subimos las im?genes a nuestro propio hosting el servidor puede estar ca?do, la conexi?n puede andar lenta, sin querer eliminamos la foto, o simplemente hemos copiado mal la URL de la imagen. En cualquiera de esos casos puede aparecer el icono de la que hablo que indica que la imagen no existe o no carg?.

Lo que veremos hoy es c?mo mostrar una imagen diferente al habitual icono predeterminado que trae el navegador, de manera que podamos cambiar la imagen que se muestra cuando la URL de la imagen est? rota.

As? que cambiaremos esto:

Por una imagen personalizada, como por ejemplo, esta:

Para conseguirlo usaremos un script muy corto que lo que hace es detectar el tama?o ancho de la imagen, si lo encuentra en cero entonces mostrar? la imagen que hemos elegido.
S?lo debes entrar en Dise?o | Edici?n de HTML y antes de </head> pegar lo siguiente:

<script type='text/javascript'>
//<![CDATA[
// Script para sustituir im?genes rotas
function ImagenOk(img) {
if (!img.complete) return false;
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) return false;
return true;
}
function RevisarImagenesRotas() {
var replacementImg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1TH4Iflf-U0TfO8WU117nzJV9rTbT8KS00IJ5JU9WgIdpy8OAadMdjywbhtlFz2UMAl_JVsv2Z9blreVO0H6TBX0Duo7QTB5aKU4XxSOEaT52S9CgGsiE0enZHAz4bsoRfQmTI5GaLdo/";
for (var i = 0; i < document.images.length; i++) {
if (!ImagenOk(document.images[i])) {
document.images[i].src = replacementImg;
}}}
window.onload=RevisarImagenesRotas;
// ]]>
</script>

Lo que est? en color rojo es la URL de la imagen de ejemplo que he puesto, pero puedes cambiarla por alguna que t? dise?es o el icono que t? elijas.

Cabe aclarar, que este script no sustituir? las im?genes de los hostings que a?aden su propia imagen para indicar que la imagen ha sido eliminada como es el caso de TinyPic y Photobucket.
Recuerda que, para evitar en lo mayor posible que las im?genes no se vean, no uses la imagen de alguien m?s, mejor sube tus im?genes a Picasa y as? te evitar?s muchos dolores de cabeza.

El script est? probado en Firefox 5, Google Chrome 12, Opera 11, Safari 5, Internet Explorer 7, 8 y 9. En todos funciona, si no ves el icono personalizado de inmediato entonces tienes que esperar a que cargue el blog por completo.

Subir im?genes y obtener la URL de la imagen

Como todos los d?as se van sumando nuevos usuarios al mundo de los blogs, es necesario tocar este tipo de temas b?sicos por lo recurrente de la pregunta, ?c?mo obtener la URL de una imagen?

En la red hay muchos hostings tanto gratuitos como de pago donde podemos alojar im?genes, pero dado que nosotros usamos Blogger entonces no hay nada mejor que usar el mismo servicio de alojamiento que Google nos brinda y que es Picasa.

La manera m?s r?pida de subir una imagen es haci�ndolo desde el mismo editor de entradas de Blogger. S?lo entra en Creaci?n de entradas | Nueva entrada. Y preferentemente desde la pesta?a HTML da click en el icono de la imagen.

Se abrir? una venatana emergente, ah? selecciona la imagen y dale click en Subir imagen.
Cuando se haya subido ver?s que en el editor de entradas aparecer? el c?digo de la imagen.

En ese c?digo se encuentra la URL de la imagen. Ver?s dos URLs (direcciones Web):

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXkI0meVr8pDc0f6yiwoDbfaaWlGZCGLmSQoJER9plGJSbNzZJLsg4sErp-xwfcjuoreYfWtacy11jbQx5sMynla2Yd0Hu4Kf8j8WgvGxs04R0iuhJlre4OT2ZUfK1RqcwC5V_kdASaTu/s1600/imagen.jpeg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="320" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXkI0meVr8pDc0f6yiwoDbfaaWlGZCGLmSQoJER9plGJSbNzZJLsg4sErp-xwfcjuoreYfWtacy11jbQx5sMynla2Yd0Hu4Kf8j8WgvGxs04R0iuhJlre4OT2ZUfK1RqcwC5V_kdASaTu/s400/imagen.jpeg" /></a></div>

La primera es la URL de la imagen que necesitas donde la vayas a ocupar. No es necesario que publiques esa entrada donde subiste la imagen, bien puedes no publicarla, dejarla como borrador o eliminarla, la foto seguir? en Picasaweb (a menos que si cuando eliminaste el borrador tambi�n hayas seleccionado eliminar la imagen).

Tambi�n puedes subir la imagen directo desde Picasa. S?lo ingresa a Picasaweb, selecciona el ?lbum donde quieres alojar la imagen, y da click en A?adir fotos

Selecciona la imagen desde tu equipo y s?bela.

Ya que haya subido da click en Aceptar.

Ah? ver?s la imagen en miniatura, junto a las dem?s fotos, si es que hay m?s.

Si quieres conseguir la URL de la imagen desde Picasa entonces dale click a la imagen para que se abra en su tama?o original.
Con el bot?n derecho del mouse da click sobre la foto, y selecciona la opci?n seg?n el navegador que uses...

Si usas Google Chrome selecciona Copiar URL de imagen:

Si usas Mozilla Firefox selecciona Copiar la ruta de la imagen:

Si usas Opera selecciona Copiar direcci?n de la imagen:

Si usas Safari selecciona Copiar direcci?n de la imagen:

Si usas Internet Explorer (espero que no), primero selecciona Propiedades, se abrir? una ventana, ah? ver?s la URL de la imagen que puedes copiar seleccion?ndola:

Habiendo seleccionado cualquiera de esas opciones ya tendr?s en el portapapeles la URL de la imagen. Sencillo ?no?

Recuerda que todas las im?genes que subes desde Blogger se almacenan en tu cuenta de Picasa, as? que si quieres encontrar una imagen que anteriormente subiste en tu blog, entra en tu cuenta de Picasa, selecciona el ?lbum que contiene el nombre de tu blog y ah? busca la imagen que necesitas. El procedimiento para conseguir la URL de la imagen es el mismo que se ha explicado m?s arriba.

Enviar sitemap a Google

Un sitemap es lo que literalmente significa en espa?ol, un mapa del sitio. En �l est? contenida la informaci?n de todas las p?ginas del blog. Por esa raz?n es conveniente enviar el sitemap a Google para que le facilitamos a los robots toda la informaci?n del blog y conozcan todas las p?ginas que hay en �l, as? a los robots les ser? m?s f?cil indexar nuestro sitio; y un sitio bien indexado tiene mayores posibilidades de posicionamiento en la Web.

Para a?adir un sitemap en Google primero es necesario que accedas a las Herramientas para Webmasters para incluir ah? tu sitio web.
As? que primero entra ah? y da click en Acceder a las Herramientas para webmasters de Google.
Ver?s un bot?n que dice A?adir un sitio, da click en �l y escribe la direcci?n de tu blog.

Ahora deber?s demostrar la propiedad del sitio, para ello selecciona la pesta?a M�todos alternativos y click en A?adir una metaetiqueta a la p?gina principal de su sitio.

Copia la metaetiqueta y p�gala despu�s de <head>, ya que lo hayas hecho haz click en Verificar. En cuanto la verificaci?n sea satisfactoria aparecer? el panel de control del sitio que has a?adido.
Hasta ah? ya hemos dado de alta nuestro blog en las Herramientas para Webmasters.

Ahora busca el enlace Enviar un Sitemap y da click en �l.

Luego click en el bot?n Enviar un Sitemap. Ah? aparecer? la URL de tu blog y al lado un recuadro, en ese recuadro pega lo siguiente:

feeds/posts/default?redirect=false&start-index=1&max-results=500

Si todo ha salido bien entonces aparecer? un icono de una palomita verde al lado de la URL del sitemap que indicaste.

Si tuvieras m?s de 500 posts deber?s a?adir otro sitemap pues cada uno s?lo tiene la capacidad de mostrar 500 entradas. El procedimiento es el mismo, click en el bot?n Enviar un Sitemap, pero ahora pega esto:

feeds/posts/default?redirect=false&start-index=501&max-results=500

Y si tuvieras m?s de 1000 entradas a?ade tambi�n este:

feeds/posts/default?redirect=false&start-index=1001&max-results=500

Si hubiera alg?n problema al enviarlo s?lo marca la casilla que est? junto a la URL del sitemap y luego da click en el bot?n Volver a enviar.
Como ves, es un proceso que te quitar? s?lo un par de minutos pero una vez hecho tendr?s la certeza que Google podr? indexar tu blog de manera m?s f?cil.

Usar el mismo avatar en todos los comentarios propios

AVISO

Este truco no funciona en los comentarios anidados de Blogger.

?Les ha pasado alguna vez que por andar de curiosos eliminaron sin querer la foto del perfil y por consiguiente el avatar en los comentarios dej? de verse? ?O quiz? alguna vez usaron un avatar que ya no les gusta pero no quieren eliminar el comentario ni dejar ese comentario sin avatar?

Pues no s� ustedes pero yo siempre he sido muy curioso, una vez entr� a mi cuenta de Picasa, vi una carpeta que dec?a 'Im?genes de Blogger', y como vi muchos avatares repetidos los elimin�, y claro, mis comentarios antiguos dejaron de tener avatar. Y peor aun, mi primer avatar era una foto m?a sin camisa (no se preocupen chicas, prometo no volver a hacerlo), luego me arrepent? de subir esa foto pero no quer?a ni eliminar esos comentarios ni eliminar el avatar para evitar dejar ese icono que siempre nos recuerda que una imagen est? rota

?Qu� podemos hacer en estos casos? Si por haber eliminado tu foto tienes comentarios sin avatar, o si simplemente quisieras que todos tus comentarios (propios por supuesto) tengan la misma imagen aun cuando sean comentarios antiguos, lo que podemos hacer es usar un c?digo para condicionar nuestro avatar de manera que la imagen que elijamos aparezca por defecto en todos los comentarios propios, tanto aquellos antiguos como los actuales y futuros. As? que si a los largo de la vida de tu blog has usado varios avatares en los comentarios podr?s cambiar todos ellos por la imagen que quieras.

Para conseguir tener el mismo avatar en todos tus comentarios entra en Dise?o | Edici?n de HTML, marca la casilla Expandir plantillas de artilugios y busca este c?digo:

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Una vez encontrado reempl?zalo por este:

<b:if cond='data:blog.enabledCommentProfileImages'>
<b:if cond='data:comment.authorUrl == &quot;URL de tu perfil de Blogger&quot;'>
<!-- Inicia mi avatar -->
<div class='avatar-image-container'>
<img src='URL de la imagen' style='height:100%; width:100%;'/>
</div>
<!-- Termina mi avatar -->
<b:else/>
<data:comment.authorAvatarImage/>
</b:if></b:if>

Cambia donde se se?ala, la URL de la imagen del avatar que quieres mostrar, as? como la URL de tu perfil de Blogger, es algo como esto:
http://www.blogger.com/profile/XXXXXXXXXXXXXXXX
Como estamos usando la URL del perfil eso evitar? que el avatar se muestre en otro comentarista que tenga el mismo nick que el nuestro (gracias a Felipe por ese tip)

Con eso conseguir?s que absolutamente todos tus comentarios tengan el mismo avatar, sin importar si ten?as comentarios sin foto.
Si el blog tuviera dos autores y deseas que el otro autor tenga su propio avatar personalizado en todos sus comentarios entonces en ese caso en lugar de ese c?digo, el que habr? de ponerse es este:

<b:if cond='data:blog.enabledCommentProfileImages'>
<b:if cond='data:comment.authorUrl == &quot;URL de tu perfil de Blogger&quot;'>
<!-- Inicia mi avatar -->
<div class='avatar-image-container'>
<img src='URL de la imagen' style='height:100%; width:100%;'/>
</div>
<!-- Termina mi avatar -->
<b:else/>

<b:if cond='data:comment.authorUrl == &quot;URL del perfil de Blogger del otro autor&quot;'>
<!-- Inicia avatar otro autor -->
<div class='avatar-image-container'>
<img src='URL de la imagen del otro autor' style='height:100%; width:100%;'/>
</div>
<!-- Termina avatar otro autor -->
<b:else/>

<data:comment.authorAvatarImage/>
</b:if></b:if></b:if>

Cambia donde se indica las URLs de los perfiles de los dos autores. Y de igual manera pon la URL de las im?genes donde se indica.

Debo aclarar que obviamente esto s?lo afecta a tus propios comentarios y ?nicamente en los comentarios que hayas hecho en tu propio blog.

Relojes de cuenta regresiva personalizados

Countdown Clock Codes es un servicio que nos permite crear nuestros propios relojes de cuenta regresiva personalizados, para ello nos ofrecen distintas im?genes de fondo para usar, as? como la posibilidad de agregar un mensaje personal en ellos.

Dispone de varias categor?as como cumplea?os, navidad, caricaturas, a?o nuevo, etc.

Su uso es sumamente sencillo, s?lo hay que elegir la fecha esperada, la imagen de fondo, el mensaje personal, los colores y listo. Una vez configurado copiamos el c?digo y lo pegamos en un elemento HTML/Javascript.

MySpace-Countdowns

Algunas opciones, excepto la palabra UNTIL (hasta, en espa?ol) podemos modificar una vez que tenemos el c?digo.

<center><embed src="http://www.countdownclockcodes.com/cd/ccc-cartoons/show.swf?clickURL=http://www.countdownclockcodes.com/&clickLABEL=MySpace-Countdowns&flashLABEL=CountdownClockCodes&skin=http://www.countdownclockcodes.com/cd/ccc-cartoons/skins/2.jpg&text=%20Aqui%20va%20tu%20mensaje&untilColor=3501985&textColor=16777215&datesColor=0&year=2050&month=0&day=1&hour=0&minute=0&second=0&x=0&y=80" quality="high" bgcolor="#ffffff" width="300" height="200" name="countdown" align="middle" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br><small><a href="http://www.countdownclockcodes.com/">MySpace-Countdowns</a></small></center>

La direcci?n que est? despu�s de URL es el enlace que se encuentra dentro del contador.

Hay dos etiquetas LABEL, la segunda es el texto que aparece en ese enlace dentro del contador.

La URL que est? despu�s de skin es la imagen de fondo, as? que podemos cambiarla por una imagen propia si es que alguna de las del sitio no nos gustan.

Lo que est? despu�s de text es el mensaje personalizado, ese puede quitarse si es que deciden no mostrar ning?n texto.

Y como un extra lo que est? en gris es el enlace de hasta abajo que aparece fuera del contador.

No es nada extraordinario, pero es una buena opci?n si es que est?n cansados de usar un reloj de cuenta regresiva m?s simple, sobre todo si podemos personalizarlo un poco m?s.

Enlace | Countdown Clock Codes

La Edici?n de HTML en la nueva interfaz de Blogger

Desde que en abril se anunci? la nueva interfaz de Blogger mucho se ha esperado de ella pero pocos han sido quienes han tenido la oportunidad de usarla. Estos "afortunados" -como dice Blogger-, seguro ya saben que esta nueva interfaz no tiene la opci?n de editar la plantilla desde la Edici?n de HTML. ?nicamente podemos cambiar de plantilla, o bien, cambiar de lugar o eliminar los gadgets desde lo que usualmente conocemos como Elementos de la P?gina y que ahora s?lo se llama Dise?o.

Como todo lo que est? en Blogger in Draft es de pruebas, ser?a muy apresurado decir que es definitivo que la Edici?n de HTML no la volveremos a ver. As? que bien puede ser que definitivamente no la incluyan o que m?s adelante lo hagan. Lo cierto es que en estos casos lo mejor es no especular y dejar que de la boca mano de Blogger salga la versi?n oficial con sus merecidos argumentos, aunque ya sabemos que siempre lo hace m?s tardado de lo que deber?a.

Mientras tanto, los "afortunados" que ya disponen de esta nueva interfaz a?n pueden editar la plantilla desde la Edici?n de HTML, ya sea usando la versi?n normal de Blogger o ingresando a una URL antigua.

Como esta interfaz est? disponible s?lo desde Blogger in Draft, entonces la primera opci?n es dejar de usar esta interfaz como escritorio predeterminado. As? que entramos en Blogger, desmarcamos la casilla Establacer Blogger en borrados como predeterminado, cerramos la sesi?n e ingresamos al Blogger "normal".

Habiendo hecho esto podr?s utilizar nuevamente la versi?n oficial actual que es la que la mayor?a conocemos y que s? dispone de la Edici?n de HTML.

Otra opci?n es que, si no quieres estar entrando y saliendo de esa interfaz cada vez que vayas a editar la plantilla entonces a trav�s de un link puedas acceder a la antigua interfaz de Blogger in Draft y as? puedas utilizar la Edici?n de HTML.

Para ello necesitas ingresar a tu cuenta de Blogger, y en la barra izquierda localiza el nombre de tu blog y luego haz click en Escritorio.

Al hacer esto ver?s en la barra de direcciones de tu navegador una direcci?n que contiene la ID de tu blog, es una serie de n?meros f?cil de reconocer.

Copia esa ID y luego usa este enlace:

http://draft.blogger.com/html?blogID=XXXXXXXXXXXXXXXXX

Cambia lo que est? en rojo por la ID de tu blog y podr?s acceder a la Edici?n de HTML de la antigua interfaz de Blogger in Draft.

Como tambi�n ser?a muy tedioso tener que estar buscando la ID de tu blog a cada rato puedes agregar esa URL a tus marcadores (favoritos) y as? tener un acceso mucho m?s f?cil.

Lo dicho, no hay nada definitivo de manera oficial pero mientras tanto estas son unas opciones para poder editar la plantilla del blog. Y claro, que si ya tienes esta interfaz aprovecha la opci?n de Enviar comentarios para que puedas quejarte libremente :)