Archivo etiquetas: tip

Tip: ¿Por qué Facebook no detecta el thumbnail de mis posts?

16 may 2012

Uno de los grandes motivos por los que las publicaciones de Facebook consiguen un nivel elevado de likes y comentarios, es debido al atractivo de su formato y a que llaman la atención de los usuarios. ¿Cómo? Mostrando una imagen acompañando al título y a las primeras líneas del post. Facebook recoge esta imagen de forma automatizada pero seguro que te ha pasado mil veces que vas a compartir algo y no sale la miniatura del post, sale otra imagen que no tiene nada que ver o peor incluso: no sale ninguna foto. No os preocupéis, esto tiene fácil solución.

Facebook lo que hace es recoger las primeras etiquetas del tipo IMG y te las muestra para que elijas la correcta. Puede ocurrir que porque haya funciones javascript que carguen el contenido o impidan su lectura, no pueda mostrarlas. Debido a esto lo mejor es especificar la imagen que quieres que salga en los metadatos de Facebook. Supongo que conocéis los metadatos HTML, etiquetas que deben ir en la cabecera de las páginas HTML, necesarios de cara al SEO y que indican el título, la descripción, tipo de contenido… Pues existen unos equivalente para Facebook: Open Graph Protocol. Al igual que los metadatos HTML deben ir en la cabecera e indican información para que Facebook pueda obtener el título, la descripción o la imagen de los posts, por ejemplo en los compartir.

WordPress

Si usas WordPress la solución es muy sencilla: un plugin. Facebook Like Thumbnail es un plugin que te genera dinámicamente estos metadatos y los prepara para que Facebook no tenga ningún problema. Incluso en la configuración puedes definir un thumbnail por defecto cuando un post no tiene ninguna imagen.

HTML

Si tienes que escribirlo “a pelo” en HTML, puedes ver todos los metadatos de Facebook en OGP pero el único que debes cargar para la imagen es el siguiente:

<meta property="og:image" content="http://example.com/image.jpg"/>

Recuerda que debes ponerlo dentro de las etiquetas <head></head>. Por supuesto, si haces esto siempre te mostrará la misma imagen para todos los posts. Si quieres algo dinámico, dependiendo de cómo esté programada tu web o el CMS de tu blog, puedes usar funciones para que carguen diferentes imágenes. Si tenéis algún problema específico, ponlo en los comentarios e intentaré resolverlo.

Posibles problemas

En muchas ocasiones me he vuelto loco para intentar que funcionaran los thumbnails, estando todo bien por mi parte, y es que Facebook tiene muchos errores, problemas de caché, formatos que no le gustan… Por eso os dejo una lista de posibles problemas y herramientas:

  • A Facebook no le gustan los PNGs, usa siempre JGP o GIF.
  • A Facebook no le gustan los espacios en las URLs ni tampoco cuando hay variables después de la imagen.
  • Si te estás volviendo loco porque no sale el thumbnail, usa Lint, la herramienta de debug de Facebook. Introduce la URL de un post y verás la información que Facebook detecta, avisos y errores.
  • Otra curiosidad es que en algunos casos funciona cuando compartes una URL sin http://www. y la / final, por ejemplo: pisitoenmadrid.com/blog/2012/05/los-mejores-dibujos-de-draw-something.

Facebook y sus misterios :) Si tenéis problemas con algo, ¡coméntalo!

, , , , , , , , , ,

OS X Lion: SMB y DLNA

28 ago 2011

Después de tres semanas de vacaciones y una desconexión del blog un poco mayor, vuelvo a mis andadas con muchísimos artículos de opinión, tutoriales y curiosidades. Empiezo con algo que me pasó a mi vuelta de vacaciones. Aproveché el parón para actualizar mi Macbook al OS X Lion. La actualización se llevó a cabo correctamente y me encantaron algunas de las nuevas funcionalidades y shortcuts, aunque por otro lado algunas aplicaciones comenzaron a ir más lentas. Independientemente a esto, tengo en casa un HD Gigaset configurado para leer archivos de los ordenadores que hay en red (películas, fotos, música…) y éste dejó de funcionar. ¿El problema? Que la comunicación con los archivos se llevaba a cabo a través de Samba (SMB)

osx-lion

Samba es una implementación libre para UNIX del protocolo que utiliza Microsoft para compartir de archivos. Después de varios intentos comencé a leer foros y especificaciones del nuevo OS de Apple. Encontré con que Lion había abandonado la rama de SMB (Samba) y no la había incluído en esta nueva actualización. Me quedé helado. No veo la televisión, para lo único que la uso es ver películas y series a través del Gigaset. Seguí investigando y descubrí que había una opción de instalar Samba 3 en el OS X Lion a mano. Dejé atrás mis años de UNIX, esa época en la que me podía tirar horas para conseguir que algo funcionara perfectamente pero teniendo la posibilidad de personalizar y hacerlo todo manual. Ahora quiero invertir mi tiempo libre en hobbies y amigos, así que deseché esta opción.

Continué investigando y pregunté por Twitter. Dos usuarios, Lolete y Webaboca, me comentaron que lo mejor era instalar un servidor DLNA. Este estándar (Digital Living Network Alliance) lo llevaron a cabo una asociación de fabricantes de electrónica e informática y permite a diversos dispositivos de una misma red, interconectarse y compartir contenidos. Se trata de soluciones de fácil configuración y que trabajan sobre redes WiFi y Ethernet.

Por defecto, los Mac no están preparados para usar DLNA pero hay múltiples aplicaciones que puedes instalar y que “publican” los contenidos que quieras a través de este protocolo en Red. En la siguiente tabla podéis encontrar una comparativa de dichos programas. Algunos son de pago y otros completamente gratuitos.

