Planeta WordPress

Imagen vista en blog.robfore.com

A propósito de los cambios en los plugins sociales de Facebook (más información en Cómo arreglar el error ‘Invalid action type’ del plugin de recomendaciones de Facebook) recopilamos en esta entrada las 5 herramientas que empleamos en Blogpocket, desde hace algunos meses con gran efectividad.

Lo que estamos ensayando en Blogpocket (hasta ahora con resultado satisfacotrio) es si poner a interactuar, especialmente, con Facebook (incluyendo a su sistema de comentarios) conlleva un aumento sustancial del tráfico hacia tu blog.

1. Easy Mashable Social Bar. Este plugin de WordPress concentra los enlaces a tus perfiles más importantes. Yo lo he modificado para traducirlo al español y adaptarlo a Blogpocket.

2. Tweet, Like, Google +1 and Share. Un plugin de WordPress que añade los botones más utilizados para compartir (Facebook, Twitter, Google+, etc.) al pie de cada post.

3. Social Metrics. Un Plugin de WordPress muy útil que añade un apartado en el escritorio de administración con las estadísticas por entrada de likes, retweets y +1 de Facebook, Twitter y Google+. Además, pinchando en los botones, en cada post, envías el contenido a dichas redes sociales.

4. Most Shared Posts. Con este plugin de WordPress se añade un widget con el que mostrar en el sidebar las entradas de tu blogs más compartidas en las redes sociales. En el escritorio se añade una página con el resumen detallado por redes sociales.

5. Actividad reciente. Con este plugin social de Facebook se muestra lo que los amigos del usuario, que está consultando el blog, están compartiendo y recomendando en Facebook.

6. Recomendaciones. Plugin de Facebook que visualiza las entradas que han recomendado los amigos del usuario que está consultando el blog.

7. Comentarios de Facebook. Hace poco hablamos, aquí en Blogpocket, acerca de la conveniencia de utilizar el sistema de comentarios de Facebook.

Imagen vista en blog.robfore.com

A propósito de los cambios en los plugins sociales de Facebook (más información en Cómo arreglar el error ‘Invalid action type’ del plugin de recomendaciones de Facebook) recopilamos en esta entrada las 5 herramientas que empleamos en Blogpocket, desde hace algunos meses con gran efectividad.

Lo que estamos ensayando en Blogpocket (hasta ahora con resultado satisfacotrio) es si poner a interactuar, especialmente, con Facebook (incluyendo a su sistema de comentarios) conlleva un aumento sustancial del tráfico hacia tu blog.

1. Easy Mashable Social Bar. Este plugin de WordPress concentra los enlaces a tus perfiles más importantes. Yo lo he modificado para traducirlo al español y adaptarlo a Blogpocket.

2. Tweet, Like, Google +1 and Share. Un plugin de WordPress que añade los botones más utilizados para compartir (Facebook, Twitter, Google+, etc.) al pie de cada post.

3. Social Metrics. Un Plugin de WordPress muy útil que añade un apartado en el escritorio de administración con las estadísticas por entrada de likes, retweets y +1 de Facebook, Twitter y Google+. Además, pinchando en los botones, en cada post, envías el contenido a dichas redes sociales.

4. Most Shared Posts. Con este plugin de WordPress se añade un widget con el que mostrar en el sidebar las entradas de tu blogs más compartidas en las redes sociales. En el escritorio se añade una página con el resumen detallado por redes sociales.

5. Actividad reciente. Con este plugin social de Facebook se muestra lo que los amigos del usuario, que está consultando el blog, están compartiendo y recomendando en Facebook.

6. Recomendaciones. Plugin de Facebook que visualiza las entradas que han recomendado los amigos del usuario que está consultando el blog.

7. Comentarios de Facebook. Hace poco hablamos, aquí en Blogpocket, acerca de la conveniencia de utilizar el sistema de comentarios de Facebook.

