Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Creación de un widget de perfil social para mostrar el recuento de seguidores

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En la primera parte de esta serie, analizamos cómo recuperar mediante programación el recuento de Me gusta de una página de Facebook, y el número de seguidores de Twitter y Google+. Al final, habíamos creado tres funciones auxiliares PHP para simplificar la recuperación de los recuentos de las redes sociales.

Estas funciones aceptan como argumento, un nombre de usuario de página de Facebook, un nombre de usuario de Twitter y un nombre de usuario o ID de Google+ respectivamente y a su vez devuelven el recuento de Me gusta o seguidores.

En esta parte final de la serie, desarrollaremos un widget de perfil social que enlaza con una página de Facebook, con una cuenta de Twitter y un perfil de Google+. El widget también mostrará el recuento de Me gusta de una página de Facebook, así como el recuento de seguidores en Twitter y en Google+.

A continuación se muestra una captura de pantalla del widget que construiremos a lo largo de este tutorial.

Codificar el widget

Al igual que sucede en todos los plugins de WordPress, el encabezado del archivo que contiene la meta información (como Nombre, Versión, Autor, etc.) relacionada con el plugin debe estar al principio del archivo del mismo.

A continuación se muestra nuestro encabezado del plugin de widget.

Para crear un widget de WordPress, la clase estándar WP_Widget debe ser ampliada y en la clase secundaria se deben incluir los métodos necesarios. Finalmente, se registra la clase secundaria del widget y se engancha a WordPress.

Crea la clase secundaria que extiende la clase primaria WP_Widget.

Asigna un nombre y una descripción al widget utilizando el método __construct().

En este momento, es el momento de aprovechar las funciones auxiliares que creamos en el último artículo para que podamos mostrar los Me gusta y los seguidores de Facebook, Twitter y Google+.




En el anterior método twitter_count(), el token de acceso OAuth de la aplicación de Twitter, el secreto del token de acceso, la clave de consumidor y el secreto de consumidor están codificados de forma rígida para el método.

Tendrás que cambiarlas por las credenciales de OAuth de tu aplicación de Twitter.
Lo mismo ocurre con la clave API de Google Plus en el método googleplus_count().

Las opciones de configuración del widget constarán de cinco campos de formulario que contienen el título del widget, los nombres de usuario de Facebook, de Twitter y de Google+ como se muestra en la siguiente imagen.

El siguiente método form() crea el formulario del Widget.

Cuando se introducen valores en el campo de formulario, deben guardarse en la base de datos. El método update() desinfecta los valores de formulario eliminando datos malintencionados y una vez desinfectados, guarda los valores en la base de datos.

A continuación el método widget() muestra los enlaces a los perfiles de redes sociales junto con el recuento de los Me gusta y los seguidores en el front-end de WordPress.

Hemos terminado de incluir los métodos y los códigos necesarios para la clase, por lo que todo lo que nos queda por hacer es incluir la llave de cierre de la clase.

La clase de widget Tutsplus_Social_Profile debe registrarse usando la función register_widget de WordPress, y luego debe engancharse a la acción widgets_init.
Si no se hace esto, el widget no será reconocido por WordPress.

Para que el widget tenga una buena apariencia, a continuación añadimos el siguiente CSS para el widget que también incluye el archivo de la hoja de estilo de los iconos de Font Awesome importado.

Guarda el archivo CSS con el nombre tutsplus-social-profile-widget.css en la carpeta raíz del plugin.

Por último, debemos poner en cola en WordPress el archivo CSS:

Perfecto, ya hemos terminado de codificar nuestro widget para perfiles sociales

Mejoras sugeridas

En la clase de widget, las credenciales OAuth de Twitter y la clave de API de Google+ se codificaron de forma rígida para la clase. Al desarrollar un plugin de esta naturaleza, debería existir una página de configuración que contenga un formulario para guardar las claves de OAuth y API en la base de datos de WordPress que luego serían recuperadas y utilizadas por la clase.

El formulario del widget carece de un útil mecanismo de validación del lado del cliente que garantice que se introducen los valores de formulario correctos. Lee mi artículo sobre Validación de formularios del lado del cliente con HTML5 para obtener información sobre cómo se puede realizar la validación.

El widget solo incluye Facebook, Twitter y Google+. Pero eres libre de ampliar la clase del widget e incluir otras redes sociales.

En la esquina superior derecha de esta página encontrarás un enlace para descargar el archivo del plugin Widget. Sigue adelante y utilízalo en tu propio sitio WordPress y estudia también el código para comprender completamente cómo funciona.

¡Todos y cada uno de los comentarios y preguntas que me envíes a través de la sección de comentarios son bienvenidos!


Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.