Añadir el boton “Me gusta” de Facebook

En el apartado donde mostramos los post de nuestro blog, generamos un bucle que los va imprimiendo uno a uno. Dentro de este bucle tenemos acceso al ID de cada uno de los post, por lo que podemos obtener con este, su url amigable o permalink, como lo llamamos en WordPress.
En este ejemplo, vamos a añadir el botón de facebook, que considero la redes social más importante del panorama internacional. El resto de redes sociales funcionan de la misma manera, por lo que agregar su botón es más de lo mismo, con algún detalle distinto, que en futuros post explicaré al detalle.

Si accedes a la URL https://developers.facebook.com/docs/reference/plugins/like/, verás un formulario; rellenalo según desees ver el botón en tu web. Una vez terminado, presiona sobre Get Code, esto nos abrirá una ventana en la que podemos seleccionar 3 formas distintas de mostrar el botón en nuestr web. Las opciones son XFBML, IFRAME o HTML5, esta última es la más fácil, estandar y acabará siendo la definitiva.

facebook_code_form

Si te preocupa que el botón no ponga Compartir, no te preocupes, el botón Share o Compartir esta obsoleto siendo este, el actual y conocido por todos.
La URL que colocamos en el formulario de facebook, estará explicita en el código que este nos proporciona, donde esta es la URL que debemos cambiar por la que deseamos compartir.

facebook_form

  • HTML5

    Comenzamos por la forma por defecto.
    El código HTML5 tiene 2 partes, una a colocar justo después del tag body de nuestra página, y otro a colocar donde queramos que se vea el botón.

    Ejemplo de código HTML5 (defecto).
    Este código va justo después del tag body de nuestra página.

    [XML]
     


    [/XML]

    La segunda parte del código debemos colocarla donde querámos mostrar el botón:

    [XML]
    data-send=”false” data-layout=”button_count” data-width=”130″
    data-show-faces=”false” data-action=”recommend” data-font=”arial”>

    [/XML]

    El atributo data-href es el que contendrá la URL a compartir, por lo tanto donde colocaremos:

    [PHP]
    ID); ?>.
    [/PHP]

    El tipo de botón, letra, tamaño, etc, son de ejemplo, al generar nuestro botón esto cambiará.

  • IFRAME

    Si queremos insertar el botón mediate IFRAME, el código será el siguiente:

    <br /><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fpabloleone.com&amp;send=false&amp;layout=button_count&amp;width=130&amp;show_faces=false&amp;action=recommend&amp;colorscheme=light&amp;font=arial&amp;height=21" height="240" width="320"></iframe><br />

    Aquí se complica algo más, debido a que hay que traducir ciertos caracteres de la URL a compartir, por lo que tendrémos que cambiar un poco la función PHP que nos devuelve el permalink. Será el siguiente:

    <br /><!--?php echo urlencode(permalink($post--->ID)); ?&gt;<br />

    Qudando el código a introducir en la página, de la siguiente manera:

    <br /><iframe src="&quot;//www.facebook.com/plugins/like.php?href=&lt;?php" height="240" width="320"></iframe><br />

    El tipo de botón, letra, tamaño, etc, son de ejemplo, al generar nuestro botón esto cambiará.

  • XFBML

    La tercera forma y más complicada es la integración por XFBML.

    Ejemplo de código XFBML.
    Este código va justo después del tag body de nuestra página.

    </pre><div id="fb-root"> </div><pre><br /><script type="text/javascript">// <![CDATA[
    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    // ]]></script><br />

    Luego, tendremos que añadir un atributo a nuestro tag HTML de la página, quedando de la siguiente manera:

    <br />

    El siguiente código debe ir donde queramos mostrar el botón:

    <br />layout="button_count" width="130" show_faces="false"<br />action="recommend" font="arial"&gt;<br />

    Aquí deberemos substituir el contenido del atributo href por nuestro código permalink.

    <br /><!--?php echo permalink($post--->ID); ?&gt;.<br />

    Esta forma nos dará conflicto a la hora de validar nuestra página mediate W3C Validator, por lo que no es la más óptima.

    El tipo de botón, letra, tamaño, etc, son de ejemplo, al generar nuestro botón esto cambiará.

Espero que esta guía en español y detallada de como incrustar el botón de facebook “Me gusta”, les haya sido de utilidad.