tabla-dlna

Después de mucho leer y guiándome por las recomendaciones de Twitter instalé EyeConnect. Se trata de un software de pago (aunque tiene una demo de 30 días) basado en el estándar Universal Plug and Play (UPnP) para audio y vídeo. El HD Gigaset lo soporta y su fácil instalación y configuración me llevó a decantarme por él. ¡Es impresionante! Simplemente instalas, inicias (lo encontrarás dentro del panel de Preferencias del Sistema) y sólo tienes que añadir las carpetas que quieras publicar. Incluso puedes compartir iTunes o iPhoto.

Para todos los que tengáis el mismo problema, esta es sin duda la mejor solución que he encontrado.

, , , , , , , , , , ,

Tip: cabeceras y mascotas aleatorias con PHP

9 dic 2009

En el rediseño de pisito he incluido cabeceras dinámicas, es decir, cada vez que entres saldrá de forma aletoria una imagen con una frase distinta en la parte superior del blog. También he hecho lo mismo con la mascota de pisito, el caracol. Poco a poco iré añadiendo nuevos así que si tienes frases o ideas para el Sr. Snails, puedes comentarlas en este post. El caso es que he recibido algunos emails y tweets preguntando cómo hacerlo. El proceso es muy sencillo.

mascota-pisitoenmadrid-snail

Los pasos a seguir con PHP son:

  • Nombra las imágenes que tengas con el mismo nombre pero añadiendo un número al final, de forma consecutiva, y súbelas al mismo directorio en tu servidor.
  • Genera un número aleatorio entre 1 y el número de imágenes distintas que tengas, y guárdalo en una variable. Esto en PHP se lleva a cabo con la función rand(1,número de imágenes).
  • Mediante HTML muestra la imagen, pero a la hora de poner el número tendrás que usar la variable de PHP con el número aleatorio.

Aquí tienes un ejemplo del código completo. Como es WordPress he usado funciones para mostrar la descripción (bloginfo(‘description’)), la url de la imagen (bloginfo(‘template_directory’)) y el nombre del blog (bloginfo(‘name’)) de forma automática pero sino lo único que tienes que hacer es cambiar esas partes de forma manual. De esta forma mostrarás cabeceras, mascotas y cualquier imagen de forma aleatoria. ¿Fácil, no?

, , , , , ,

Tip: Haz que tu Firefox vaya más rápido

27 ago 2009

Justo ayer estaba hablando con Bimbacha de lo lento que iba el Firefox 3. Es sabido que el principal problema provenía de la vistosa Awesome Bar que ralentiza todo el navegador, especialmente cuando tiene un historial muy grande. Normalmente lo vacíaba poco a poco, limitándolo a 30 días o eliminando las búsquedas de Google. Al principio funcionó pero llegó un punto que ya no servía.

Gracias a Lifehacker, aquí tienen un pequeño truco que mediante un comando mejorará el rendimiento del Firefox:

  • Accede a Herramientas -> Consola de errores.
  • Copia la siguiente línea de códig, pégala en la caja de texto y pulsa Evaluar

Lo que hace este comando es fragmentar la base de datos interna. Se quedará unos momentos procesando y listo, notarás el Firefox mucho más ligero.

Carlos Leopoldo

, , , , ,

Tutorial: Crea un recortable con cualquier imagen

9 jun 2009

Ayer estuve investigando la forma de crear un recortable (ponerle unos bordes recortables a una imagen) con algún editor de imágenes como Photoshop, Illustrator o Fireworks. Lo único que encontré fue un tutorial para Illustrator que no conseguí hacer funcionar. Tocaba investigar. Después de un ratillo jugando a “prueba y error” obtuve un resultado bastante satisfactorio. Aquí tienen un pequeño tutorial de cómo crear un recortable con Fireworks.

  1. Abre la imagen que quieras convertir en un recortable con Fireworks, en mi caso la mascota de PisitoenMadrid.
  2. Utiliza la “varita mágica” para seleccionar todo el fondo y a continuación pincha en Seleccionar-> Seleccionar inverso. Tendrás seleccionado sólo lo que quieres hacer recortable.
  3. Vete a Seleccionar-> Expandir Recuadro. Esto hará que la selección se amplíe un número de píxeles, dibujando un contorno fuera de la imagen. Introduce, por ejemplo, 14px.
  4. Pincha en Seleccionar->Convertir recuadro en trazado. Esto convertirá el contorno en un trazado muy fino y continuo.
  5. Cambia la herramienta “varita mágica” por la herramienta de “seleccion” (flechita negra). Selecciona el trazado y en el menú inferior cambia el fondo a trasparente, el color de línea a gris oscuro, el grosor de la misma a 3 y el trazado a Línea discontinua-> Guión básico.
  6. Finalmente dirígete a Word o Pages (u Open Office) para insertar un símbolo. Selecciona la fuente Wingdings, e inserta el cuarto o quinto símbolo que es una tijera cortada. Cambia el tamaño de la fuente por una bastante grande (dependiendo del tamaño de la imagen), y copia y pega el símbolo en Fireworks. Sólo tendrás que ubicarla donde quieras y listo, ¡tendrás un recortable!

Aunque el tutorial es específico para Fireworks, en Photoshop y editores similares se puede hacer de la misma forma ya que todos tienen la herramienta “varita mágica”. ¡Espero que les sea útil!

, , , , ,
← Entradas anteriores

    Hazte Fan

  • facebook
  • twitter