Fuente de la imagen: stoneysteiner

Desde hace unos días, en Blogpocket se puede comentar mediante el sistema de Facebook que permite externalizar esta forma de participación. Hemos optado también por dejar la opción de usar el sistema incluido en la instalación de WordPress para aquellos visitantes que no tengan cuenta de Facebook o no quieran utilizarlo.

¿Cómo se intala?

El sistema de comentarios de Facebook es muy fácil de instalar en tu blog. Hay algunos plugins que te facilitan la labor pero yo prefiero, en este caso, hacerlo manualmente.

En Cómo instalar el nuevo sistema de comentarios de Facebook en tu blog publiqué un tutorial detallado.

Sin embargo, es preciso aclarar que se ha eliminado la opción “iframe” y ahora puedes añadir el sistema en código HTML5. Cuando pinchas en el botón “Get code” (obtener código) puedes elegir una de las dos pestañas: HTML5 o XFBML.

Tanto en HTML5 como en XFBML hay que hacerlo en dos pasos: primero copiar un código después de la etiqueta <body> (normalmente en el archivo header.php de tu instalacion de WordPress) y después pegar la llamada al sistema en aquel lugar adonde quieras que aparezca el formulario para comentar (yo lo he situado en el archivo comments.php, el archivo correspondiene a la plantilla de comentarios llamado desde single.php).

Además, en XFBML, hay que pegar un namespace en la etiqueta <html> para que funcione en las versiones más antiguas de Internet Explorer.

Resumen: Crea tu aplicación en developers.facebook.com/apps e ir a developers.facebook.com/docs/reference/plugins/comments/ y obtener el código para añadir a tu blog.

¿Cómo funciona?

En el formulario para comentar con Facebook solo puedes hacerlo si tienes una sesión abierta. Puedes elegir si publicar el comentario en tu perfil o no. Si lo haces, entonces aparacerá en tu muro de Facebook y se podrá responder allí, reflejándose en el blog y viceversa.

Puedes configurar el sistema de comentarios de Facebook para que se moderen (lo que es recomendable para evitar a los trolls). Si ocultas un comentario y se eligió la opción de publicarlo en tu perfil, solo lo verán los amigos del usuario que comentó.

Resumen: modera los comentarios en developers.facebook.com/tools/comments.

¿Es conveniente intalar el sistema de comentarios de Facebook?

Eso tiene sus detractores pero también hay una corriente a favor de emplear sistemas externos de comentarios en general. ¿Por qué puede ser más beneficioso, o no, utilizar Facebook para comentar en tu blog?

En principio puede ser otra manera de frenar el spam y a los trolls. En teoría, para comentar con el sistema de Facebook tienes que ser una persona y no un robot. Aunque existe la posibilidad de que aumenten los spammers humanos.

Puede aumentar el tráfico hacia tu blog, debido a que habrá más enlaces de tus posts en los muros de aquellos usuarios que han comentado y han elegido la opción de publicar el comentario en su perfil. Así mismo es una forma de dar a conocer tu blog en nuevas comunidades.

En cuanto a los posibles problemas, Facebook no permite exportar los comentarios (tal como Disqus, otro sistema para externalizar comentarios). Si algún día decidieses abandonar el sistema de Facebook perderías todos los comentarios, cosa que no sucede con el sistema propio de tu WordPress.

Y por último, Facebook en sí, puede ser una barrera simplemente para que tus visitantes comenten en tu blog.

Por todo ello, yo he decidido mantener los dos sistemas en paralelo y que mis lectores decidan cuál sistema utilizar.

Estas son las entradas que he publicado en Diciembre de 2011 en Kebrantin.

• Una reflexión para elegir plataforma de blogging
• Cómo actualizar manualmente tu versión de WordPress

Recapitulemos lo que hemos visto en las últimas entradas, aquí en Blogpocket.com, acerca del tratamiento de las imágenes adjuntas a un post (los objetos denominados attachments que, en realidad, pueden ser también vídeos, etc.).

