Como hacer responsive o adaptable el plugin social de páginas (Like Box) de Facebook usando jQuery (Técnica efectiva)

miércoles, 12 de octubre de 2016

Como hacer responsive o adaptable el plugin social de páginas (Like Box) de Facebook usando jQuery (Técnica efectiva)

Tomado de: https://www.drupal.org/project/fb_likebox

Para nadie es un secreto que desde que Facebook actualizó su API, muchos de los beneficios que se tenían en cuanto al comportamiento de sus widgets, en este caso el comportamiento en diferentes resoluciones, se complicó, por lo menos en mi caso, se hace un poco tedioso, tener el Like Box widget en un sitio web que obviamente se va a visualizar mucho más en pantallas móviles. Y aunque al momento de generar el código del widget, Facebook ofrece una opción para hacerlo "responsive", esta no funciona como muchos esperamos.

Teniendo en cuenta todo lo anterior y con el sudor casi escurriendo por mi mejilla, no por el calor sino por el trabajo de encontrar una solución a este "problema" (al menos para mi) de la mejor y más estética manera, les compartiré la que, según mi criterio, sería una de las mejores formas de dar respuesta a mi cuestión. Olvidé mencionar que soy un tanto perfeccionista y/o quisquilloso.

Para llevar a cabo los pasos necesitaremos, como lo dice el título de esta entrada, jQuery como principal y única "herramienta", teniendo en cuenta que implementaremos también unas líneas de HTML.

Aunque la explicación se va a desarrollar para un este blog, es decir, sobre Blogger, el procedimiento también funciona en Joomla, Drupal y Wordpress, sin mencionar el HTML plano.

Sin más preámbulo comencemos:

Incluir la librería jQuery en nuestro sitio web o blog
Para Joomla no es necesario hacer este paso, ya que el CMS trae consigo una versión de la popular librería, en otros CMS no sabría decirles si también es así, sin embargo por si necesitan incluirla, de la siguiente manera lo pueden hacer manualmente. Escriben el siguiente código después de la etiqueta <head>
Con esto ya tendrán incluido en su sitio web la librería jQuery, al menos en la versión 3.1.1.
Agregar o modificar el Like Box de Facebook
Si aún no tienen incrustado en su sitio web el widget Like Box en su sitio web, pueden generarlo dando clic aquí. Si ya lo tienes, debes tener muy en cuenta las siguientes modificaciones. Debes crear un div con un identificador llamado "facebook-box-content", ahí dentro debes pegar el código generado desde el enlace que mencioné anteriormente. El ejemplo quedaría así.
Luego de generar el código del Like Boxal, al segundo bloque de código de este, le agregamos un identificador llamado "facebook-widget" en la primera y única etiqueta div que nos aparece. El código completo quedaría algo así.
```
<div id="fb-root"></div>
<script>(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/sdk.js#xfbml=1&version=v2.8&appId=711374318989573";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<div id="facebook-widget" class="fb-page" data-href="https://www.facebook.com/ElDeportivoDelLlano/" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/ElDeportivoDelLlano/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/ElDeportivoDelLlano/">El Deportivo del Llano</a></blockquote></div>
```
Nótese que el identificador se agrego en la parte donde se resalta en rojo de la siguiente manera "<div id="facebook-widget" class="fb-page" data-href...".
Implementar jQuery para lograr el efecto deseado
Este se podría decir que es el último pero no menos importante paso a seguir para culminar con el procedimiento. El siguiente código, obviamente se debe implementar entre etiquetas <script></script>, pero se puede ubicar en cualquier parte de nuestro sitio web, preferiblemente justo después del código del Like Box.
```
$(document).ready(function(){
    var anchoFBbox = $('#facebook-box-content').width();
    $('#facebook-widget').attr('data-width',anchoFBbox-30);
});
```
Para Joomla se debe reemplazar los caracteres $ por la palabra jQuery, quedaría algo así.
```
jQuery(document).ready(function(){
    var anchoFBbox = jQuery('#facebook-box-content').width();
    jQuery('#facebook-widget').attr('data-width',anchoFBbox-30);
});
```

Eso sería todo, con esto, nuestro script lo que hace es detectar el ancho del div donde está anidado nuestro Like Box de Facebook, asigna ese ancho a una variable, luego el valor de esa variable se la asigna a al atributo data-width de la etiqueta div del Like Box que muestra la página de fans, permitiendo que este se adapte según el tamaño del contenedor que obviamente cambia con cada resolución de pantalla.

Espero le sea de mucha ayuda esta información como lo fue para mi. Si tienen alguna pregunta o sugerencia, no duden dejarla en un comentario. Les estaré eternamente agradecido si comparten esta información con sus amigos y/o conocidos que puedan necesitarla, al igual que en sus redes sociales.

Nota: la redimensión del Like Box se aplica cada vez que se recarga la página en el navegador, es decir que se aplica al momento de cargar el sitio en cada dispositivo, no es la manera más completa de hacer responsive este widget, pero si ha sido la que me ha dado mejores y más estéticos resultados.

4 comentarios :

Unknown2 de octubre de 2018, 12:16
Mi amigo pero si yo quiero ocultarlo a una cierta medida de la pantalla, como podria hacerlo??
ResponderEliminar
Respuestas
Gallo28 de diciembre de 2018, 10:29
No me funciona. Si podes colocar algún link de ejemplo, donde se vea como va tomando diferentes medidas de acuerdo al ancho disponible, sería muy bueno
ResponderEliminar
Respuestas

Añadir comentario