¿Buscas soluciones para tu nuevo proyecto online? Súmanos

¿Un nuevo proyecto?

Súmanos

Integrar Facebook Open Graph en WordPress

Open Graph es un protocolo que creó Facebook para ayudar a compartir contenido con amigos y admiradores de los sitios web.

og
Facebook Open Graph es un protocolo de comunicación de datos digitales que permite que tus publicaciones se conviertan en objetos enriquecidos dentro del gráfico social. Esto quiere decir que le puedes decir a Facebook directamente qué es lo que estás compartiendo y cómo quieres que se vea en el Newsfeed de tus fans o tus amigos: cuál es el título, cuál es la descripción de tu artículo, de qué tamaño es la imagen que quieres destacar, quién es el autor, entre otras propiedades. Te permite explorar formas más interesantes para interactuar y participar con tus lectores. En última instancia – si esto se hace bien – se acumula su marca y aumenta el tráfico de su sitio.

Paso 1. Crear una aplicación de Facebook

Necesitaremos un ID de aplicación y para conseguir eso, tendrás que crear una aplicación de Facebook. Si ya tienes una, vaya al paso 2.
Creación de una aplicación es fácil, esto es lo que hace:
1. Inicie sesión en Facebook , y vaya a las páginas para desarrolladores .
2. Haga clic en “Configurar una nueva aplicación” botón en la esquina superior derecha.
3. Dar un nombre a su nueva aplicación, de acuerdo a los términos de Facebook, click Crear aplicación.

SEGUIMIENTO FACEBOOK
4. Ir a la ficha Sitio Web, rellenar URL Sitio y dominio del sitio.
5. Anote el valor del ID de aplicación en algún lugar y pulsa el botón “Guardar cambios

Paso 2. Reemplace <HTML> Tag

Abre el archivo de cabecera de tu tema (header.php) en tu editor de código. Manteniendo siempre una copia de seguridad por si algo sale mal.
Busque esta línea de código, que comienza con <html xmlns = “http://www.w3.org/

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

Reemplazar con:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">

Mantenga header.php abierto, ya que lo necesitaran para la tercera etapa.

Paso 3. Inserte OG <Meta> tags

Pega el siguiente código justo después de la etiqueta, antes del cierre de la misma.

<?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>
<!-- los valores por defecto -->
<meta property="fb:app_id" content="your_fb_app_id" />
<meta property="fb:admins" content="your_fb_admin_id" />

<!-- si la pagina es la pagina de contenido -->
<?php if (is_single()) { ?>
<meta property="og:url" content="<?php the_permalink() ?>"/>
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />

<!-- si la pagina es otra -->
<?php } else { ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:type" content="website" />
<meta property="og:image" content="logo.jpg" /> <?php } ?>

Éstos son algunos de los valores que necesita alterar:
Línea 3: Reemplace your_fb_app_id con el ID de aplicación de la Etapa 1.
Línea 4: Usted puede obtener su your_fb_admin_id bajo la página de Facebook Insights , ( Más info ). Haga clic en el “Insight for your website” botón verde, toma toda la cadena de código y reemplazar la línea 4.
Línea 12: Esta línea determina la imagen que representa a su articulo. Si su theme es compatible con WordPress Post Thumbnails , debería funcionar bien. Pero si no lo hace, se producirá un error y se visualizara sin una imagen. Echa un vistazo a Paso 3a para una solución alternativa.
Línea 19: Vuelva a colocar la ruta del “logo.jpg”. Se muestra cuando se comparte una página en Facebook, no los artículos.

Paso 3a – Cuando “wp_get_attachment_thumb_url” falla

Cuando wp_get_attachment_thumb_url() no funciona, es probable que vaya a un atributo de contenido sin valor, al igual que lo que se muestra a continuación:

<meta property="og:image" content="" />

Una solución sencilla es la de reemplazar la línea 12 con el siguiente código:

<meta property="og:image" content="<?php if (function_exists('catch_that_image')) {echo catch_that_image(); }?>" />

A continuación, abrir functions.php e inserte el siguiente código:

function catch_that_image() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];
	if(empty($first_img)){
			//Defines a default image
			$first_img = "/images/default.jpg";
		}
	return $first_img;
}

Paso 4. Insertar Facebook Javascript SDK

El siguiente Javascript es para acceder a todas las funciones de la API de gráficos y cuadros de diálogo . También le permite integrar  Facebook social plugins como el botón Me gusta , Facepile , recomendaciones , etc con facilidad.
Colóquelo en header.php, justo después de <body>

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your_fb_app_id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Prueba # 1 – Ver código fuente

Echa un vistazo al código fuente de una de las entradas del blog y compruebe que las propiedades y sus valores, son correctos.