• Si subes una imagen, mediante el botón “Media” del editor de posts o mediante la opción “Media” del escritorio), se almacena en el directorio local (que suele ser wp-content/uploads). Las imágenes asociadas (WordPress crea varias versiones, en distintos tamaños -thumbnail, medium y full- del archivo subido) se denominan “Attachments” del posts.
• Con el plugin W3 Total Cache puedes hacer que dichas imágenes, automáticamente, se transmitan a un CDN. En Configurando W3 Total Cache para el CDN de Amazon vimos cómo hacerlo
• Además, para cada post puedes elegir una imagen como destacada (featured). Puede ser cualquiera de las existentes en la galería y no tiene porqué coincidir con las attachments. Puedes asignar una imagen featured automáticamente, y de una pasada, a partir de una de las imágenes attachment de cada post, en toda la base de datos de tu blog, con el plugin Auto Featured Image. Sin embargo, llegado el caso, puede ser necesario eliminar todas las imágenes featured, cuestión que explicábamos en Cómo eliminar la imagen en miniatura de todos los posts.
• Otro problema puede darse en algunos themes que utilizan funciones (como vt_resize) para redimensionar la imagen featured y utilizando un CDN. El problema y la solución los describiamos en Cómo redimensionar la imagen featured si utilizas CDN.
• Si a partir de un determinado momento empiezas a utilizar un CDN y las imágenes de tus posts están enlazadas a Flickr, puedes traértelas al directorio local (y, en consecuencia, al CDN con W3 Total Cache) con el plugin Add Linked Images To Gallery.

Hoy añadiremos a todo esto la forma de conseguir extraer de un post la primera imagen attachment. ¿Y para qué puede servir eso?. Puede ser muy útil para mostrar siempre una imagen asociada al post, como destacada, aunque no tenga asignada una featured. Y también en el caso de instalaciones multisite con varios editores, en las que puede ser interesante no obligar a éstos a subir fotos al directorio local ni a asignar imágenes featured, pudiendo seguir enlazando a URLs externas. El plugin Add Linked Images To Gallery y el código que veremos a continuación harán el trabajo por ellos.

Extrayendo la primera imagen de un post

La función de WordPress get_posts sirve para crear múltiples bucles y recupera una lista de los últimos posts bajo unos determinados criterios. Para utilizarla con el objetivo de extraer las imágenes adjuntas a un post, solo es necesario saber que las imágenes attachments se guardan en la base de datos con el indicativo “attachment” en el campo post_type y, además, con el valor ‘inherit’ en el campo post_estatus. Otros dos argumentos para esta función son el número de posts que se recuperarán (numberposts a -1 significa todos los posts) y post_parent que es el número ID del post.

Con ello se obtiene una lista de todos los posts que se puede recorrer para seleccionar lo que se quiera. En nuestro caso, con la función wp_get_attachment_image_src accederemos al array que contiene la URL y los valores del ancho y alto del archivo attachment.

<?php
$args = array( ‘post_type’ => ‘attachment’, ‘numberposts’ => 1, ‘post_status’ =>’inherit’, ‘post_parent’ => $post->ID );
$attachments = get_posts($args);
if ($attachments) {
foreach ( $attachments as $attachment ) {

$image = wp_get_attachment_image_src($attachment->ID, ‘full’);
}
}
?>

Una vez obtenido el array con los atributos de la imagen attachment, podemos mostrar ésta redimensionada, de la siguiente forma:

<?php if ( $attachments ) { ?>
<img src=”<php echo $image[0]; ?>” width=”280″ height=”257″ alt=”image”/>
<?php }
?>

Ver también la función get_children con la que también se puede generar un bucle para mostrar la primera imagen de un post.

