WordPress, Like de Facebook y Open Graph Protocol

Horacio Bella — Fri, 26 Nov 2010 16:10:33 +0000

Vamos a tratar de hacer funcionar algunos elementos en conjunto. Primero tenemos el botón de Like de Facebook que lo que básicamente hace es, al hace click en el mismo en un sitio externo, agrega en nuestro muro un mensaje con ciertos datos y una referencia en la sección de “Gustos e Intereses” de nuestro perfil.

Por otro lado tenemos un sitio en WordPress. No me refiero precisamente a un blog, sino a un sitio que administre la información con este CMS. Desde la llegada de los custom post types se abrió bastante el abanico de posibilidades de usar WordPress de maneras alternativas (un catálogo de productos, una lista de socios de un club, una carpeta de clientes, etc.). En los casos donde cada post en una ficha lo que voy a tratar de explicar tiene mucho más sentido, de todos modos es totalmente aplicable a un blog normal con artículos.

Cuando añadimos el botón de like en un post de WordPress damos la posibilidad al usuario de publicar en su muro, por default, lo siguiente:

A Nombre le gusta información de la etiqueta </em> en <em>urldelsitio.com</em></p></blockquote> <p>Obviamente nombre se reemplazará por el nombre del usuario en Facebook, el siguiente campo lo llenará con la información que encuentre en la etiqueta <code><title></code> (en caso de esta página por ejemplo sería <em>WordPress, Like de Facebook y Open Graph Protocol ~ Gran Impetu</em>) con un enlace a ese permalink y por último la URL del sitio. Inicialmente no va a mostrar en nuestra sección de gustos e intereses este like que acabamos de hacer, ya que no está especificado que tipo de contenido es.</p> <p>Ahora bien, para poder configurar la manera en que se va a mostrar esto en el muro del usuario y lograr que se agregue a la sección de gustos e intereses con los datos a nuestro piacere necesitamos agregar meta tags de <strong><a href="http://opengraphprotocol.org/">Open Graph protocol</a></strong> con la información correspondiente. <a href="http://developers.facebook.com/docs/opengraph">Facebook explica como hacerlo</a> de manera manual y cuales son las opciones que nos permite, pero vamos a optimizarlo para que tome estos datos automáticamente desde WordPress.</p> <p>Sólo vamos a necesitar editar el <em>header.php</em> de nuestro theme. Para empezar modificamos el tag <code><html></code> para que Facebook sepa que puede encontrar este tipo de información. Quedaría algo así:<br /> <pre><?php language_attributes() ?> xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" ></pre><br /> Luego, dentro de <code><head></code>, si les parece bien antes de <code><?php wp_head() ?></code>, creamos un <em>loop</em> y agregamos los siguiente:<br /> <pre><?php if(is_single()) { ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <meta property="og:title" content="<?php the_title() ?>" /> <meta property="og:type" content="movie" /> <meta property="og:url" content="<?php the_permalink() ?>" /> <meta property="og:image" content="<?php bloginfo('template_url') ?>/images/like_image.jpg" /> <meta property="og:site_name" content="<?php bloginfo('name') ?>"/> <meta property="fb:admins" content="123456789" /> <meta property="og:description" content="<?php echo get_the_excerpt() ?>" /> <?php endwhile; endif; ?> <?php } ?></pre></p> <ul> <li><strong>og:title</strong> – Título de lo que me gusta. En este caso va a ser el título del post. Se va a mostrar en el muro junto al sitio al que pertenece y sin otra información en la sección de gustos e intereses.</li> <li><strong>og:type</strong> – Que tipo de contenido es. Si el post es la ficha de una película, el <em>type</em> será movie como en el ejemplo. La <a href="http://developers.facebook.com/docs/opengraph#types">lista completa está en los docs</a> de Facebook. Con esto el post va a aparecer en la sección de gustos e intereses del perfil del usuario, ordenado a demás de su tipo. No lo podemos automatizar a menos que creemos categorías con la lista de todas, las usemos y las llamemos con <code><?php the_category() ?></code>.</li> <li><strong>og:url</strong> – Donde va a enlazar la información que aparezca en Facebook.</li> <li><strong>og:image</strong> – La imagen que va a acompañar al post. Podemos usar una por defecto, <a href="http://codex.wordpress.org/Function_Reference/the_post_thumbnail">que tome la que hayamos elegido como thumbnail</a> o <a href="http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it">tomar la primera imagen del post</a>.</li> <li><strong>og:site_name</strong> – El nombre del sitio para que lo muestre en el muro cuando se hace click en like. Podemos ponerlo a mano o tomar el campo de WordPress como en el ejemplo.</li> <li><strong>fb:admins</strong> – Debemos introducir nuestra ID de usuario de Facebook para ser los administradores. Esto nos va a servir para saber quienes dieron like, ver estadísticas y demás. Para conocer tu ID anda a tu perfil, hace click en tu avatar y en la URL a la que te dirige podes verlo luego de &id= ¿Hay alguna manera menos engorrosa?</li> <li><strong>og:description</strong> – Un breve texto que describe el post. En este caso the_excerpt se aplica bien pero si no usan el campo de content puede buscar un <em>custom field</em> por ejemplo.</li> </ul> <p>Algunos campos pueden dejarlos vacíos, Facebook los va a reemplazar y otros no son necesarios. Si ya tiene un botón de like funcionando Facebook no va a actualizar los datos en los perfiles de los usuarios, sólo se va a empezar a aplicar en sus nuevos posts y en los nuevos usuarios a quienes les guste.</p> <p>¿Alguien ya lo estuvo probando?</p> <hr /> <p><small>Horacio Bella / <a href="http://horaciobella.com">HoracioBella.com</a> / <a href="http://twitter.com/horaciobella">@horaciobella</a></small></p> </article> <article> <h1>Loop con posts al azar en WordPress</h1> <p>Horacio Bella — Fri, 02 Jul 2010 17:19:13 +0000</p> <p>Una manera bastante simple de <strong>mostrar posts aleatorios</strong>, por ejemplo en nuestro sidebar es creando un loop con <code>query_posts</code> e indicando que los ordene de manera <code>random</code>. Sería algo así:</p> <p><pre><?php query_posts('showposts=10&orderby=rand'); while (have_posts()) : the_post(); ?> <li><a href="<?php the_permalink() ?"><?php the_title() ?></a></li> <?php endwhile; ?> <?php wp_reset_query(); ?> </pre></p> <p>Con esto obtenemos una lista de 10 posts aleatorios con sus respectivos enlaces. Si queremos que sólo muestre aleatoriamente los posts de cierta categoría podemos además indicarlo en el <em>array</em>, ya sea con el ID o el <em>slug</em> de la categoría. Algo así:</p> <p><pre><?php query_posts('showposts=10&orderby=rand&cat=5'); while (have_posts()) : the_post(); ?></pre></p> <p>Pueden ver algunos otras opciones de <a href="http://codex.wordpress.org/Function_Reference/query_posts">query_posts en el Codex de WP</a> y no se olviden de cerrar con <a href="http://codex.wordpress.org/Function_Reference/wp_reset_query">wp_reset_query</a>.</p> <hr /> <p><small>Horacio Bella / <a href="http://horaciobella.com">HoracioBella.com</a> / <a href="http://twitter.com/horaciobella">@horaciobella</a></small></p> </article> <article> <h1>Usar sticky post como destacado en WordPress</h1> <p>Horacio Bella — Mon, 26 Apr 2010 14:23:43 +0000</p> <p>Por lo general se utiliza una categoría para poder destacar posts en la home de nuestro blog en WordPress. Para evitar crear una categoría y utilizar una opción que ya viene incorporada en el CMS para diferenciar tipo de entradas podemos marcar a lo queramos destacar como <strong>sticky</strong>. La idea es crear dos querys, uno que tomará el post destacado (el último marcado como sticky) y otro qe listará el resto de los posts, incluyendo o no al destacado. </p> <p>Manos al código. En nuestro <code>index.php</code> (o <code>home.php</code>) vamos a agregar el primer loop que va a llamar al post destacado:</p> <p><pre><?php $sticky = get_option('sticky_posts'); query_posts('p=' . $sticky[0]); while (have_posts()) : the_post(); ?> <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2> <?php the_content() ?> <?php endwhile; wp_reset_query(); ?></pre></p> <p>Esto carga directamene desde su ID nuestro post sticky más reciente. Ahora hay que cargar el resto de los posts, vamos a hacerlo primero incluyendo este post destacado pero respetando el orden cronológico.</p> <p><pre><?php query_posts('caller_get_posts=1&showposts=10&paged=$paged'); while (have_posts()) : the_post(); ?> <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2> <?php the_content() ?> <?php endwhile; wp_reset_query(); ?></pre></p> <p>Si queremos que el post destacado no aparezca, reemplazamos la llamada anterior por esta:</p> <p><pre><?php $args = array( 'showposts' => 10, 'post__not_in' => get_option('sticky_posts'), 'caller_get_posts'=>1, 'paged'=> $paged ); $my_query = new WP_Query($args); if( $my_query->have_posts() ) { while ($my_query->have_posts()) : $my_query->the_post(); ?> <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2> <?php the_content() ?> <?php endwhile; } wp_reset_query(); ?></pre></p> <p>Seguramente esto requiere mucha personalización de su parte pero espero haya quedado claro.</p> <hr /> <p><small>Horacio Bella / <a href="http://horaciobella.com">HoracioBella.com</a> / <a href="http://twitter.com/horaciobella">@horaciobella</a></small></p> </article> <article> <h1>Mensaje para post antiguos en WordPress</h1> <p>Horacio Bella — Thu, 22 Apr 2010 14:06:25 +0000</p> <p>Me ha pasado de caer en un post de un blog mediante Google o algún enlace y luego de leerlo darme cuenta de la antiguedad del mismo, lo cual en muchas ocasiones modifica el real signficado del contenido. Lo mismo con este blog, recibiendo mensajes de contacto o comentarios sobre cosas que ya perdieron validez. </p> <p>En fin, a lo que iba es sobre <strong>como agregar un mensaje que avise al lector cuando un post tiene cierta aniguedad</strong> (dos años en este ejemplo) utilizando la medida de tiempo Unix en <strong>WordPress</strong>. En <code>single.php</code> agreguemos algo así:</p> <p><pre> <?php $post_age = date('U') - get_the_time('U'); if($post_age > 63072000) { echo 'Este post tiene más de dos años de antigüedad.'; } ?> </pre></p> <p>Lo primero que hicimos fue determinar la edad del post restando a la fecha actual la fecha en que fue publicado. Si esa edad es mayor a 63072000 (dos años) muestra el mensaje, sino no muestra nada. Está más que claro que podemos seleccionar la fecha que queramos de referencia: un año (31536000), 6 meses (15768000), un mes (2628000), etc.</p> <p>Pueden ver un ejemplo en cualquier artículo de este blog que tenga más de dos años.</p> <hr /> <p><small>Horacio Bella / <a href="http://horaciobella.com">HoracioBella.com</a> / <a href="http://twitter.com/horaciobella">@horaciobella</a></small></p> </article> <article> <h1>Solucionar fatal error al intentar actualizar automáticamente WordPress</h1> <p>Horacio Bella — Sun, 18 Apr 2010 16:13:18 +0000</p> <p>Como sabemos, las versiones más recientes de WordPress traen la (maravillosa) opción que nos permite actualizarlo desde el panel de control y con sólo dos clicks. Al intentar hacerlo el otro día en el blog de un cliente se me presentó un error que me impedía hacerlo. El mensaje era <code>"Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 263595 bytes) in /home/account/public_html/wp-includes/http.php on line 1324"</code>. ¿Cómo solucionarlo?</p> <p>Vamos al directorio donde esté instalado WordPress y buscamos el archivo wp-settings.php. Allí reemplazamos:<br /> <pre>if ( !defined(‘WP_MEMORY_LIMIT’) ) define(‘WP_MEMORY_LIMIT’, ‘32M‘);</pre><br /> Por:<br /> <pre>if ( !defined(‘WP_MEMORY_LIMIT’) ) define(‘WP_MEMORY_LIMIT’, ‘64M‘);</pre><br /> Así de simple.</p> <hr /> <p><small>Horacio Bella / <a href="http://horaciobella.com">HoracioBella.com</a> / <a href="http://twitter.com/horaciobella">@horaciobella</a></small></p> </article> <article> <h1>WordPress Argentina 2010</h1> <p>Horacio Bella — Wed, 14 Apr 2010 21:18:59 +0000</p> <p><a href="http://www.uberbin.net/archivos/minipost/wordcamp-argentina-2010.php">Mariano Amartino anuncia en su blog</a> que se realizará en nuestro país una nueva edición del <a href="http://argentina.wordcamp.org/"><strong>Wordcamp</strong></a>. Sería <a href="http://granimpetu.com/index.php?s=wordcamp+argentina">la tercera local</a>, luego de una ausencia en el 2009, para todos los que utilizamos y nos encanta ese CMS.</p> <hr /> <p><small>Horacio Bella / <a href="http://horaciobella.com">HoracioBella.com</a> / <a href="http://twitter.com/horaciobella">@horaciobella</a></small></p> </article> <article> <h1>Solapa para comentar, plugin de WP</h1> <p>Horacio Bella — Fri, 02 Apr 2010 17:46:06 +0000</p> <p><strong>Patricio Tarantino</strong> liberó hace unos días <a href="http://www.patriciotarantino.com.ar/wordpress/plugin-para-wordpress-solapa-para-comentar" target="_blank">un plugin para WordPress que permite agregar una solapa a cada post</a> del blog para realizar comentarios sea cual sea la parte en la que se esté. Bastante usable y pueden verlo funcionando en su blog.</p> <hr /> <p><small>Horacio Bella / <a href="http://horaciobella.com">HoracioBella.com</a> / <a href="http://twitter.com/horaciobella">@horaciobella</a></small></p> </article> <article> <h1>Personalizar content() y excerpt() según more y extractos</h1> <p>Horacio Bella — Fri, 16 Oct 2009 19:01:49 +0000</p> <p>Aprovecho a compartirles un pequeño código que desarrollé para un trabajo sobre WordPress. La idea es la siguiente: En una página principal, archivo, de categoría o cualquier otra que llame a una cantidad de entradas desde el <em>loop</em> usar estas condiciones:</p> <ul> <li>Si el post tiene un excerpt generado por el usuario, mostrarlo</li> <li>Si no tiene pero tiene el contenido separado por un <em>more</em>, mostrar hasta ahí</li> <li>Si no tiene excertp del usuario ni <em>more</em>, autogenerar un excerpt</li> </ul> <p>Para ello utilizaremos el siguiente código, el cual puede ser usado dentro de la llamada por defecto a los post o con <code>query_posts()</code>. En el ejemplo usaremos la opción normal.<br /> <pre><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php global $more; $more = 0; ?> <?php if ( $post->post_excerpt ) { ?> <?php the_excerpt(); ?> <?php } elseif ( stristr(get_the_content('the_more_tag'), 'the_more_tag') == TRUE ) { ?> <?php the_content('Seguir leyendo...'); ?> <?php } else { ?> <?php the_excerpt() ?> <?php } ?> <?php endwhile; else: ?> <?php endif; ?></pre><br /> La primera línea después del <em>loop</em> hará que se respete el corte del <em>more</em> sea cual sea la parte del blog en la que estemos. Luego, con<br /> <code>stristr(get_the_content('the_more_tag'), 'the_more_tag') == TRUE</code> agregamos un enlace a los posts que tengan este corte, el cual no se imprimirá sino que solo lo usaremos para diferenciarlos. El resto creo que está bastante claro.</p> <hr /> <p><small>Horacio Bella / <a href="http://horaciobella.com">HoracioBella.com</a> / <a href="http://twitter.com/horaciobella">@horaciobella</a></small></p> </article> <article> <h1>GimpStyle en francés</h1> <p>Horacio Bella — Fri, 29 May 2009 14:42:26 +0000</p> <p>Hoy me llegó un correo de <strong>Thibault Leruitte</strong> informandome que ha liberado una <a href="http://thibault.leruitte.name/blog/gimpstylenew/">modificación de mi theme Gimpstyle</a>. La misma está traducida al francés, es widget ready y tiene algunas otros cambios. También corregí algunos errores en los <a href="http://granimpetu.com/gimpstyle">archivos originales</a> tanto de la versión en español como la que está en inglés.</p> <hr /> <p><small>Horacio Bella / <a href="http://horaciobella.com">HoracioBella.com</a> / <a href="http://twitter.com/horaciobella">@horaciobella</a></small></p> </article> <article> <h1>Mandolina, theme para WordPress</h1> <p>Horacio Bella — Wed, 13 May 2009 19:00:26 +0000</p> <p>Aproveché el fin de semana para acomodar algunas líneas de código que tenía sueltas de varios trabajos para armar un theme para WordPress y liberarlo. Se trata de un theme con estilo tradicional (header, contenido a la izquierda listado de manera cronológica y sidebar lateral) de estilo bastante simple y sobrio.</p> <p>La idea de <strong>Mandolina </strong>es que sea un theme para quien necesite un estilo elegante y serio para su blog. Va a serle útil también para quien necesite una plantilla de base para modificar y adapatar su estilo ya que está realizada de manera simple y ordenada. En fin, es una plantilla básica que van a poder modificar sin problemas.</p> <p>Algunas características:</p> <ul> <li>Válido XHTML/CSS</li> <li>Optimizado para SEO</li> <li>Acepta widgets (widget-ready)</li> <li>Fácil edición general de los estilos</li> <li>Bajo licencia Crative Commons</li> <li>Respeta conceptos básicos de usabilidad</li> <li>Ultraligero</li> </ul> <div class="links"> <ul> <li>Documentación: <a href="http://granimpetu.com/mandolina/">Mandolina – Theme para WordPress</a></li> <li>Demo: Seleccionar Mandolina en el <a href="http://granimpetu.com/themesdemo">Theme Viewer</a></li> <li>Descarga: <a href="http://granimpetu.com.ar/archivos/otros/mandolina_es.zip">Mandolina en Español</a> – <a href="http://granimpetu.com.ar/archivos/otros/mandolina_en.zip">Mandolina en Inglés</a></li> <li><a href="http://granimpetu.com/themes-para-wordpress/">Ver otros themes para Wordpres</a></li> </ul> </div> <hr /> <p><small>Horacio Bella / <a href="http://horaciobella.com">HoracioBella.com</a> / <a href="http://twitter.com/horaciobella">@horaciobella</a></small></p> </article> </main></body></html>

Gran Impetu » Wordpress

WordPress, Like de Facebook y Open Graph Protocol