Test #2 – Instale un Like Box

Si no tienes un Facebook Facebook Like Button, coloque el código siguiente en cualquier lugar (preferiblemente antes de contenido o después del contenido) en el interior single.php:

<fb:like href="<?php the_permalink() ?>" layout="button_count" show_faces="false" width="450" action="like" colorscheme="light"></fb:like>

Extra 1: WordPress Plugin

Si se complica instalar los códigos o necesita que esto se haga rápido y fácil – hay un plugin de WordPress para eso.

Facebook Open Graph Meta in WordPress : es un plugin para WordPress que agrega los metadatos de Facebook para evitar cualquier problema con las miniaturas, títulos de publicación erróneos, descripción incorrecta, etc.

Extra 2: Instalacion manual desde functions.php

Para los que deseen hacerlo de forma manual, tendrán que agregar el siguiente contenido al fichero functions.php de nuestro tema:

/Agregamos Open Graph en los Language Attributes
function add_opengraph_doctype( $output ) {
        return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
    }
add_filter('language_attributes', 'add_opengraph_doctype');

//Añadimos la información Open Graph
function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //Si no es un post o página
        return;
        echo '<meta property="fb:admins" content="EL ID DE TU USUARIO"/>';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="AQUI VA EL NOMBRE DE TU SITIO WEB"/>';
    if(!has_post_thumbnail( $post->ID )) { //La entrada no tiene imagen destacada, utiliza una imagen predeterminada
        $default_image="http://ejemplo.com/image.jpg"; //Aquí tienes que poner la ruta de la imagen prefeterminada que se mostrará.
        echo '<meta property="og:image" content="' . $default_image . '"/>';
    }
    else{
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    }
    echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

No olvides modificar el ID de tu usuario, el nombre de tu sitio web o la URL de la imagen predeterminada.

Herramientas de testeo y validación

Algunos trucos y consejos

Usa imágenes grandes

Twitter y Facebook necesitan imágenes de 120×120 como mínimo, pero si quieres que tu post destaque, usa imágenes grandes.

Si tu contenido no tiene ninguna imagen asociada, usa una imagen genérica con el logo de la empresa, sus intalaciones, un bodegón de productos o el producto más vendido.

Seguimiento de clicks en Facebook

Mediante la etiqueta <meta property=”fb:admins” content=”IDs de los adminstradores de la página de Facebook” /> podemos especificar qué personas pueden consultar las estadisticas de clicks que ha tenido cada url del sitio compartida en FB. Para conocer el ID de un perfil de usa http://findmyfacebookid.com/

También puedes usar tu identificador de perfil. Es tu nombre en la url de tu perfil. https://www.facebook.com/nombre.apellido

Usa estándares

La etiquetas Opengraph pretenden ser un estándar. Las usa Facebook pero también otras redes. Incluyéndolas, te aseguras que todas las redes sociales muestren tus url con unos mínimos. No obstante si estás interesado en que tus urls resplandezcan en una red social en concreto, investiga por que probablemente disponga de etiquetas propietarias que te ayuden a mejorar.

Usa estas meta-etiquetas para Twitter y Google+

<!-- Para Twitter Card -->
<meta name="twitter:card" content="product" />
<meta name="twitter:title" content="Título de tu página o producto" />
<meta name="twitter:description" content="Descripción de la página o producto" />
<meta name="twitter:image:src" content="Imagen de la página o producto" />
<meta name="twitter:site" content="@cuenta-del-publicador-o-propietario" />
<meta name="twitter:creator" content="@cuenta-del-autor" />
<meta name="twitter:data1" content="978-84-9746-875-6" />
<meta name="twitter:label1" content="ISBN" />
<meta name="twitter:data2" content="18.50€" />
<meta name="twitter:label2" content="Precio" />

<!-- Para Google+ -->
<link href="https://plus.google.com/id-de-google+/posts" rel="author" />
<link href="https://plus.google.com/id-de-google" rel="publisher" />
<meta itemprop="name" content="Título de tu página o producto" />
<meta itemprop="description" content="Descripción de la página o producto" />
<meta itemprop="image" content="Imagen de la página o producto" />

Fuentes para la publicacion
Howto: Integrate Facebook Open Graph With WordPress (hongkiat)
Mejora el SEO de tu sitio web con Open Graph de Facebook (maestrosdelweb)
Facebook Open Graph en WordPress (dariobf)
Enriquece tus contenidos compartidos en Redes Sociales (adimedia)

Feedback

Patagonia Creative ®

Agradecemos cualquier comentario acerca de nuestro sitio; felicitaciones, nuevas ideas, informes de errores o lo que sea!