Si utilizas un CDN como el de Amazon para almacenar tus imágenes, y así optimizar el tiempo de carga de tu blog, tal vez tengas problemas con tu theme si en éste se emplean ciertas funciones que crean archivos en local. Ese es el caso de algunas plantillas que utilizan la función vt_resize para crear una imagene redimensionada de la imagen featured de los posts.

Recordemos que la imagen featured (o thumbnail) se define cuando se publica un post, por lo que el plugin W3 Total Cache se habrá llevado al CDN todas las imágenes asociadas al post en el momento de la publicación y no tendrá cualquier otra que se cree posteriormente (como puede pasar con vt_resize).

Una posible solución es utilizar la función wp_get_attachment_image_src que devuelve un array con la URL, el ancho y la altura de una imagen adjuntada a un post. Si se quiere el src de la imagen se puede obtener con el primer elemento del array devuelto por la funcion.

Recordemos también que una imagen adjuntada a un post es la que se sube a la instalación de WordPress en el momento de publicar el post o con la opción “Add new” del apartado “Media”.

De esa forma, podemos utilizar el siguiente código PHP para redimensionar una imagen a 280×257 por ejemplo:

<?php
$thumb = get_post_thumbnail_id();
$image = wp_get_attachment_image_src($thumb, ‘full’);
?>
<img src=”" width=”280″ height=”257″ alt=”image”/>

Donde $image[0] es el primer elemento del array devuelto por wp_get_attachment_image_src

Con get_post_thumbnail_id se obtiene el ID de la imagen featured (o thumbnail) adjuntada al post. Si no se adjuntó ningún thumbnail, la función devuelve un valor vacio. Para que un theme pueda utilizar imágenes featured, hay que incluir la siguiente sentencia en el archivo functions.php del theme activo (ver Post Thumbnails) o estar activado en una instalación multisite.

add_theme_support( ‘post-thumbnails’ );

[Fuente de la imagen: google.tecnoad.com]

Desde que decides empezar un blog hasta que lo ves funcionando y con algunas visitas, puede pasar bastante tiempo. Acerca de las bondades de tener un blog ya hemos hablado en más de una ocasión, tanto aquí en Blogpocket como en Weblog Magazine.

En esta entrada voy a resumir el camino básico a seguir para poner en marcha un blog utilizando la plataforma instalable de WordPress. Se trata de los pasos mínimos para obtener un blog en condiciones mínimas de funcionamiento. En cambio, si optas por registrarte en WordPress.com, lo tendrás casi todo hecho (sistema listo para usar y hosting gratuito) y, en contra, perderás flexibilidad y libertad para configurar (aspecto y extensiones) el blog a tu gusto (diferencias entre WordPress.org y WordPress.com).

1. Elige un buen nombre

Parece mentira pero este es el paso más difícil. Asegúrate de que el nombre elegido no pertenezca ya a otro blog. Consulta en Google, en Who is o en tu proveedor de servicios. Ten en cuenta que no son buenos ni los nombres excesivamente largos ni aquellos sonoramente pobres.

2. Adquiere el dominio y el hosting.

Adquiere el dominio correspondiente al nombre de tu blog y el hosting para alojarlo. Los dominios se reservan por un año como mínimo pero lo que si te recomiendo es que emplees proveedores de servicios diferentes para el dominio y para el hosting. Así podrás cambiar sin problemas de alojamiento sin más que cambiar la configuración del dominio. He tenido más de una mala experiencia al quererme cambiar de hosting.

Hay muchos proveedores de servicios que te proporcionarán el alojamiento para tu blog y existen muchos planes con servidores compartidos y dedicados. Tienes que asegurarte, sobretodo, de que podrás controlar todos los aspectos de la instalación de tu blog: bases de datos con MySQL, última versión de PHP, definición de dominios, etc.

Respecto al dominio, Godaddy ofrece un servicio de calidad desde hace mucho tiempo y con un buen soporte online (incluso en español). Otro servicio que a mi me funciona muy bien es Piensa Solutions.

3. Instala WordPress

WordPress es muy fácil de instalar y es célebre su proceso de descarga e intalación en 5 minutos. Básicamente consiste en descargar un zip, descomprimirlo, subir por ftp los archivos a tu servidor de alojamiento, modificar el archivo wp-config.php con el usuario y contraseña de la base de datos y ejecutar el script wp-install.php.

Previamente, habrás de haber creado en tu servidor, y en el dominio correspondiente (también definido con anterioridad), una base de datos MySQL para albergar tu blog.

4. Configura WordPress

Una vez instalada la aplicación correctamente, podrás cambiar la contraseña del usuario de administración y configurar los parámetros fundamentales: descripción del blog, número de posts a mostrar en la página principal, formatos de fecha, estructura de los permalinks, etc.

5. Elige un theme

El aspecto de tu blog se determina en WordPress con los themes, un conjunto de archivos, combinación de hojas de estilo CSS y programas PHP, que se integran con el sistema.

Hay muchos themes listos para descargar y si no te gusta ninguno siempre puedes desarrollar e instalar el tuyo propio.

Instalar un theme es tan fácil como subirlo a la carpeta /themes y activarlo en el panel de administración. Si quieres cambiar algo, solo tienes que ir los archivos y modificarlo, aunque para ello, tienes que saber un poquito de PHP.

6. Instala plugins

Con los plugins puedes extender las funcionalidades de WordPress todo lo que desees. E igual que los themes puedes desarrollarlos también tú mismo.

Un plugin que viene de serie es Akismet y que te servirá para controlar el spam en los comentarios. Para activarlo necesitas estar registrado en WordPress.com. Hay algunos plugins fundamentales (infografía para elegir los mejores plugins de WordPress) pero no puedes dejar de instalar los siguientes: backups de tu base de datos, ayuda para configurar tu SEO, generador automático y envío del sitemap a buscadores, redirección de feeds y caché de páginas.

7. Da de alta tu blog en Feedburner

Los feeds (sindicación de contenidos) son un elemento esencial de tu blog. Debes cuidar este aspecto mostrando el icono RSS bien visible y facilitar la suscripción para los agregadores a tus lectores.

Feedburner es un recurso muy útil que proporciona una herramientas fundamental para tu blog: estadísticas de lectura de tus feeds, asociando el archivo RSS de tu blog a uno propio. Además, ofrece una serie de utilidades de promoción como suscripción por e-mail, envío automático de contenidos a Twitter, etc.

8. Da de alta tu blog en Webmaster Tools

Para facilitar a los buscadores la tarea de obtener el contenido de tu blog, existe el archivo sitemaps (cómo enviar el sitemaps a los distintos buscadores).

Por una parte, como mínimo, tienes que registrar tu blog en las herramientas para webmasters de Google, lo que te proporcionará una valiosa ayuda de cara al posicionamiento. Y por otra, tienes que enviar el archivo sitemaps cada vez que actualices tu blog. Existe un plugin llamado Google XML Sitemaps que automatiza el proceso.

También debes generar un archivo robots.txt (WordPress no es “google-friendly”).

9. Da de alta tu blog en Google Analytics

Para poder conocer el comportamiento de tus visitas al blog puedes hacerlo con Google Analytics. Para ello, debes registrar tu blog y obtener un código para añadir en todas las páginas de las que quieras obtener información de tráfico (El código de Analytics, ¿al principio o al final de la página?).

10. Instala la botonadura social

Y finalmente, debes dar a conocer tu blog al mundo. Promociónalo de todas las formas posibles, pero una forma de difusión es utilizar Twitter, las redes sociales y otros medios sociales como Menéame, Wikio, Bitacoras.com, etc. para dar a conocer tus contenidos. WordPress tiene una opción para enviar una notificación ping a los principales directorios de blogs.

Existen formas de llevar automáticamente tus posts a Twitter y Facebook. Y para facilitar a tus lectores la promoción de lo que publicas es conveniente que coloques en todos tus posts la botonadura social que, por lo menos, te recomiendo que lleve los botones de Twitter, Facebook, Bitacoras.com y Google+.

Estas son las entradas que he publicado en Agosto de 2011 en Kebrantin.

• Tiny Contact Form y Magic Contact, plugin WordPress para formulario de contacto
• Cómo poner código QR en WordPress
• Cómo detectar y prevenir el código malicioso en WordPress
• Cómo hacer más humano tu blog
• Para el Spam en tu WordPress

En el post Google Sitemap Generator y WordPress 3.0 Multisite vimos como solventar, provisionalmente, el problema de la incompatibilidad del plugin XML Sitemap Generator con WordPress Multisite. Era una buena solución pero implicaba modificar el plugin. Por lo general, debes huir de ese tipo de trucos porque te impedirán aplicar las distintas actualizaciones que se vayan realizando en el software de dicho plugin. Por lo tanto: ¡prohibido tocar los plugins! .

Tenia pendiente implantar en Blogpocket Multisite (basado en una instalación multisite de WordPress) la actualización del XML Sitemap Generator original que admite este tipo de plataformas.

Aunque, por lo que he podido encontrar, dicha versión se encuentra todavía en beta, se puede descargar en http://www.arnebrachhold.de/redir/sitemap-dl-beta/ y funciona perfectamente.

No así alguna otra versión, como la de Google XML Sitemaps with Multisite support que solo crea los sitemaps en un subdirectorio del directorio raiz y eso, tal como se explica en Improved Google XML Sitemaps plugin with Multisite Support (6 posts) es problemático.

Con WordPress 3.2, la más reciente versión de WordPress, no funcionaba bien la plantilla The Digital Business Card en antoniocambronero.com. Así que, dado que el theme The Seven Five ha dado muy buen resultado en jlorihuela.com, he optado por instalarlo también en mi sitio personal.

Como la implementación técnica se ha basado en piezas que ya teníamos documentadas en Blogpocket.com, las reuno y las resumo a continuación.

1. Posts más recientes de Blogpocket.com y tuits más recientes

Símplemente hay que configurar las opciones del theme The Seven Five (dónde descargarlo), una vez instalado.

También se configura para los links de Delicious y las imágenes de Flickr.

Para darle importancia a los sitios relevantes, reordené el código de cada sección en el archivo home.php del theme.

En Cómo mostrar los tweets más recientes en tu blog hay una explicación por si se quiere utilizar el método que se emplea en The Seven Five para visualizar tuits en un blog.

2. Items más recientes de un archivo RSS

Para el resto de secciones, se usa el código que se incluye en el archivo fetch_rss.txt, tal como decíamos en The Seven Five, un theme lifestream para jlorihuela.com.

Por ejemplo, ha sido inmediato añadir los últimos estados de Google+, teniendo en cuenta que el RSS de un usuario de la nueva red social de Google se puede obtener sabiendo el ID de tu usuario (el que aparece en la URL cuando se pincha en el nombre) y yendo a la página de plusfeed.com. Mi feed es: http://plusfeed.appspot.com/100574040266325289708.

3. Formulario de contacto

Finalmente, opté por emplear Magic Contact, un fantástico plugin de WordPress. Hoy cuento los detalles en Kebrantin: Tiny Contact Form y Magic Contact, plugin WordPress para formulario de contacto.

4. Foro

Y para dar un poco de vidilla al sitio, se me ocurrió utilizar la sección de posts para publicar uno solo al principio, que sirviera de foro para que los visitantes expresen sus sugerencias o pregunten lo que quieran de forma pública.

5. Páginas

Por último, una serie de páginas contienen cierta información que me atañe como entrevistas, proyectos, premios, publicaciones y portfolio.

Si estás interesado en implantar este theme, no dudes en preguntarme para asesorarte.